Queixa Cidadã

UX/UI Design - Branding
2018 - 2020 at Solutis Tecnologia

An image demonstrating the interface of the system called "Citizen Complaint" in a mobile cellphone and in a desktop.

Project Overview

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.

My Contributions

UX Design
‍A flow was created that reflects in an optimized way the face-to-face service that was tested and observed in the research.

‍UI Design
‍The app was designed by our team from scratch - started with the solution, ended up polishing pixels.

‍Interaction Design
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.

make it easy

Create a flexible and robust product that solves in minutes a problem that can last a lot of hours and cost Money.

make it interesting

Provide a tool that brings people closer to the judiciary and becomes an ally in providing basic education on services and consumer rights.

make it safe

Ensure the highest safety standards, using facial recognition with high accuracy and verification.

challenges

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.

Illustration with a mobile phone and people delivering papers

research

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

branding

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.

particular material.
any point described here does not necessarily represent the opinion of the brands and companies involved.