App iDinheiro: Criando um Design System para o app de finanças

Um mergulho no mundo das finanças

Pouco tempo após integrar a equipe do iDinheiro, o primeiro desafio foi lançado: Desenvolvermos o primeiro app da empresa voltados para a educação e gestão financeira.

Com um time enxuto de 3 pessoas (Product Manager, um desenvolvedor, e eu como designer), tínhamos a responsabilidade sobre um produto com o potencial de ajudar a vida de milhares de pessoas. Ao mesmo tempo, precisávamos ter o zelo necessário com a marca que já possuía uma base de milhões de usuários ativos.

Objetivos

A princípio, não havia proposta do que seria o app, essa decisão foi tomada de acordo com pesquisa e análise para encontrar o melhor espaço em que poderíamos atuar, e que traria os melhores benefícios à empresa. Ao fim de um longo processo que envolveu muitas reuniões, entrevistas e pesquisas, chegamos a uma proposta de app de gestão financeira. Com isso, definimos dois objetivos principais:

1. Ajudar na prosperidade financeira das pessoas, na tomada das melhores decisões, e simplificar serviços financeiros, com excelência na experiência do usuário.
2. Contribuir para a democratização dos serviços financeiros, gerando vendas e diversificação dos negócios para a iDinheiro.

Decisões tomadas

Começamos do zero, definindo o tipo de aplicativo, formato, metas, até começarmos os esboços iniciais do projeto. Uma vez que chegamos à etapa de prototipação em alta fidelidade, precisávamos decidir, quanto a UI do produto, se iríamos optar por um framework existente (como Bootstrap UI, Material e similares), ou se desenvolveríamos o design system do zero.

Um ponto chave para nossa decisão foi o fato de que muitas das funcionalidades no roadmap já precisariam do desenvolvimento de componentes específicos devido ao tipos de informações que precisávamos apresentar. Nesse caso, o framework não iria acelerar o processo, mas sim limitar as opções de design por ter pouca margem para adaptações. Por isso, nossa escolha foi por desenvolver nossa própria linguagem de design, voltada para um app desenvolvido inteiramente em Flutter e podendo assim garantir maior consistência, e mais liberdade no desenvolvimento de componentes e ferramentas.

A importância do Design System

O design system é um conjunto de tokens, componentes, widgets, padrões de estruturação da tela e dos comportamentos de elementos interativos. Para que ele possa existir, é necessário que os componentes estejam documentados no projeto de design, mas também no código, agilizando o processo de desenvolvimento por ter toda uma biblioteca com componentes para reutilizar. Entre algumas de suas vantagens, estão:

1 — Consistência visual

Um projeto coeso em sua usabilidade é aquele em que o usuário consegue entender facilmente a funcionalidade das telas através de padrões consistentes na disposição dos componentes em tela.

2 — Agilidade no desenvolvimento

Com uma biblioteca de componentes reutilizáveis e tokens .
Agiliza muito o processo de desenvolvimento e de tomada de decisões.

3 — Diferencial de mercado

Assim como o branding cria uma voz para a marca, o design system cria uma identidade para o aplicativo. Isso além de diferenciá-lo no mercado, permite criar um produto que dialoga com o público-alvo, por estar otimizado para tanto para executar suas funcionalidades, quanto para se comunicar com o usuário através de seus elementos visuais personalizados.

Conforme o desenvolvimento progrediu, o que começou como um guia de estilo com poucos componentes, logo se tornou uma biblioteca robusta com centenas de elementos que são compartilhados entre todas as telas e funcionalidades do app.

Além de documentados no figma, os tokens, componentes e widgets do design system estão implementados via widgetbook, ferramenta para documentação dos elementos de UI desenvolvidos em Flutter, catalogados como biblioteca de widgets, que permite sincronização com figma e fácil reutilização/revisão de código.

Organização no Figma

A partir do momento em que o projeto começou a tomar forma, optamos por criar um arquivo separado para a biblioteca de componentes e outro para os fluxos/funcionalidades. Dessa forma, seria mais simples o controle das versões do projeto. O primeiro destes arquivos é o UI Kit, onde todos os componentes do design system estão organizados por categoria e funcionalidade. O segundo arquivo, “Fluxos”, abrange as telas do app, organizadas por seção, funcionalidades, e propostas/melhorias.

\

Organização do UI Kit

A organização do nosso arquivo de componentes se dá através de seções e categorias. A primeira seção é a de tokens, os menores componentes indivisíveis na interface. Aqui temos todas as variáveis de cor, tamanhos, espaçamentos, arredondamentos, tipografia, ícones, logotipos e animações.

A tipografia escolhida para a interface é a General Sans, por ser versatil ao equilibrar legibilidade e personalidade. É uma fonte de código fechado gratuita desenvolvida pela Indian Type Foundry.

