Desenhando confiança para pagamentos de R$ 100 mil em uma única transação
kodano
/
nov. de 2026
Empresa
Kodano
Data
FEV DE 2026 / NOV DE 2026
Responsabilidades
Finalizar o MVP para o lançamento
Recriar o design system do zero
Redesenhar os fluxos de ponta a ponta
Projetar o checkout de alto valor
overview
A Kodano é um gateway de pagamentos focado em transações de alto valor: pagamentos de R$ 50 mil, R$ 100 mil ou mais em uma única transação.
Entrei no projeto em fevereiro de 2026, quando o sistema tinha sido construído inteiramente com IA. Ele funcionava, mas ainda faltavam telas para o lançamento e não havia um padrão visual por trás das que existiam.
Fui o único designer do produto, trabalhando direto com o CEO e o time de desenvolvimento.
O desafio tinha duas partes: colocar o MVP no ar sem atrasar o lançamento e, depois, construir um produto em que segurança fosse visível dos dois lados. De um lado, quem paga, que precisava confiar numa empresa nova o suficiente para transferir R$ 100 mil de uma vez. Do outro, os clientes da Kodano, que usavam a plataforma no dia a dia para criar e acompanhar cobranças de valores altos.
Contexto
Pagar um valor alto para uma empresa que ninguém conhece gera insegurança. A Kodano era nova, sem histórico nem reconhecimento no mercado, e cada detalhe da tela de pagamento podia aumentar ou diminuir a disposição do cliente de concluir a transação.
E a segurança não era só um problema do checkout. As empresas que usavam a Kodano para cobrar também estavam confiando dinheiro a uma plataforma nova. Para elas, um valor digitado errado, uma cobrança enviada para a pessoa errada ou um status pouco claro podiam virar prejuízo e perda de confiança no produto.
Ao mesmo tempo, o produto vinha de uma base gerada por IA: telas criadas sem um sistema de componentes, com padrões diferentes entre si e sem fluxos pensados de ponta a ponta. Para o time de front-end, isso significava implementar telas sem uma referência clara, o que deixava as entregas mais lentas.
Refazer tudo antes do lançamento atrasaria o MVP. Por isso dividi o trabalho em duas fases: primeiro terminar o que faltava usando o layout existente, depois redesenhar o produto com calma.
Problema
- Sistema gerado por IA, sem padrão visual
- Telas e estados que faltavam para o lançamento
- Marca nova, sem reconhecimento no mercado
- Clientes inseguros para pagar valores altos
- Empresas cobrando valores altos numa plataforma nova
- Fluxos sem visão de ponta a ponta
- Entregas lentas no front-end
Terminando o MVP sem atrasar o lançamento
Para não atrasar o lançamento, terminei todas as telas que faltavam usando o layout que já existia. Em vez de redesenhar, segui os padrões da base atual e completei o que impedia o produto de ir ao ar: checkout, dashboard e link de pagamento, além das telas de cadastro, confirmações, erros e estados vazios.
Assim o MVP foi lançado em abril de 2026, e a nova versão pôde ser feita depois.
Recriando o design system do zero
Com o MVP no ar, recriei sozinho o design system do zero no Figma, em atomic design e com modo claro e escuro: 10 grupos de tokens e 54 componentes, de botões e inputs a tabelas, gráficos e modais.
Antes, o front-end tinha dificuldade para implementar o design feito por IA. Com o design system e as telas no Figma, o time ganhou uma referência única e, com a ajuda de IA, passou a entregar mais rápido.
Uma plataforma segura para quem cobra
Refiz todos os fluxos da plataforma de ponta a ponta, do login e do onboarding até o dashboard, pensando em quem usa a Kodano todos os dias para cobrar.
Quando cada cobrança pode valer R$ 100 mil, errar sai caro. Por isso os fluxos de cobrança deixam claro o valor, o destinatário e o status de cada pagamento, pedem confirmação antes das ações críticas e explicam o que fazer quando algo dá errado.
Cada fluxo passou a cobrir também os cenários de erro, aprovação pendente e falha no pagamento, que antes ficavam sem tela.
Um checkout seguro para quem paga
O checkout era o ponto mais sensível do produto: é onde o cliente decide se confia ou não na Kodano para pagar um valor alto.
Projetei cada etapa para responder às dúvidas de quem está pagando: quem está cobrando, quanto exatamente, por qual método e o que acontece depois. O recebedor aparece identificado, o valor fica sempre visível, há uma revisão antes de confirmar, o comprovante sai na hora e os selos de segurança ficam à vista.
Esse checkout processou uma única transação de mais de R$ 100 mil.
Resultados
Mais de R$ 100 mil em uma única transação
O checkout processou um pagamento acima de R$ 100 mil de uma só vez, numa plataforma recém-lançada.
MVP no ar em 2 meses
As telas que faltavam foram finalizadas no layout existente, e o produto foi lançado dois meses depois da minha entrada.
54 componentes e 10 grupos de tokens, feitos do zero
Um design system em atomic design, com modo claro e escuro, que passou a ser a base de todas as telas da nova versão do produto.
Segurança dos dois lados do pagamento
Quem paga encontra um checkout que mostra quem cobra, quanto e o que vem depois. Quem cobra tem fluxos com confirmação nas ações críticas e status claros em cada pagamento.
Todos os fluxos cobertos de ponta a ponta
Do login e onboarding ao dashboard, cada fluxo passou a prever erros, aprovações pendentes e falhas de pagamento.
Entregas mais rápidas no front-end
Com o design system e as telas no Figma como referência, e com a ajuda de IA na implementação, o time de front-end passou a entregar mais rápido do que quando trabalhava sobre o design feito por IA.
aprendizados
Esse projeto mostrou que, em pagamentos de alto valor, confiança faz parte do produto. Quando a marca ainda é desconhecida, a interface precisa compensar com clareza: mostrar quem cobra, quanto e o que vai acontecer em cada etapa. E essa confiança precisa existir dos dois lados, para quem paga e para quem cobra.
Também aprendi a trabalhar sobre uma base gerada por IA: separar o que precisava ir ao ar logo do que merecia ser refeito, para lançar rápido sem carregar os problemas para a versão final.