Transações rápidas, seguras e sem fricção

Fast Money — Interface para MVP bancário

Design de interface focado em clareza, consistência visual e redução de erros em transferências Pix.

Do acesso à confirmação: como o Fast Money orienta o usuário

Visão Geral do Projeto

O produto

Site responsivo focado no fluxo de transferência de saldo via Pix

Duração

out 2023 – nov 2023

Objetivo

Facilitar transferências via Pix com mais clareza, segurança e redução de erros.

Meu papel

UX Designer

O Fast Money é um conceito de banco digital desenvolvido para explorar a experiência de transferência de dinheiro via Pix em um ambiente web responsivo.
O projeto tem como foco criar um fluxo de envio de dinheiro simples, intuitivo e seguro, reduzindo fricções em uma das tarefas mais frequentes em aplicativos financeiros.

A solução foi pensada para atender usuários com diferentes níveis de familiaridade digital — desde pessoas que realizam transferências ocasionais até aquelas que utilizam o Pix com frequência no dia a dia.

Contexto

O problema

Durante entrevistas com 7 usuários que realizam transferências bancárias com frequência, identifiquei preocupações recorrentes relacionadas à segurança e à possibilidade de erros nas transações via Pix.

Os principais pontos levantados foram:

dificuldade em corrigir ou estornar transferências realizadas por engano
receio em relação à segurança das transações
risco de alterações indevidas em boletos
envio de valores para destinatários incorretos por falta de confirmação clara dos dados

Essas situações geram insegurança, frustração e, em alguns casos, prejuízos financeiros para os usuários.

O objetivo

Projetar um site responsivo que tornasse o processo de transferência via Pix mais claro e seguro para os usuários.

Para isso, o projeto buscou:

aumentar a transparência das informações da transação
incluir etapas claras de confirmação e validação de dados
utilizar uma comunicação visual acessível e confiável

A proposta simula funcionalidades que serviços financeiros digitais podem adotar para reduzir erros em transferências e aumentar a confiança do usuário durante a operação.

Minhas responsabilidades

Pesquisa com usuários
Condução de entrevistas
Criação de wireframes em papel e digitais
Prototipagem de baixa e alta fidelidade
Planejamento e realização de estudos de usabilidade
Considerações de acessibilidade
Iterações de design com base em testes
Design responsivo (desktop, tablet e mobile)

Entendendo o usuário

Conduzi entrevistas com usuários que realizam transferências bancárias com frequência. A partir dessas entrevistas, criei mapas de empatia para entender comportamentos, necessidades e frustrações ao usar o Pix.

Principais insights

Usuários lidam diariamente com muitos dados numéricos, o que aumenta a chance de erros durante a digitação. Além disso, relataram frustração pela falta de estorno imediato e insegurança ao confirmar informações da transação.

Pontos problemáticos

Erro do usuário: transferências feitas para contas ou pessoas erradas
Segurança: medo de coerção ou fraude durante a transação
Clareza: dificuldade em visualizar e confirmar os dados inseridos

Persona

Thainá é uma funcionária que realiza diversas transferências para a empresa onde trabalha.
Ela precisa de um site que apresente claramente os dados do destinatário, para evitar erros que possam gerar prejuízos financeiros.

Mapa da jornada do usuário

Criei um mapa da jornada da experiência de Thainá para identificar pontos de fricção e oportunidades de melhoria ao longo do fluxo de transferência via Pix.

Iniciando o design

Wireframes de papel

Desenvolvi wireframes de papel para explorar rapidamente diferentes soluções de layout e fluxo, priorizando clareza, confirmação de dados e navegação intuitiva.

As variações da tela inicial focaram em otimizar a experiência do usuário ao longo do fluxo de transferência.

Wireframes digitais

A transição dos wireframes em papel para os digitais permitiu validar a hierarquia de informações e melhorar a visibilidade dos dados mais importantes em cada etapa da transação.

Priorizei a facilidade de leitura com uma cor de fonte de fácil visualização e uma etapa extra de validação antes de ﬁnalizar a transação inserindo o botão para confirmar operação.

Protótipo de baixa fidelidade

Criei um protótipo de baixa fidelidade para testar o fluxo de transferência via Pix e identificar pontos de melhoria antes de avançar para o design visual.

Testes de usabilidade

Tipo de estudo
Estudo de usabilidade moderado

Participantes
3 participantes

Localização
Brasil (remoto)

Duração
40–50 minutos

Objetivo do teste

Avaliar se o fluxo de transferência via Pix era claro, seguro e fácil de usar, além de identificar possíveis pontos de confusão antes da finalização da transação.

Principais descobertas

Tela de comprovante: usuários sentiram falta de ações rápidas, como salvar ou compartilhar o comprovante
Acessibilidade: contraste das fontes não atendia plenamente às diretrizes de acessibilidade
Ícones: títulos de alguns ícones na tela inicial do Pix causaram confusão durante o uso

Impacto dos testes

Os testes revelaram oportunidades de melhoria na clareza visual, na compreensão das ações e na confiança do usuário ao concluir uma transação financeira.

Iterações de design

Com base nos insights do estudo de usabilidade, realizei ajustes para melhorar a legibilidade, a clareza das informações e a segurança percebida durante as transações.

Principais melhorias:

Aumento e ajuste do tamanho das fontes para facilitar a leitura dos dados
Melhoria no contraste de cores, atendendo critérios de acessibilidade
Reorganização de elementos para reduzir erros antes da confirmação da transação

Decisões de design

Durante as iterações finais, ajustei o fundo do card de saldo para um tom de azul claro derivado da paleta original, garantindo melhor contraste, acessibilidade e diferenciação visual em relação à versão inicial da interface.

Os botões de ação foram refinados para criar hierarquia clara entre ações primárias e secundárias, utilizando cores da própria paleta para garantir consistência visual, acessibilidade e foco nas ações mais frequentes.

Antes do estudo de usabilidade

Depois do estudo de usabilidade

Ajustes na tela de login

A versão anterior da tela de login apresentava excesso de estímulos concorrentes no primeiro contato do usuário com o produto.

Isso aumentava a carga cognitiva e dificultava a compreensão rápida do fluxo principal de acesso.

Ajustei os espaçamentos verticais para criar uma hierarquia visual clara entre navegação, preenchimento de dados e ações principais, reduzindo a carga cognitiva e facilitando a leitura sequencial da tela

As alterações tornaram a tela de login mais objetiva, confiável e orientada à ação, priorizando clareza, hierarquia visual e alinhamento com o público-alvo, além de preparar o usuário para os próximos passos do fluxo de forma mais intuitiva.

Antes do estudo de usabilidade: Botões posicionados muito próximos ao texto explicativo competem pela atenção e quebram o fluxo de leitura.

Depois do estudo de usabilidade: A imagem humana ajuda a criar conexão emocional, reforçando a proposta de valor do Fast Money como uma solução voltada para negócios.

Telas de transferência

As melhorias tornaram o fluxo mais previsível, reduziram erros de navegação e aumentaram a clareza das ações, aproximando a experiência de padrões de produtos financeiros consolidados.

ver protótipo no figma