Para escolher a biblioteca de ícones, buscamos um conjunto que oferecesse opções de peso no contorno, e uma integração simplificada com o Flutter. Nisso, a iconoir atendeu perfeitamente às nossas expectativas, tendo peso variável

A segunda seção contém nossos componentes-base, que são os menores componentes consumidos por todos os widgets e layouts desenvolvidos para o app. Dentro dessa seção você encontra botões, inputs, seletores, tags entre outros.

Por último, temos os widgets, que são as estruturas utilizadas por todo o projeto. Estes são o coração do app, pois carregam todas as principais funcionalidades e exibem os dados mais importantes aos usuários. Dada tamanha complexidade, os widgets são categorizados de acordo com os 4 principais fluxos do app: Carteira, Metas, Projeção Financeira, e as transações financeiras, contas e cartões adicionados pelo usuário.

Organização dos Fluxos

O arquivo que agora é chamado de “Fluxos” é onde todos os fluxos e telas do app são organizados, com páginas específicas de acordo com seção, funcionalidade, ou proposta/melhoria.

Durante o desenvolvimento do app, até o estágio atual, tivemos 7 versões de arquivo para organização dos fluxos, cada uma trazendo melhorias para a anterior. A cada trimestre era criado um novo arquivo para desenvolvimento dos fluxos do projeto, onde eram adicionadas aos poucos os fluxos das features planejadas, ao mesmo tempo em que eram consolidadas as funcionalidades já feitas até então. Ao chegarmos à versão 6, era comum deixar abertas várias versões antigas do projeto para consulta de componentes ou telas. Por isso, decidimos evoluir para uma versão definitiva do projeto, e assim ter todo o projeto unificado dentro de apenas 2 arquivos.

Antes agrupávamos os fluxos de cada funcionalidade dentro da mesma página, o que fazia com que muitas telas ficassem agrupadas dentro das mesmas páginas (carteira, metas, projeção financeira). Isso prejudicava a navegação pelo arquivo tanto por ficar mais difícil de encontrar o item desejado quanto por deixar a tela mais lenta de carregar.

Atualmente temos um método que está sendo mais simples e eficiente. No arquivo atual, as divisões por categoria de página continuam, porém cada fluxo fica separado em uma página diferente, enquanto fluxos similares são agrupados, como por exemplo, em adicionar renda ou gasto: Os itens renda e gasto são diferentes, mas são visualizados nas mesmas telas e editados da mesma forma, portanto, os dois fluxos ficam na mesma página, próximos de outros fluxos que envolvam rendas e gastos.\

Principais componentes

Tokens e estilos

As últimas atualizações do Figma trouxeram a opção de documentar as variáveis, que incluem parâmetros numéricos, booleanos, de texto e outros mais. Isso permite uma organização muito mais precisa de todos os tokens do app, facilitando a navegação pela folha de estilo e facilitando sua alteração. Atualmente, estão documentadas como variáveis no figma todos os tokens de cor, tokens tipográficos, de espaçamento, e de arredondamento de cantos e também os logotipos e cores dos 20 principais bancos utilizados por nossos usuários.

As classes de texto ainda ficam armazenadas como estilo, mas consumindo as variáveis de família tipográfica, tamanho e peso. Isso facilita muito a alteração em massa dos estilos, algo que antes só era possível usando plugins como o Figma Tokens.\

Visualização de contas e cartões

É muito importante que o app exiba as informações bancárias com precisão e, parece bobo, mas isso inclui também as cores e logotipos dos bancos do usuário. Além de facilitar a identificação dos diferentes bancos quando listado, isso é um fator que gera confiança do usuário na aplicação, ao entregar uma experiência de Interface mais refinada e completa.

Por isso, além da documentação de marcas dos bancos, foi necessária uma atenção ao modo com que exibimos estes dados em tela, pois precisamos oferecer clareza e acessibilidade para que o usuário consiga ler com facilidade a grande quantidade de informações a se exibir, por exemplo, em uma tela de lançamentos de conta corrente. Para isso foi necessário aplicar conceitos de AI (Arquitetura de Informação). Para conseguir organizar em uma mesma tela informações como saldo, nome do banco, agência/conta, tipo de conta, histórico de transações e última atualização, é necessário trabalhar bem na hierarquia de cada item para que a tela não fique parecendo a resolução de uma equação complexa.

Carteira: Disponibilidade financeira e saldos

A página inicial do App desde o princípio esteve sempre bem organizada em seções, que aos poucos foram sendo condensadas e reduzidas para que fossem exibidas apenas onde necessário. No entanto, o cabeçalho apresentava problemas em dispor informações que são muito similares, confundindo a princípio muitos usuários como observamos em algumas entrevistas. Essas informações são a disponibilidade financeira, e os saldos das contas tanto automáticas quanto as inseridas manualmente. Isso porque o conceito de disponibilidade financeira não ficava tão claro, sendo entendido como Saldo de conta, e não o quociente obtido subtraindo dos gastos da renda disponível em um período selecionado. Exibir com destaque separado a Disponibilidade das rendas, e oferecer ao usuário pontos onde possa clicar para ver a descrição de uma funcionalidade

