Porto (via Môre)
Primeira compra: o cartão de crédito dentro do carrinho
Um hub com mais de 80 produtos e serviços da Porto ganhou carrinho e checkout. Na primeira compra, quem é elegível pede o Cartão Porto Bank sem sair do carrinho e já paga a compra com desconto, na primeira fatura.
- Papel
- Product Designer sênior, squad Plataforma/Checkout
- Período
- 2022–2024
- Setor
- Seguros e serviços financeiros

Dores
- Cada vertical tinha a própria jornada de compra, sem um carrinho comum.
- Pedir um cartão de crédito exige login, análise e biometria, etapas que podem derrubar uma compra simples.
Discovery
- 01Mapeamento as-isDa página do produto ao feedback de conclusão, nos produtos prioritários.
- 02Teste de conceitoRoteiro sobre login obrigatório, biometria, clareza da oferta e cartão provisório.
- 03Teste não moderadoProtótipo da primeira compra testado no Maze.
- 04Entrevistas em profundidadeExpectativas sobre o fluxo de compra e motivos para pedir o cartão.
- 05Testes A/BRecomendação de produtos dentro e fora do carrinho.
Jornada
- 01CarrinhoOferta do cartão com o preço cheio riscado.
- 02LoginEntrar ou criar conta, com token quando preciso.
- 03Revisão de dadosDados pessoais e endereço de entrega do cartão.
- 04BiometriaSelfie para validar a identidade.
- 05Seleção do cartãoPlatinum ou Gold, com os benefícios lado a lado.
- 06ConfiguraçãoBandeira, limite, vencimento e Tag grátis.
- 07PagamentoO cartão aprovado paga a compra com desconto.
- 08ConclusãoPedido, cartão e Tag com os próximos passos.
O que mudou
- O cartão aprovado paga a própria compra, já na primeira fatura.
- Um carrinho só para seguros e serviços.
- Aumento de cliques e de conversão no checkout.
Resultados
Funil de aprovação por etapa, conforme apresentado no case.
O problema
O site legado da Porto virou um hub de vendas que reúne mais de 80 produtos e serviços. Cada vertical tinha sua própria jornada de compra.
A pergunta: dá para vender seguro, serviço e produto financeiro no mesmo carrinho, com um checkout só?

Discovery e testes
Mapeei a jornada atual dos produtos prioritários, como Seguro Auto Digital, Porto Vida e Seguro Viagem, e estudei o fluxo de aquisição de cada um.
Depois vieram testes de usabilidade com compras simuladas, incluindo o cartão Porto Bank no carrinho, entrevistas em profundidade e testes A/B de recomendação de produtos.
Dois achados mudaram a solução: as pessoas não estranham colocar um seguro no carrinho, mas esperam que um empréstimo siga um fluxo linear, fora dele. E o cross-sell de seguro com cartão só faz sentido se o cartão for a forma de pagamento.
No teste de conceito da primeira compra, o roteiro investigava cinco pontos: se o login obrigatório gera atrito, se a biometria depois do login causa estranhamento, se a oferta é clara o bastante para contratar, se dá tranquilidade pagar com um cartão que ainda está sendo gerado e se o cartão listado entre os produtos confunde.


A solução
No carrinho entram só produtos que se pagam no carrinho. Produtos financeiros seguem num fluxo linear separado.
Para quem é elegível, o carrinho oferece o Cartão Porto Bank com desconto na compra, mostrando o preço cheio riscado ao lado do preço com desconto.
A solicitação tem quatro passos com progresso visível: revisão de dados, biometria, seleção e configuração do cartão, com bandeira, limite, vencimento e a Tag Porto Bank grátis. Aprovado, o cartão vira a forma de pagamento e a compra entra já na primeira fatura.
Os desvios também foram desenhados: login com token, dados incompletos, reprovação na análise ou na biometria e a remoção do cartão do carrinho, que avisa que o desconto será perdido.


Evolução
Na versão 2, de fevereiro de 2024, a oferta passou a mostrar o valor sem desconto riscado, e a seleção do cartão passou a reaproveitar a jornada de cartões de crédito, o que deixou as duas jornadas consistentes.
Quer algo parecido?
Conte o problema. A alema.io responde com um caminho, não com um orçamento genérico.