Contexto
O projeto iniciou com um kick-off de alinhamento com os Product Owners (POs) da Caixa, pois esta integração de gateways de pagamento era uma funcionalidade totalmente inédita na plataforma. O objetivo de negócio era expandir as opções do usuário, mas o desafio de UX era complexo: como "costurar" as telas e regras de negócio do sistema legado da Caixa com os fluxos externos do Mercado Pago e Recarga Pay?
Passado
A experiência de resgate era limitada e pouco flexível. O usuário tinha apenas três opções para reaver o valor: presencialmente em uma Agência Lotérica, em uma agência da Caixa, ou via transferência bancária. Além de confuso esse fluxo, possuia regras não tão claras como apenas o titular do CPF poderia resgatar ou a leitura de QR Code
Solução
Meu papel foi absorver essa visão, mapear os novos fluxos (incluindo todos os cenários de erro e validação) e desenhar uma jornada de pagamento unificada, garantindo que a transição entre os diferentes sistemas fosse fluida e, para o usuário final, parecesse uma experiência única e contínua.
Resumo
Criar uma interface unificada que servisse como uma camada visual sobre os gateways. O objetivo era garantir que o usuário sentisse que ainda estava no ambiente seguro da loja, independentemente de escolher pagar com Mercado Pago ou Recarga Pay.
Problema
A plataforma de pagamentos estava limitada aos métodos tradicionais da Caixa, gerando uma alta taxa de reclamação por parte dos usuários. A ausência de opções e possibilidades resultava em confusão na hora de receber o prêmio dos jogadores..
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 se 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 (ex: saldo vs. erro de sistema), 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.
O que rolou no projeto.
- Análise de Similares e Benchmarks: Fizemos uma pesquisa para entender como os concorrentes e outras empresas estão lidando com desafios parecidos com o nosso;
- Definição dos OKRs: Alinhamos os objetivos e resultados-chave do projeto, para garantir que estamos no caminho certo;
- Mapeamento dos fluxos de usuário: Detalhamos todas as etapas que o usuário vai percorrer no sistema, tanto no desktop quanto no celular;
- Adaptação dos fluxos para desktop e mobile: Ajustamos os fluxos para garantir que funcionem perfeitamente em diferentes dispositivos;
- Criação do protótipo interativo:Desenvolvemos um modelo interativo para testar e validar as soluções de design antes da implementação;
- Revisão e Handoff com os devs: Fizemos os ajustes finais e passamos o projeto para a equipe de desenvolvimento, com todas as especificações necessárias;
- Análise das métricas do projeto: Avaliamos os resultados alcançados para entender o impacto das soluções de design;
- ção em cerimônias do Scrum: Atuamos ativamente em daily meetings, reviews e retrospectivas, colaborando com as outras equipes do projeto;
- Documentação dos entregáveis: Produzimos os documentos necessários, como protótipos, especificações de design e guias de estilo, para que a equipe de desenvolvimento tivesse todas as informações necessárias.
Benchmark
Para desenhar a nova experiência de pagamentos da Caixa, realizamos uma análise de benchmark comparando o fluxo legado com os líderes em e-commerce e fintechs: Amazon, Mercado Livre, PagSeguro e Mercado Pago. O objetivo foi identificar as melhores práticas em dois pontos-chave: Orquestração de Pagamentos: Como eles apresentam múltiplas opções (Pix, Saldo, Cartões) de forma clara e hierárquica. Redução de Fricção: Como eles constroem confiança e simplificam a jornada para maximizar a conversão e diminuir o abandono de carrinho.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 cadastrado (débito não autorizado)
-
2 cartões cadastrados (Em processamento)
-
1 cartão cadastrado
-
Vários cartões com scroll (Alterar/Cancelar)
-
Carrinho: Detalhamento de compras
-
Meus cartões salvos
💰 Jornada de Resgate
-
Com conta existente
-
Sem conta
-
Aviso de conta inexistente (Erro)
-
Com conta existente
-
Sem conta
-
Aviso de conta inexistente (Erro)
Jornada de Compra e Cartões
Com a estrutura e os fluxos validados na etapa anterior, chegou o momento de aplicar a camada visual final. A missão aqui era transformar uma integração técnica complexa em algo simples e invisível para o usuário. O grande desafio dos protótipos de alta fidelidade foi criar uma interface única que "vestisse" os dois gateways. O objetivo era garantir que, seja pagando com Mercado Pago ou Recarga Pay, a pessoa sentisse que estava sempre no mesmo ambiente seguro e familiar, sem sustos ou mudanças bruscas de design. Importante: Para organizar a apresentação do portfólio, dividi o resultado final nas duas principais jornadas do usuário: a Jornada de Compra (colocando dinheiro) e a Jornada de Resgate (retirando prêmios). As telas abaixo são um recorte representativo; o projeto completo envolveu o design detalhado de dezenas de variações, incluindo todos os estados de erro e fluxos alternativos para ambos os parceiros.
Jornada de Resgate
Para a retirada de prêmios e valores, a prioridade visual mudou para a transparência. Diferente da compra, onde a familiaridade com o gateway era vital, aqui o usuário precisa ter clareza absoluta sobre o status da sua solicitação. Desenhei fluxos que mantêm o usuário informado em tempo real, utilizando a mesma linguagem visual unificada para evitar a sensação de ruptura. O resultado é um processo de resgate sem atritos, onde a interface guia o usuário com segurança, desde a seleção do valor até a confirmação final da transferência.
Mobile
Adaptar a jornada de pagamento para o contexto mobile exigiu um foco absoluto na redução de fricção. Sabemos que digitar dados em telas pequenas é uma barreira de conversão, por isso, desenhei uma interface com campos otimizados, inputs numéricos automáticos e feedbacks visuais claros a cada etapa. O objetivo foi criar um fluxo linear onde o usuário nunca se sente perdido. Seja via cartão de crédito ou carteira digital, a interface guia o usuário com botões grandes e acessíveis (na zona de alcance do polegar), garantindo que a transação seja concluída com segurança e o mínimo de esforço cognitivo.
Fale Comigo!
Se você tem uma ideia, uma vaga ou só quer trocar uma figurinha, me manda uma mensagem.