Como desenvolvemos a interface do De Olho no Bolso

Nossas decisões de UI para construir um aplicativo para gestão de finanças pessoais.

Em dezembro/2020, formamos nossa equipe de UX Designers composta por Alana Gazola, Millôr Silveira, Monique Barboza e eu, Talitha Ferreira. Desenvolvemos um produto digital durante o período de 10 semanas, visando a facilitação de um planejamento financeiro com ao menos uma meta de economia.

Entenda o processo completo de desenvolvimento deste produto aqui.

Na fase de ideação, reunimos todos os dados colhidos nas fases de Desk Research, benchmarking, e pesquisas quantitativa e qualitativa. As informações reunidas nos direcionaram a criar uma solução que fosse familiar aos usuários, por isso optamos por seguir o conceito Mobile First e desenvolver um aplicativo iOS (Apple) para celular. Aproveitamos a oportunidade para estudar o Human Interface Guidelines por ser uma das bibliotecas de UI mais relevantes da indústria.

Protótipo de baixa fidelidade

Iniciamos a ideação da solução utilizando o método da Google Design Sprint, Esboço em 4 Etapas. Este processo gerou um banco de ideias que serviram como base para a criação do protótipo de baixa fidelidade.

Dentre os diversos requisitos de um planejamento financeiro, focamos em representar no fluxo de telas uma tarefa recorrente e essencial para aqueles que querem acompanhar seus gastos, o registro de uma despesa.

Criamos o protótipo de baixa fidelidade no Figma com o propósito de testar a usabilidade do protótipo cru, sem a interferência do Efeito da Usabilidade Estética. Por isso, nesta fase utilizamos tons de cinza ao invés de incluir as cores da marca e elementos que deixariam a interface mais agradável visualmente. Porém, desde o início optamos por usar textos reais ao invés de Lorem Ipsum.

Protótipo de média fidelidade

A partir desta etapa, Alana e eu ficamos responsáveis pelo design da interface do app enquanto o resto do grupo se dedicava ao planejamento dos testes de usabilidade. A maior parte das decisões de UI ocorreram nesta transição para o protótipo de média fidelidade.

Realizamos um benchmarking de UI focado em analisar as soluções já usadas pelo nosso público alvo. Esta decisão foi com o objetivo de criar um aplicativo que fosse familiar aos usuários, seguindo a Lei de Jakob.

Para entender quais soluções já estavam presentes no mercado, nós analisamos a biblioteca de referência Mobbin. Selecionamos os padrões de design que refletiam as funcionalidades que precisávamos desenhar.

Após testes de usabilidade do primeiro protótipo com oito usuários, percebemos que alguns elementos da interface causaram fricção na experiência dos usuários ao realizar as tarefas. Para melhorar isso, realizamos alterações significativas, como:

Alguns textos e posicionamento de botões não ficaram expostos de maneira clara o suficiente e geraram confusão aos usuários, por exemplo da carteira. Editamos os textos e seguimos a Lei de Hick para organizar os elementos da interface.

Na tela de Resumo, entendemos que o gráfico de rosca não era o mais adequado para representar as movimentações em períodos. Então elaboramos uma nova tela, utilizando o gráfico em barras.

A maioria dos usuários não entenderam que o botão de adição no menu do rodapé os direcionava a registrar uma nova despesa. Então trocamos o ícone e destacamos o botão de registro do resto do menu no rodapé.

Também acrescentamos ao fluxo do usuário a área de Sonhos (antes chamada de Cofrinho) onde o usuário pode criar metas de economia e acompanhar o progresso para alcançar seus objetivos financeiros. Simultaneamente, criamos nossa marca e Design System.

Protótipo de alta fidelidade

Durante a criação do protótipo de alta fidelidade buscamos elevar ainda mais a acessibilidade do nosso aplicativo. Aproveitamos o momento das alterações e realizamos testes para melhorar a acessibilidade do nosso app. Seguimos as diretrizes WCAG 2.1 (W3C) e o manual Human Interface Guidelines da Apple e alcançamos o nível de conformidade AA em todas as telas do nosso protótipo.

Após os testes de contrastes, decidimos

Melhoramos o contraste entre as cores de fundo e primeiro plano
Aumentamos o tamanho das fontes
Nos aprofundamos nos conceitos de hierarquia visual
Renomeamos botões de ação secundários
Uniformizamos os espaços negativos entre os elementos da interface

Confira abaixo o antes e depois de algumas telas:

Também nos atentamos à experiência do usuário e fizemos alterações nos elementos da interface, por exemplo:

• Alteramos alguns textos das telas de onboarding para a melhor compreensão das funções do aplicativo.
• Na tela de login aumentamos o destaque dos campos de cadastro.
• Deixamos claro que nosso app não solicita dados sensíveis como senhas de acesso ao banco.
• Adicionamos balões de informação próximos aos elementos de ação principal.

E finalmente consolidamos nosso protótipo de alta fidelidade, a marca De Olho no Bolso e nosso Design System.

A Marca

Para representar o nosso produto, queríamos um nome que os usuários facilmente reconhecessem como o propósito do aplicativo. Então procuramos por expressões comuns relacionadas a dinheiro. Depois de um brainstorming em equipe, finalmente chegamos ao nome “De Olho no Bolso”.

O ícone da marca é uma criação original e foi desenhado para representar os elementos do nome: um olho dentro do bolso. A tipografia foi adaptada para acomodar dois olhos no lugar das letras “o”s. Tanto as cores quanto a tipografia base respeitam o nosso Design System.

Design System

Nosso Design System focou em oferecer ao usuário uma interface leve e didática. Utilizamos uma linguagem acessível e sem jargões baseada nos relatos de usuários durante as pesquisas e testes. Ele foi elaborado de acordo com conceitos do design atômico. Apesar de incluir somente os elementos necessários a este projeto, ele pode ser facilmente expandido.

Seguimos as heurísticas de Nielsen como fundamento na criação da nossa interface. Com destaque a:
Visibilidade do Status do Sistema
Consistência e Padronização
Prevenção de erros

Na escolha das cores, trabalhamos com o significado cultural: o azul como cor primária para evocar o sentimento de confiança; e o amarelo como cor secundária e complementar para relacionar o aplicativo a questões de dinheiro e otimismo na gestão financeira.

Escolhemos uma fonte sem serifa e bastante conhecida, Helvetica, para nos aproximarmos da fonte do sistema operacional da Apple, SF Pro, e mantermos a legibilidade dos caracteres alfa-numéricos em tela.

Por fim, a iconografia e ilustrações foram adaptadas de bancos de licença gratuita como o Icon Park e o DrawKit.

Aprendizados

Se nosso MVP fosse ao mercado hoje, o usuário já poderia realizar um planejamento financeiro de maneira simples, e as mudanças na interface fariam parte de um processo contínuo no melhoramento do produto.

Entendemos que a melhor interface é aquela que se adequa às necessidades dos usuários e diminui a curva de aprendizado, e que portanto, está intimamente ligada aos conceitos de experiência do usuário.

Alana | UX Research, Teste de Usabilidade, User Flows, Wireframes, UI Design, Design de Logo

Talitha | UX Research, Teste de Usabilidade, User Flows, Wireframes, UI Design, Edição e Revisão de Texto