Design manager (Caixa)
UX/UI Designer Sênior
UX/UI Designer Pleno (eu)
- Pesquisa Qualitativa
- Ideação
- Mapeamento de Fluxos
- Design de Interface
- Prototipagem
- Teste de Usabilidade
- Handoff para Devs
6 meses
Uma plataforma, dois gateways,
zero consistência
A integração de Mercado Pago e Recarga Pay era tecnicamente funcional mas visualmente fragmentada. O usuário sentia que saía do ambiente da Caixa ao realizar o pagamento — gerando desconfiança, abandono e reclamações.
Antes
Três opções de resgate limitadas, fluxos confusos, erros genéricos e sem clareza sobre o status da transação. A ausência de opções resultava em alta taxa de reclamação por parte dos usuários.
Desafio
Criar uma interface unificada que servisse como camada visual sobre dois gateways distintos — garantindo que o usuário sentisse que ainda estava no ambiente seguro da Caixa, independente da escolha de pagamento.
Principais Fricções Identificadas
-
Inconsistência Visual
Botões e inputs com estilos diferentes para cada método, quebrando a identidade da marca.
-
Feedback Confuso
O usuário ficava no escuro sem saber se o pagamento foi aprovado ou ainda estava processando.
-
Excesso de Passos
Múltiplos redirecionamentos de tela aumentavam o tempo de checkout e a chance de desistência.
-
Erros Genéricos
Falta de clareza no motivo da recusa, impedindo a recuperação da venda.
-
Perda de Dados
O formulário apagava as informações se o usuário precisasse voltar uma etapa para corrigir algo.
-
Quebra de Confiança
Mudança brusca de layout ao ir para o gateway fazia o usuário sentir que saiu do ambiente seguro.
Benchmark
Para desenhar a nova experiência, analisamos os líderes em e-commerce e fintechs — com foco em orquestração de múltiplas opções de pagamento e redução de fricção na jornada de conversão.
Amazon
Mercado Livre
PagSeguro
Mercado Pago
Mapeamento de Cenários
Para garantir uma integração robusta, mapeamos e prototipamos cada estado possível da interface — cobrindo os fluxos de compra e as particularidades dos fluxos de resgate para ambos os gateways.
Jornada de Compra e Cartões
-
Sem cartão cadastrado
-
Sem cartão cadastrado
-
1 cartão (débito não autorizado)
-
2 cartões (em processamento)
-
1 cartão cadastrado
-
Vários cartões (Scroll/Ações)
Jornada de Resgate
-
Com conta existente
-
Sem conta
-
Aviso de conta inexistente
-
Com conta existente
-
Erro: Conta inexistente
A Lógica por Trás das Telas
Um checkout robusto não é feito apenas de telas felizes. Meu papel principal foi mapear e desenhar a resposta do sistema para as falhas de comunicação entre a Caixa e os gateways.
Gestão de Latência
APIs bancárias oscilam. Desenhei estados intermediários de "Processando Pagamento" que educam o usuário sobre a espera, evitando o duplo clique e reduzindo a ansiedade durante o handshake de segurança.
Erros Granulares
Substituímos o genérico "Erro no Pagamento" por feedbacks específicos baseados no código de retorno da API — saldo insuficiente, bloqueio de segurança ou falha no gateway.
Conciliação de Status
O que acontece quando o dinheiro sai da conta do usuário mas a lotérica não recebe a confirmação? Projetei fluxos de re-tentativa e comprovantes provisórios para garantir a segurança jurídica da transação.
Tokenização e Segurança
Para o fluxo de cartões salvos, a interface foi desenhada considerando as regras de tokenização — mascarando dados sensíveis (PCI Compliance) sem dificultar o reconhecimento do cartão pelo usuário.
O que foi entregue
Jornada unificada
Uma interface cobrindo dois gateways, dezenas de cenários de erro e os fluxos completos de compra e resgate.
Confiança recuperada
O usuário permanece no ambiente visual da Caixa independente do gateway — sem mudanças bruscas de layout.
Handoff completo
Documentação detalhada de todos os estados, incluindo edge cases e fluxos de erro para o time de desenvolvimento.
Funcionalidade inédita
Primeira integração de gateways de pagamento na plataforma de Loterias da Caixa Econômica Federal.
Vamos trabalhar juntos?
Se você tem uma ideia, uma vaga ou só quer trocar uma figurinha, me manda uma mensagem.