Evolução de Carteira para Banco

Em 2022, a Pagstar iniciou o processo de se transformar em um banco digital, o que exigia conformidade com as regulamentações do Banco Central.

O objetivo foi criar um manual de experiência do usuário para submissão ao Banco Central, com uma interface confiável e alinhada às normas regulatórias, garantindo que o produto fosse atrativo e funcional para o público certo.

Meu Papel

UX/UI Designer

Sobre o Projeto

Em equipe

No projeto

4

Semanas de duração

50 +

Telas esboçadas

Cliente

Pagstar

Fintech

Cliente

Pagstar

Fintech

Ferramentas mais utilizadas

Figma

ChatGPT

Google Sheets

Google Docs

Ferramentas mais utilizadas

Figma

ChatGPT

Google Docs

Jira

Discord

Meu Papel

Product Designer

Product Owner

Sobre o Projeto

Solo

No projeto

20

Semanas de duração

80 +

Telas prototipadas

Cliente

Shop Tour

Plataforma de Publicidade

Ferramentas mais utilizadas

Figma

ChatGPT

Google Sheets

Google Docs

Minhas Responsabilidades no Projeto

Trabalhei com mais dois designers, assumindo responsabilidades como: entender as regulamentações, identificar as mudanças necessárias para adequar o app às exigências do Banco Central e colaborar na prototipagem de novas telas e fluxos. Também fui responsável pela diagramação do documento oficial a ser submetido ao Banco Central.

Redesign

Wireframes

Design de fluxos

Pesquisa

Documentação

Desafios

Transformar o app da Pagstar em um banco digital envolveu vários desafios, incluindo a adaptação às regulamentações do Banco Central. Entre os principais:

1

1

1

1

Limitações Técnicas

A necessidade de adaptar o design para facilitar a implementação, com o uso de componentes reutilizáveis e evitando complexidades que pudessem dificultar a execução pelos desenvolvedores.

2

2

2

2

Curto Prazo

O projeto foi desenvolvido em tempo limitado, sem a possibilidade de realizar testes externos com usuários e validar hipóteses antes da submissão.

3

3

3

3

Redesign Completo

Reformulamos a interface da carteira digital, reposicionando a marca de forma mais séria e confiável, além de melhorar a usabilidade e acessibilidade.

Impactos e Resultados

O design alinhou o desenvolvimento com as exigências do Banco Central, garantindo a aprovação do processo de transformação do app em banco. Simplificamos fluxos essenciais como a tela inicial e extratos, criamos uma área para serviços como o PIX além de criar a base para o reposicionamento da marca. As mudanças no design seguiram para o desenvolvimento, mas não foram finalizadas, pois a empresa foi adquirida por outra que já possuía o sistema pronto.

Fluxo Resumido

Processos

Referências Gráficas

Referências Gráficas

Pesquisa e Discovery

Para entender as mudanças necessárias, conduzi workshops para analisar a documentação do Banco Central e projetos aprovados. Também realizamos uma análise comparativa com apps bancários, a fim de identificar ajustes necessários. A comunicação e colaboração interna entre a equipe de design foi fundamental para elaboramos as soluções propostas com qualidade.

Interface e Identidade Visual

Analisamos os perfis de usuários desejáveis e os atuais, o que orientou as alterações na identidade visual. As mudanças incluíram a atualização das cores, o tom de voz da marca, ilustrações e imagens, com o objetivo de reposicionar a marca de forma mais séria, madura e confiável. Para isso, escurecemos os tons e simplificamos as ilustrações utilizadas nas comunicações internas do app.

Amostra Gráfica da Marca - Anterior

Amostra Gráfica da Marca - Proposto

Acessibilidade

Realizamos testes de acessibilidade nas cores utilizadas nos feedbacks do app e percebemos que elas apresentavam baixo contraste, o que poderia confundir usuários com daltonismo, por exemplo.
As cores precisavam de mais contraste entre si para facilitar a identificação rápida dos feedbacks de erro ou sucesso. Além disso, era necessário garantir uma melhor acessibilidade geral para que funcionassem bem com a fonte branca sobre o fundo colorido (padrão do app).

Comparação de Cores do Estudo de Acessibilidade

A paleta de cores foi ajustada para uma solução mais acessível, mantendo a estética agradável, usando a ferramenta davidmathlogic.com como referência.

Fluxo resumido

Prototipagem e Fluxos

Em conjunto, desenvolvi protótipos de alta fidelidade, focados na facilidade de implementação e reutilização de componentes. Também criei novos fluxos de usuário, que serviriam como guia para apresentações, refinamentos e para o entendimento geral das mudanças pelo time técnico e stakeholders.

Documentação

Após a apresentação e aprovação dos fluxos pela PO e CTO, colaborei com a equipe de design e o consultor responsável para consolidar um manual de experiência do usuário. O documento seguiu um padrão estipulado pelo BACEN e detalhou os fluxos principais, demonstrando como o sistema cumpria as normas regulatórias. O documento foi então submetido ao Banco Central e aprovado.

Amostra da Documentação

Aprendizados

Este projeto reforçou a importância do alinhamento constante entre as equipes e demonstrou que o design vai além da criação de interfaces. A colaboração e as iterações com o time de design foram essenciais para alcançarmos, juntos, a aprovação pelo Banco Central e garantirmos que as necessidades dos stakeholders e as bases de usabilidade fossem atendidas.

O que poderia ter sido diferente

A produção de uma documentação mais técninca e voltada para desenvolvedores frontend oderia ter reduzindo dúvidas técnicas durante o processo de implementação e agilizado o processo.

Próximos passos

Validar as novas funcionalidades com entrevistas com usuários e testes de usabilidade, refinando fluxos, confirmando hipóteses e identificando oportunidades de melhoria centradas na experiência do usuário.