Simplificando a conta de água de 28 milhões de pessoas
Um problema vivido pela minha própria mãe — não conseguir se localizar no portal de uma das maiores empresas de São Paulo — virou o ponto de partida para redesenhar o fluxo de faturas da SABESP do zero.
CONTEXTO
Projeto autoral para portfólio
MEU PAPEL
UX Research, UI Design, Prototipagem
DURAÇÃO
1 SEMANA
FERRAMENTAS
Figma, FigJam
01
Hierarquia confusa
Informações sem ordem de importância e contraste inadequado dificultavam a orientação visual desde o primeiro acesso.
O PROBLEMA
Pagar a conta de água não deveria gerar dúvidas
Ao analisar o portal atual, três bloqueios críticos afastavam os usuários antes mesmo de chegarem ao objetivo
02
Login com múltiplos caminhos
Dois pontos de entrada conflitantes — com e sem login — e um fluxo estilo questionário tornavam o acesso mais complexo do que precisava ser.
03
Faturas sem contaxto
Lista sem diferenciação de status, informações técnicas em excesso e muitos passos para chegar à fatura desejada.
PROCESSO
Do diagnóstico à solução
Uma abordagem centrada no usuário com etapas conectadas e decisões embasadas em evidências.
01
Análise heurística do portal atual com foco em hierarquia visual, contraste de cores, comportamento do menu e legibilidade. Identificados 9 pontos críticos de usabilidade antes de qualquer proposta.
Diagnóstico
02
Jornada "as-is" documentada do acesso ao download da segunda via. Os usuários abandonavam principalmente no login e na busca por faturas anteriores.
Mapeamento
03
Novo fluxo considera 3 perfis de usuário: quem quer pagar fatura em aberto, quem quer histórico, quem precisa da segunda via. A tarefa principal passou de 9 para 5 etapas.
Fluxograma
04
Testando com usuários tive os ajustes na hierarquia da tela de detalhe feitos antes de avançar para o visual.
Wireframes
05
Defini um fluxo de 6 telas como principal resolução de dor, com hierarquia clara e sistema de cores da SABESP renovado. Ação principal sempre em destaque, informações secundárias acessíveis e melhor legibilidade
Telas finais
9→5
Steps para o fluxo principal de acessar segunda via da conta, tendo uma redução de 44% do tempo necessário
RESULTADOS
100%
Dos teste qualitativo realizado pós re-design do fluxo tive aprovação de 100%
4.7/5
Em quesito satisfação e nota dada para o fluxo.
Solução
Poucas telas para resolver um fluxo que gera muitos acessos e retorna receita para a empresa, juntando design e negócios, transformando em lucratividade e maior aceitação do público.
Conclusão
APRENDIZADOS
Hierarquia é a função do design
Antes de cor ou tipografia, a pergunta é: o que o usuário precisa ver primeiro? A resposta guiou cada tela
O que este projeto me ensinou
Restrições de marca não são obstáculos
Trabalhar dentro da identidade da SABESP me forçou a ser mais criativo na estrutura e nos padrões de interação
Teste cedo, mesmo com wireframe
O feedback mais valioso veio de protótipos de baixa fidelidade — quando ainda era barato mudar.
Acessibilidade não é extra
Um serviço público atende todos os perfis. Contraste e legibilidade foram critérios desde o início.