UX/UI Design - Branding
2018 - 2020 at Solutis Tecnologia
The "Citizen Complaint" Project, developed by Solutis Tecnologias for the Court of Justice of the State of Bahia, aims to expand access to justice. The project consists of an app for lodging complaints related to service issues and unauthorized charges involving the supply of energy, water, and telephone services. With a fast and guided process, citizens can initiate a judicial process and automatically schedule a preliminary hearing.
A flow was created that reflects in an optimized way the face-to-face service that was tested and observed in the research.
The app was designed by our team from scratch - started with the solution, ended up polishing pixels.
We studied the feelings through the journey and created motion and states to make the process lighter considering the many mandatory steps.
project and business goals
The Court of Justice of the State of Bahia (TJBA) is the highest body of the Judicial Branch of the Bahia state of Brazil, located in the city of Salvador and jurisdiction throughout the state territory. Currently, the TJBA has been struggling to deal with the high volume of small claims cases in the state, which reinforces the public image of justice as something time-consuming, bureaucratic and complex.
Faced with the situation presented, Solutis, partner of TJBA in several internal technology projects, decided to examine the issue in depth to propose a solution focused on a digital and relationship transformation in the Court. The following project presented was limited to the scope of the problem concerning water service provided to citizens.
Create a flexible and robust product that solves in minutes a problem that can last a lot of hours and cost Money.
Provide a tool that brings people closer to the judiciary and becomes an ally in providing basic education on services and consumer rights.
Ensure the highest safety standards, using facial recognition with high accuracy and verification.
The level of understanding about rights and services is very different in society and varies according to historical, economic and educational processes.Achieving a product language that is broad and accessible is a challenge to overcome social and technological barriers in a state with high rates of functional or absolute illiteracy.
When creating the Queixa Cidadã, we needed to learn more about the users, their needs and pains. We interviewed people in SAC's (centers located in several locations in cities of Bahia focused on the provision of public services) and brought feedback from the court legal staff and servers.
- 53% would be interested in downloading a lightweight and easy-to-use application instead of resolving in person
- 76% were performing acomplaint for the first time
- 61% of visits were scheduled by internet
- 15% don't use a smartphone
paper prototype usability test
We iterated our wireframe design by conducting usability testing with the low-fidelity prototype. Our participants provided feedback on the virtual assistant language, error-prevention methods and discoverability of the UI.
I designed 100+ wireframe screens for discussing and validation
The branding system is calm but vibrant, bringing energy and confidence to help people. The brighter tones of remarkable colors soften the image that often remains in the common sense of a complicated and slow justice. Associated with elements of empathy and the tone of voice warm and clear of the assistant Judi, the brand brings positivity and confidence to times when people need after facing problems with essential services.
The clean, smooth and data-centered interface of the app Queixa Cidadã
Judi's static drawing was passed to me in vector form and I explored ways to animate her in the steps, as a way to contextualize the information and guide the user.
As I was designing the UI wireframes and components, I realized that the most important function of the app lies on forms and upload of photos. I tested out different types of fields, micro interactions and information distribution.
I tested many solutions to help users to understand the necessary movement of their heads for using the facial recognition
The Design System was developed, tested and evolved according to the evolution of the app. The visual library was made available to developers through Adobe XD and animations made in After Effects and exported through the Lottie library, generating smooth and light animations to bring engagement to the experience. The web implementation in React.js followed the same visual guidelines of mobile app.
any point described here does not necessarily represent the opinion of the brands and companies involved.