Visão geral / Meli+
Meli+: mais assinantes, menos perdas por falha no pagamento.
Uma proposta de redesign para o Meli+, a assinatura que reúne benefícios do Mercado Livre e do Mercado Pago. Redesenhei a landing onde novos assinantes escolhem um plano e desenhei, em duas iterações, a jornada para cadastrar um cartão alternativo, de modo que uma falha na cobrança não cancele a assinatura.
Em resumo Bruno Delorence redesenhou duas partes do Meli+, a assinatura de benefícios do Mercado Livre e do Mercado Pago, no app: a landing onde novos assinantes escolhem entre o Meli+ Essencial (R$ 9,90 por mês) e o Meli+ Total (R$ 17,90), e um meio de pagamento alternativo, que mantém a assinatura ativa quando o cartão principal falha. O case mostra o brief, as telas originais e o redesign, a jornada do cartão alternativo em duas iterações e o cadastro de um cartão novo, escaneando o cartão ou digitando os dados.
Essencial e Total, um slide para cada
R$ 9,90 e R$ 17,90 por mêsUm e-mail, uma notificação e a página da assinatura
Para adicionar um cartão alternativoTrês jornadas, a primeira em duas iterações
No board de jornadas do FigmaContagem feita no arquivo do Figma.
00 / O brief
Dois objetivos: mais assinantes, menos cancelamentos.
O Meli+ é uma assinatura mensal com dois planos: benefícios de frete, parcelamento e cashback em todas as compras e, no segundo, também streaming. O brief pedia uma landing que ajudasse as pessoas a escolher um plano. Pedia também uma forma de adicionar um meio de pagamento alternativo, para que uma falha na cobrança não cancelasse a assinatura.
Contexto da iniciativa
O Meli+ é o novo programa de benefícios do Mercado Livre e do Mercado Pago: uma assinatura mensal com dois planos.
- O primeiro oferece, em todas as compras, benefícios no frete, parcelas extras sem juros e cashback em criptomoedas.
- O segundo mantém esses benefícios e inclui acesso a plataformas de streaming conhecidas, com grandes descontos promocionais.
Objetivos do negócio
- Aumentar a adesão de novos assinantes do Meli+.
- Reduzir os cancelamentos involuntários por pendências no pagamento: erro ou falta de cobrança.
Objetivos da experiência
- Landing: que os usuários escolham o plano de benefícios mais conveniente para eles.
- Gestão da assinatura: que os assinantes incluam um meio de pagamento alternativo.
O ponto de partida
Uma proposta a iterar.
O brief trouxe a landing atual e um fluxo de umas dez telas para o cartão alternativo: um e-mail, uma notificação, um coachmark, a lista de meios de pagamento. O redesign parte delas.
Dentro do app
O mesmo app, outro fluxo.
As telas mantêm o cabeçalho amarelo do Mercado Livre e as ações em azul do Mercado Pago. O que muda é a ordem, o layout e os textos.
01 / Novos assinantes
Um plano de cada vez.
A landing original era uma página longa: um hero e, em seguida, os dois planos e tudo o que eles incluem, um depois do outro. O redesign divide essa página em três slides: o que é o Meli+ e, depois, um plano por slide, com o preço, os benefícios e um único botão.
Em poucas palavras
- O que é o Meli+, num slide só dele, com um único botão: ver os planos.
- Um plano por slide: o preço, o que ele inclui e “Escolher esse plano”.
- O streaming e os descontos do Total, com os logos de cada serviço.
Objetivo Aumentar a adesão de novos assinantes do Meli+
[1.0]Apresentação [1.0]
Frete grátis, parcelas extras sem juros, cashback e benefícios
Economize em compras e pagamentos, e faça seu dinheiro render.
Veja os planos disponíveis
Meli+ Essencial [1.0]
Meli+ Essencial
Economize em compras e pagamentos, e faça seu dinheiro render.
R$9,90 por mês
Escolher esse plano
Frete grátis a partir
de R$ 29*
Até 3 parcelas extras
sem juros
Cashback em compras
e pagamentos
Seu dinheiro rende mais no
Mercado PagoMeli+ Total [1.0]
Meli+ Total
Economize em compras e pagamentos, e faça seu dinheiro render.
R$17,90 por mês
Todos os benefícios do Meli+ Essencial
Frete grátis, parcelas extras, cashback em compras e pagamentos e melhor rendimento do seu dinheiro no Mercado Pago.
Agora com muito mais entretenimento
Curta os melhores filmes, séries e música.
Meli+ TotalDisney+ Padrão com anúncios
Ao ser Meli+, é possível escolher o plano do Disney+ mais conveniente para você.
Meli+ TotalDeezer Premium
Música sem anúncios por 12 meses
Descontos em outras plataformas
de conteúdoEscolher esse plano
HBO MAX
30% OFF
Paramount+
30% OFF
VIX Premium
30% OFF
Frete grátis, parcelas extras sem juros, cashback e benefícios
Economize em compras e pagamentos, e faça seu dinheiro render.
Veja os planos disponíveisMeli+ Total
Economize em compras e pagamentos, e faça seu dinheiro render.
R$17,90 por mês
Todos os benefícios do Meli+ Essencial
Frete grátis, parcelas extras, cashback em compras e pagamentos e melhor rendimento do seu dinheiro no Mercado Pago.
Agora com muito mais entretenimento
Curta os melhores filmes, séries e música.
Meli+ TotalDisney+ Padrão com anúncios
Ao ser Meli+, é possível escolher o plano do Disney+ mais conveniente para você.
Meli+ TotalDeezer Premium
Música sem anúncios por 12 meses
Descontos em outras plataformas
de conteúdo
HBO MAX
30% OFF
Paramount+
30% OFF
VIX Premium
30% OFF
02 / O cartão alternativo
Uma falha no pagamento não deveria cancelar a assinatura.
Quando o cartão principal falha, o Meli+ pode cobrar num cartão alternativo. A jornada convida o assinante a cadastrá-lo a partir de três lugares — um e-mail, uma notificação e a página da assinatura — e permite alterar ou excluir esse cartão depois.
Em poucas palavras
- Três caminhos: um e-mail, uma notificação, a página da assinatura.
- Como alternativa: um cartão novo, um cartão salvo ou o saldo do Mercado Pago.
- Dá para alterar ou excluir a qualquer momento; a exclusão pede confirmação.
Como garantir que uma falha no pagamento nunca cancele uma assinatura?
Objetivo Reduzir os cancelamentos involuntários por falha no pagamento
Passo 1 de 10 · 1.0
Um e-mail avisa que a assinatura do Meli+ pode ser interrompida se um pagamento falhar.
03 / Duas iterações
De camadas a páginas.
A primeira iteração sobrepunha o fluxo à página da assinatura: um modal e, depois, bottom sheets. A segunda deixou o fluxo mais plano: um spotlight e um tooltip no lugar do modal, páginas inteiras no lugar dos sheets e seções brancas simples no lugar de cards flutuantes.
DetalheAssinatura mensalVocê está em dia com sua assinatura
AtivaPróxima fatura: 25 de maio de 2025R$ 19,90/mês
Visa terminado em ***1234Alterar
Adicionar um meio de pagamento alternativo
Você pode alterar ou excluir seu meio de pagamento, sempre que quiser.
AdicionarDisney+Acesse o Disney+ com a mesma conta e curta os melhores filmes,
Código de serviço: Disney+ 314159265358
Alterar meio de pagamento
Alterar meio de pagamento
Você pode alterar ou excluir seu meio de pagamento
Master terminado em ***0988Banco Nubank
Alterar cartão de créditoEscolha outro cartão de crédito
Excluir cartão de créditoEssa ação não pode ser desfeita
DetalheAssinatura mensalAtiva
Você está em dia com sua assinatura
Próxima fatura: 25 de maio de 2025R$ 19,90/mês
Visa terminado em ***1234Banco BBVA
AlterarAdicionar um cartãode crédito alternativo
AdicionarAssista agora sua Disney+
Disney+Acesse o Disney+ com a mesma conta e curta os melhores filmes,
Código de serviço: Disney+ 314159265358
DetalheAssinatura mensalAtiva
Você está em dia com sua assinatura
Próxima fatura: 25 de maio de 2025R$ 19,90/mês
Visa terminado em ***1234Banco BBVA
AlterarMaster terminado em ***0988Usar como cartão principal
Assista agora sua Disney+
Disney+Acesse o Disney+ com a mesma conta e curta os melhores filmes,
Código de serviço: Disney+ 314159265358
Alterar meio de pagamento
Você pode alterar ou excluir seu meio de pagamento
Master terminado em ***0988Banco Nubank
Alterar cartão de créditoEscolha outro cartão de crédito
Excluir cartão de créditoEssa ação não pode ser desfeita
DetalheAssinatura mensalVocê está em dia com sua assinatura
AtivaPróxima fatura: 25 de maio de 2025R$ 19,90/mês
Visa terminado em ***1234AlterarMaster terminado em ***0988Disney+Acesse o Disney+ com a mesma conta e curta os melhores filmes,
Código de serviço: Disney+ 314159265358
O que mudou na 2.0
Uma página para cada tarefa.
Adicionar e alterar um cartão abrem, cada um, uma página própria, no lugar de um bottom sheet sobre a página da assinatura.
O que ficou
A mesma proteção.
Nas duas iterações, excluir o cartão alternativo pede confirmação e avisa que a ação não pode ser desfeita.
04 / Um cartão novo
Escaneie o cartão ou digite os dados.
O cadastro de um cartão novo começa no bottom sheet de meios de pagamento. A câmera enquadra o cartão, e o quadro fica verde quando ele se encaixa; os dados também podem ser digitados à mão.
Como adicionar um novo cartão de crédito
[3.0]DetalheAssinatura mensalAtiva
Você está em dia com sua assinatura
Próxima fatura: 25 de maio de 2025R$ 19,90/mês
Visa terminado em ***1234Banco BBVA
AlterarAdicionar um cartãode crédito alternativo
AdicionarAssista agora sua Disney+
Disney+Acesse o Disney+ com a mesma conta e curta os melhores filmes,
Código de serviço: Disney+ 314159265358
Adicionar um meio de pagamento
Você pode alterar ou excluir seu meio de pagamento
Novo cartãoDébito ou Crédito
AdicionarAdicionar novo meio de pagamento
Visa terminado em ***1234Banco BBVA
AdicionarMaster terminado em ***0988Usar como cartão principal
AdicionarSaldo em conta
Usar- 01Novo cartão
No bottom sheet de meios de pagamento, “Novo cartão” abre a câmera.
- 02Escanear
A câmera enquadra o cartão, e o quadro fica verde quando ele se encaixa.
- 03Digitar
Ou os dados são digitados à mão: nome, número, validade e CVV.
- 04Adicionado
O cartão entra na conta do Mercado Pago, pronto para o Meli+.
05 / A jornada completa
Todas as telas, em ordem.
O board do Figma organiza as jornadas em linhas: um objetivo para cada linha, um chip para cada passo e um conector ciano de cada toque até a tela que ele abre.
Reduzir os cancelamentos involuntários por falha no pagamento [1.0]
E-mail [1.0]
Email aberto [1.0]
Central [1.0]
Modal [1.0]
Detalhe [1.0]
Modal [1.0]
Cartão adicionado [1.0]
Alterar cartão [1.0]
Deletar [1.0]
Sucesso [1.0]
Reduzir os cancelamentos involuntários por falha no pagamento [2.0]
E-mail [2.0]
Email aberto [2.0]
Central [2.0]
Modal [2.0]
Detalhe [2.0]
Full page [2.0]
Cartão adicionado [2.0]
Alterar cartão [2.0]
Deletar [2.0]
Sucesso [2.0]
Como adicionar um novo cartão de crédito [3.0]
Sheet [3.0]
Scan [3.0]
Scan OK [3.0]
Formulário [3.0]
Sucesso [3.0]
O que eu mediria a seguir
Menos perdas por falha no cartão.
Mais gente escolhendo um plano.
A proposta vai até o design. O próximo passo é medir o resultado: o percentual de assinantes com cartão alternativo, os cancelamentos involuntários antes e depois e quantas pessoas que abrem a landing escolhem um plano.
Próximo projeto · TWO ↗︎
Comece uma conversa
Vamos falar sobre o seu produto, o seu time e onde o design pode gerar mais valor.
- Duração
- 20–30 minutos
- Tema
- Design engineering
- Valor
- Gratuito