alema.io
← Todos os clientes

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
Seis telas mobile da primeira compra: carrinho com oferta do cartão, revisão de dados, biometria, seleção do cartão, configuração e pagamento
Do carrinho ao pagamento, no protótipo navegável da versão 2.

Dores

Discovery

Jornada

  1. 01CarrinhoOferta do cartão com o preço cheio riscado.
  2. 02LoginEntrar ou criar conta, com token quando preciso.
  3. 03Revisão de dadosDados pessoais e endereço de entrega do cartão.
  4. 04BiometriaSelfie para validar a identidade.
  5. 05Seleção do cartãoPlatinum ou Gold, com os benefícios lado a lado.
  6. 06ConfiguraçãoBandeira, limite, vencimento e Tag grátis.
  7. 07PagamentoO cartão aprovado paga a compra com desconto.
  8. 08ConclusãoPedido, cartão e Tag com os próximos passos.

O que mudou

Resultados

40%Elegibilidade
36%Propostas geradas
75%Propostas aprovadas
52%Cartões gerados

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ó?

Tabela que mapeia a jornada atual de cada produto prioritário, da página do produto ao feedback de conclusão
Mapeamento as-is dos produtos prioritários, da página do produto à conclusão.

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.

Comparação dos dois cenários de aquisição do cartão
Dois cenários comparados, etapa por etapa: o cartão oferecido na primeira compra, dentro do checkout, ou pedido antes de comprar o produto.
Slide com as percepções e o insight dos testes de conceito

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.

Home do hub no desktop com o carrinho aberto em painel lateral
Carrinho no desktop, aberto como painel lateral sobre a home do hub.
Userflow completo da primeira compra, com decisões de login, aprovação e antifraude
Userflow da primeira compra, com os caminhos de login, aprovação e antifraude.

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.

Escrever para a alema.io
Próximo casePorto (via Môre)Nome social em todos os canais