Cliente
Voltz
Minha função
Visual Design UI & UX Design UX Research
Indústria
Fintech
Data
Janeiro de 2023
O Problema
O desafio não era uma única funcionalidade com falhas — era um produto que havia crescido sem um sistema de design claro ou uma lógica centrada no usuário.
Problemas de acessibilidade
O contraste de cores não atendia aos padrões mínimos de legibilidade, especialmente em condições de pouca luz e em telas menores.
Hierarquia pouco clara
A organização dos recursos não refletia a forma como os usuários realmente pensam sobre suas finanças, aumentando a carga cognitiva a cada interação.
Ausência de base para escalabilidade
A interface não possuía um sistema de grade nem lógica de componentes, tornando-a frágil e cara de evoluir à medida que o produto crescia.
Antes de partir para as soluções, eu precisava verificar se os problemas identificados na análise heurística eram realmente percebidos pelos usuários reais ou se eram apenas suposições de design.
Realizei um teste de usabilidade não moderado com mais de 20 participantes, recrutados entre a base de usuários reais do aplicativo e selecionados com base em perfis demográficos. O objetivo era observar como os usuários navegavam pelos principais fluxos sem qualquer orientação — revelando pontos de atrito que um ambiente moderado provavelmente ocultaria.
Foram testadas três tarefas: verificar o saldo, fazer uma transferência por Pix e acessar o histórico financeiro. Ações simples que não deveriam exigir esforço, mas exigiram.
Complexidade da navegação
Os usuários tiveram dificuldade para localizar os principais recursos na primeira tentativa.
Conclusão lenta das tarefas
As ações simples levaram, em média, 35 segundos, um tempo bem acima do esperado.
Os resultados revelaram padrões consistentes entre os participantes: o problema não era que os usuários não compreendessem o aplicativo era que a interface os obrigava constantemente a se reorientar.
Analisei mais de oito aplicativos de serviços bancários digitais em três dimensões diretamente relacionadas aos problemas identificados na pesquisa:
navegação e arquitetura da informação, hierarquia visual e exibição de dados financeiros.
O objetivo não era buscar inspiração. Era obter evidências.
Três padrões consistentes se destacaram entre as experiências de melhor desempenho:
Divulgação progressiva: os aplicativos eficazes exibiam apenas o que os usuários precisavam em cada momento ocultando a complexidade por trás de pontos de entrada claros.
Dados financeiros como uma hierarquia: saldo, transações e ações tratados como um sistema em camadas, cada um com peso visual distinto sem destaque igual.
Navegação ancorada nos objetivos do usuário: recursos organizados em torno do que os usuários querem fazer, não em torno da lógica interna do produto.
Esses padrões moldaram diretamente o redesenho, particularmente a reestruturação da tela inicial.
A fase de design começou pela estrutura e não pelos elementos visuais. Antes de abordar a cor ou a tipografia, eu precisava resolver os problemas arquitetônicos que estavam causando atrito.
Os fluxos de navegação foram redesenhados para eliminar etapas desnecessárias. Funcionalidades acessadas juntas com frequência foram agrupadas em clusters coerentes, reduzindo o esforço mental para navegar pelo app.
Foi introduzido pela primeira vez um sistema de grade — não se tratou de uma decisão meramente estética, mas sim estrutural. Paralelamente, foi criada uma biblioteca de componentes, garantindo a consistência em todas as telas sem a necessidade de retrabalho.
Os fluxos principais foram parcialmente validados com os usuários antes de avançarmos para a fase de alta fidelidade — o suficiente para confirmar a direção e evitar retrabalho em fases finais.
Os fluxos atualizados eliminaram telas intermediárias, reduziram decisões por etapa e alinharam a navegação ao modelo mental que os usuários já tinham sobre como tarefas bancárias deveriam funcionar.
A interface final reflete cada decisão tomada ao longo do processo da arquitetura à hierarquia visual.
Saldo como elemento principal, ações rápidas em sequência, histórico abaixo. O usuário encontra o que precisa sem precisar procurar.
Ações comuns acessíveis em menos etapas, com um padrão consistente em todos os fluxos.
Um grid definido, contraste aprimorado e uma biblioteca de componentes consistente dão à interface a coerência que faltava e a flexibilidade para crescer.
0%
0%
dos usuários consideraram o aplicativo mais funcional
representando uma melhoria de 21% em relação ao teste inicial.
Essas melhorias validaram que resolver problemas estruturais — não apenas visuais — é o que realmente faz diferença.
• Problemas de usabilidade raramente são sobre estética. São sobre estrutura e as decisões tomadas antes do primeiro pixel ser colocado. • Ao basear cada decisão em pesquisa, o redesign tratou as causas reais da fricção, não apenas seus sintomas. O resultado foi um produto mais intuitivo, mais acessível e mais escalável.