SOBRE A CREDUTPAY
A CredutPay é uma fintech processadora de pagamentos que simplifica a jornada financeira do brasileiro, liderando a inovação e solução positiva para os usuários, facilitando a realização de pagamentos de forma rápida e segura.
OBJETIVOS DO PRODUTO
• Aplicativo de carteira digital com foco no público C/D/E
• Facilitar a antecipação de crédito através do PIX parcelado no cartão
• Promover e incentivar a educação financeira através do nosso mascote
DESAFIOS
• Trabalhar a acessibilidade de acordo com a WCAG
• Projetar uma interface que transpareça segurança para o usuário
• Diminuir a curva de aprendizado de uso do app
• Fornecer feedback imediato sobre as ações do usuário
• Construção de uma biblioteca de elementos
• Implementação de um Design System
​
Estratégia para gerar mudanças
O primeiro desafio para desenvolvimento dessa interface foi a integração do time de produto com o time de desenvolvedores. Ao iniciar no projeto, não tínhamos a cultura da daily plenamente implementada na equipe e isso dificultava o alinhamento interno gerando atrasos nas entregas e retrabalhos de código. Juntamente com a Product Manager do projeto, puxamos o time para o espaço das dailys e tornamos essa cultura algo firme na empresa. Isso impactou todos os resultados mostrados a seguir e deixou o time mais seguro e confiante para seguir com o projeto.
"Todas as inovações eficazes
são surpreendentemente simples."
Peter Drucker
Userflow
Ao entrar no projeto, me deparei com as telas criadas anteriormente a minha chegada no time e decidi organizar o fluxo de usuário através de um organograma. Nele inseri as telas finalizadas e as telas ainda em andamento para melhor visualização do time. Também mapeei as funcionalidades futuras e as possíveis melhorias para a versão do MVP. Havia um espaço de dúvida muito grande entre o time de devs e o time de produto, as informações não circulavam e, a partir deste organograma, conseguimos melhorar a integração do time e traçar os próximos passos para uma entrega de valor.
Pesquisa
Ao concluir o organograma de fluxo de usuário pude me debruçar sobre as telas existentes e, através de pesquisas de referências de outros apps financeiros sob a ótica das heurísticas de Nielsen, consegui identificar alguns pontos de melhorias mais urgentes:
• Botões e elementos não seguiam as normas da WCAG sobre o contraste das cores
• Ícones de diferentes bibliotecas gerando ruído na consistência do app
• Curva de aprendizado e fluxo longo para transações
• On boarding longo e cansativo
• Inexistência do uso de auto layout prejudicando a velocidade do fluxo de mudanças
​
“Experiência do usuário abrange todos
os aspectos da interação do usuário."
Donald Norman
Melhorias
Acessibilidade e WCAG
​
Um grande problema encontrado na interface foi a falta de contraste mínimo entre texto e cor de fundo encontrado nos botões (destacados em rosa pink nas imagens anteriores. Segundo as Diretrizes de Acessibilidade para Conteúdo Web (WCAG):
"Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1"
​
Para realização do teste de contraste mínimo foi utilizado o software WCAG Color Contrast Checker que constatou que o verde utilizado não tinha contraste o suficiente para ser usado com o texto em branco. Dessa forma, selecionei outra cor da paleta que possuía o contraste mínimo para ser usada em botões e em áreas de destaque do aplicativo. Essa mudança gerou uma melhoria significativa na legibilidade possibilitando que pessoas de baixa visão e aplicativos de leitura de tela realizem a leitura correta dos textos.
Nas imagens, a cor #49DCa4 falha em todos os testes de contraste, já a cor # 004651
passa em todos os testes de contraste mínimo, sendo, então, a cor substituta escolhida.
Biblioteca de ícones e itens inconsitentes
​
Logo na tela de INÍCIO, foi possível identificar uma inconsistência na biblioteca de ícones utilizada e problemas, havendo ícones em outline e ícones com preenchimento interno. Outro problema era o uso das cores que também prejudicava legibilidade e o tamanho mínimo das letras que, por vezes, chegam a 10pts em ítens que deveriam ter o mínimo de 12pts.
​
Para a nova proposta de tela de INÍCIO priorizei o uso de termos em português tendo foco no nosso público alvo, evitando o uso da palavra HOME e outros termos em inglês presentes no app. Transferi o perfil para o lado superior direito seguindo um padrão presente nos apps atuais, diminuindo, assim, a curva de aprendizado do usuário. Para as funcionalidades, foi dado um desta que maior com o aumento do tamanho de fonte utilizado passando de 10pts para 14pts. Outras mudanças feitas: atualização do modelo de cartão seguindo as cores de contraste mínimo, inserção de menu "Em breve" com as funcionalidades futuras que chegariam no app, gerando expectativa e antecipação. O menu foi simplificado para apenas 3 ícones: Início, aba de Ajuda e Carteira.
Fluxos longos e curva de aprendizado
​
Outra melhoria feita foi a diminuição das curvas de aprendizado através da da diminuição dos fluxos de usuário. Reduzi o número de telas e padronizei o uso de botões e ícones para melhor assimilação, diminuindo significativamente o tempo para finalização dos fluxos e conclusão das vendas dentro do app. Dessa forma, o usuário diminui seu estresse ao usar o app e o financeiro pode contabilizar um número maior de transações em um menor tempo. Na imagem a seguir, a visualização do fluxo de on boarding anterior com um longo caminho até finalização de cadastro.
​
“É muito melhor adaptar a tecnologia ao usuário do que forçar o usuário a se adaptar
a tecnologia.”
Larry Marine
Inovação e alinhamento ao mercado
Com os fluxos ajustados e os problemas mais urgentes solucionados, tínhamos um aplicativo mais intuitivo, acessível e com uma baixa curva de aprendizado mas faltava algo inevitável: benchmarking e alinhamento ao mercado financeiro. Utilizando o método de Design Thinking e Desk Research, realizei uma busca visual e imagética do que é de mais atual no mercado de aplicativos financeiros e como esses aplicativos se comportam a nível de mercado brasileiro. Alguns sites utilizados para essa pesquisa foram: Mobbin, Dribbble, Behance, Ux Collective e NN Group.
​
Através dessa pesquisa, atualizei o nosso aplicativo para estar mais alinhado ao mercado e gerar uma melhor assimilação do usuário.
​
O trabalho e integração com o time de Marketing e a agência responsável também me possibilitou a implementação de mais melhorias como a inserção de ilustrações originais, seguindo um padrão de outros aplicativos como Nubank, Ifood que usam da ilustração como meio de gerar identificação com o usuário e tornar a interface mais amigável.
ED e a jornada financeira do usuário
Ed é o mascote da CredutPay e é ele quem dá o tom da comunicação da empresa nas redes sociais e site.
Através do alinhamento com o time de Marketing, pude tornar o uso do ED mais frequente nas telas do app
com o objetivo de gerar uma relação do usuário com esse personagem que pretende acompanhá-lo em uma
jornada financeira de aprendizado e de conquistas. Também inseri dentro do app um link direto com o blog do
ED que contém dicas para uma vida financeira mais equilibrada.
“Os detalhes não são um detalhe.
Eles fazem o design.”
Charles Eames