Animação da Splash Screen

Planejar todas as animações e micro-interações do projeto foi um desafio que me trouxe muito aprendizado, não só de motion design, mas também de handoff para o desenvolvimento, pois busquei a maneira mais simples de extrair o projeto para ser usado em código.

O primeiro desafio foi pensar na animação de splash, a primeira impressão do usuário ao abrir o app. Uma facilidade que tive foi o fato de que desenvolvi o logo em camadas.

Precisamos de desenhar uma versão nova do logotipo para que funcionasse melhor como ícone num smartphone, e de bônus conversar melhor com a proposta e identidade do app. O desenho final, ao mesmo tempo em que representa as letras “ID” de iDinheiro, e identidade, também é uma abstração da forma de uma carteira, com cartão, nota e moeda deslizando para forma, algo que em sua base já remete à noção de movimento. Dado isso, a animação de splash é, em resumo, uma extensão animada da proposta inicial do novo logotipo do app.

Resolvido isto, encontrei duas formas de exportar um arquivo que o desenvolvimento pudesse utilizar, a primeira foi reescrever a animação em RIVE, que é uma ferramenta similar ao after effects, mas voltada para apps e games, e a segunda foi exportar a animação feita em figma para o formato lottie, um formato popular de animação com muita compatibilidade através de plugins e extensões para diversas plataformas.

Menu principal/ Botão adicionar

Inicialmente, um FAB era usado para trazer o menu com as ações principais do app, que são adicionar contas, gastos e rendas. No entanto, esse botão de ação flutuante atrapalhava a visão do restante da tela, principalmente em tabelas e listas. Após análise, concluímos que o botão adicionar só precisa ser visível nas telas principais. Por isso, refizemos o menu de rodapé para incluir o botão “+” à direita, tornando-o ainda mais fácil de acessar.

Além da mudança de layout, desenvolvemos uma mudança na funcionalidade adicionar: Nas versões iniciais, clicar no “botão +” trazia um modal bottomsheet com as opções. No entanto, com o progresso das outras funcionalidades, este formato foi sendo muito utilizado, e precisávamos destacar a principal ação do aplicativo em meio à todas as outras atividades mais corriqueiras.

A solução encontrada foi, acredite, mais FABS! No entanto, estes 4 fabs (inserir piada com quarteto fantástico) são exibidos apenas ao clicar em “+”, e se sobrepõe ao fundo através de um overlay, assim priorizando apenas os botões exibidos, com a facilidade de que eles serão ocultados assim que o usuário dispensar as opções clicando em qualquer espaço vazio da tela.

Para trazer mais refinamento a esse componente, foi desenvolvida uma sutil animação para trazer os elementos à tela quando o botão está ativo.

Gráfico de Projeção Financeira

A disponibilidade financeira é uma funcionalidade que auxilia o usuário a se informar de suas condições ao visualizar suas rendas e dívidas em um período de tempo especificado. Essa visualização tem como principal elemento, um gráfico de linha que representa o saldo do usuário naquele dia selecionado. Essa escolha de representar os dados permite ao usuário observar de maneira simplificada as oscilações que resultam dos seus gastos e ganhos ao longo do tempo.

Por só ter uma linha, pudemos acrescentar um efeito gradiente no gráfico sem possibilidade de sobreposições que gerem poluição visual. Esse efeito auxilia também na comunicação da saúde financeira, usando a cor vermelha para indicar saldo negativo.

Foi um desafio desenvolver a proposta de navegação por gestos, mas isso era essencial para que o uso desta tela não gere tanta carga cognitiva. Por isso, o gráfico pode ser arrastado para visualizar qualquer ponto do período, sendo que o dia no centro sempre fica em destaque, exibindo a data e valor da disponibilidade daquele dia.
Abaixo do gráfico fica uma listagem das transações feitas ou a fazer, obtidas dos lançamentos manuais e automáticos feitos pelo usuário.

Conclusão

Certamente passamos por muitos desafios ao longo deste primeiro ano desenvolvendo o app iDinheiro. Desde as primeiras versões, trouxemos muitas funcionalidades novas, integração com o Open Finance , implementação do gráfico de projeção financeira, e uma seção de metas financeiras. Tudo passou por diversas versões, testes e melhorias, sempre se baseando na comunicação com os usuários e no trabalho com decisões tomadas em equipe. Esse foco no usuário que tem guiado o processo torna difícil prever quais funcionalidades vão ser adicionadas no futuro, mas é certo de que o design system é um produto vivo que deverá se manter em constante adaptação às mudanças que ocorrerem, evoluindo sempre.