top of page
credut logo no preto 3.png
Vector.png

SOBRE A CREDUTPAY

Group 657324146.png

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.

Group 657324147.png

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

image.png

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.

image.png

"Todas as inovações eficazes
são surpreendentemente simples."
Peter Drucker 

Group 657324146.png

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.

Captura de tela 2024-11-05 004732.png
Group 657324146.png

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

​

image.png

“Experiência do usuário abrange todos
os aspectos da interação do usuário."
Donald Norman

Group 657324146.png

Melhorias

Home - 2024-11-06T012737.490.png
Home - 2024-11-06T012748.701.png

            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"

​

image.png
Captura de tela 2024-06-10 152654.png
Captura de tela 2024-06-10 153129.png

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.

Home - 2024-11-06T014539.041.png

            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.

​

image.png
Captura de tela 2024-06-14 112310.png

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.

​

image.png
Captura de tela 2024-11-06 020226.png
image.png

“É muito melhor adaptar a tecnologia ao usuário do que forçar o usuário a se adaptar
a tecnologia.”
Larry Marine

Group 657324146.png

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. 

Home - 2024-11-06T022450.211.png
Home - 2024-11-06T022943.624.png
perfil (7).jpg
Home - 2024-11-06T022845.952.png
Home - 2024-11-06T022541.118.png
Group 657324146.png

ED e a jornada financeira do usuário

Group 657324148.png

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.

Home - 2024-11-06T024114.415.png
Home - 2024-11-06T023433.707.png
Home - 2024-11-06T023421.001.png
Home - 2024-11-06T023453.879.png
Home - 2024-11-06T024056.236.png
image.png

“Os detalhes não são um detalhe.
Eles fazem o design.”
Charles Eames

1284x2778 (19.5_9).png
1284x2778 (19.5_9) (1).png
1284x2778 (19.5_9) (2).png
1284x2778 (19.5_9) (3).png
1284x2778 (19.5_9) (4).png
1284x2778 (19.5_9) (5).png
bottom of page