Problema
Checkout fragmentado, sem identidade visual consistente com a marca, taxas confusas e erros genéricos barravam a conversão. Usuários B2C repetiam dados a cada consulta; B2B não tinham ferramenta para controlar débitos em lote, como débitos de frota.
Solução
Liderança completa da reconstrução do Checkout e a criação da Área Logada B2B/B2C, end-to-end, com uso de IA (Figma MCP + Cursor) para handoff design-to-code em React/Tailwind.
Impacto
Conformidade com a LGPD 100% implementada. Stakeholders validaram a nova interface como materialização exata da visão de negócio, além de aumento de 27% das taxas de conversão. Ponte entre Design e Engenharia eliminada via IA, resultando em código mais fiel ao protótipo e componentes integrados ao Design System.
O Parcela Tudo é o produto flagship da Botpag, focado na regularização imediata de débitos veiculares (IPVA, multas e licenciamento) com parcelamento em até 12x e liquidação instantânea. Minha missão foi liderar a expansão do ecossistema através da criação de uma Área Logada (B2B/B2C) e da reconstrução total do Checkout, transformando uma jornada fragmentada em uma experiência que transmitisse segurança bancária e retenção de clientes.
O produto era funcional, mas tinha baixa retenção. No B2C os dados do usuário não eram persistidos, gerando fricção ao preenchê-los em cada consulta. No B2B, faltava uma ferramenta para centralizar o controle dos débitos de veículos em lote, uma ferramenta que facilitasse o pagamento, mas também monitorasse a existência de novos débitos. Já o Checkout sofria com identidade visual defasada — o produto não acompanhou o reposicionamento de marca da Empresa, o que levava os clientes a não compreenderem que se tratava da mesma Empresa —, além da falta de clareza sobre taxas e erros genéricos que barravam a conversão.
Via mapas de calor (Hotjar), análise de comportamento e entrevistas com usuários, identifiquei que os principais pontos de fricção eram a inconsistência visual entre landing page e checkout, gerando desconfiança no momento crítico de conversão, políticas LGPD inacessíveis, feedback de erro genérico que bloqueava o usuário sem orientação, e ausência de histórico de transações no B2C. Fui responsável por toda a jornada: discovery, arquitetura, design system, prototipagem de alta fidelidade e implementação front-end em React/Tailwind.
Pontos críticos identificados
- Inconsistência visual entre landing e checkout
- Políticas LGPD inacessíveis
- Feedback de erro genérico
- Ausência de histórico de transações
Antes de desenhar uma tela, conduzi uma fase de Discovery rigorosa: benchmarking de fintech e gestão de frotas, mapeamento completo da arquitetura de telas, e jornada do usuário identificando momentos que poderiam gerar ansiedade. Implementei componentes do zero no Design System, usando IA (Figma MCP + Cursor). Criei wireframes e transformei os protótipos de alta fidelidade em entregáveis diretamente no código.
Descoberta
Benchmarking de mercado, análise de heatmaps e fluxogramas de decisão para garantir que a solução fosse estratégica, não apenas visual.
Arquitetura & Design System
Análise dos átomos da marca Botpag e criação de componentes novos no Figma, alimentando a biblioteca tanto no design quanto no código.
Handoff Invertido com IA
Uso de MCP vinculado ao Cursor para implementar wireframes diretamente em React, refinando responsividade e interações em tempo real.
Validação & Rollout
Teste com stakeholders, implementação de feedback de erro humanizado e conformidade LGPD, com métricas sendo coletadas em rollout progressivo.
Em fase de rollout progressivo, o impacto foi imediato em múltiplas frentes: a jornada fragmentada tornou-se mais coesa, stakeholders validaram a interface como materialização exata da visão de negócio, e a junção de Figma MCP + Cursor eliminou o gap entre design e engenharia, acelerando a implementação e garantindo fidelidade total ao protótipo. Como resultados tivemos o aumento de 27% das conversões no Checkout e o monitoramento da plataforma mostrou que os usuários avançam no processo de checkout, deixando de abandoná-lo na primeira interação.
Utilizar a IA como ferramenta no handoff foi uma excelente sacada para entregar alta fidelidade do protótipo e qualidade.
Humanizar erros é estratégia de negócio: Mensagens orientadoras, não bloqueadoras, ajudam a transformar fricção em percepção de segurança, sem deixar o usuário no escuro. Isso com certeza impactou diretamente na conversão.
Design System é importante e um grande ativo de negócio: componentes reutilizáveis garantem consistência em B2C e B2B, reduzindo tempo de desenvolvimento de novas features.
