Bruno Delorence
ENPTContact

Language

ENPT
Contact
← Selected workMercado Livre / Meli+Mobile · Redesign proposal

Overview / Meli+

Meli+: more subscribers, fewer lost to a failed payment.

A redesign proposal for Meli+, the subscription that bundles Mercado Livre and Mercado Pago benefits. I redesigned the landing where new subscribers choose a plan, and drew the journey that adds a backup card, so that a failed charge does not cancel the subscription, in two iterations.

At a glance Bruno Delorence redesigned two parts of Meli+, the benefits subscription of Mercado Livre and Mercado Pago, in its mobile app: the landing where new subscribers choose between Meli+ Essencial (R$9,90 a month) and Meli+ Total (R$17,90), and a backup payment method that keeps a subscription active when the main card fails. The case shows the brief, the original screens and the redesign, the backup-card journey in two iterations, and adding a new card by scanning it or typing it in.

Explore the chapters
2 plans

Essencial and Total, one slide each

R$9,90 and R$17,90 a month
3 ways in

An email, a notification and the subscription page

To add a backup card
25 screens

Three journeys, the first in two iterations

On the Figma journey board

Counted in the Figma file.

Meli+ screens on a board: the Meli+ Total plan on yellow, the invitation to add a backup card, the subscription page, and a woman looking at her yellow phone

00 / The brief

Two goals: more subscribers, fewer lapses.

Meli+ is a monthly subscription with two plans: shipping, instalment and cashback benefits on every purchase, and, in the second, streaming as well. The brief asked for a landing that helps people choose a plan, and for a way to add a backup payment method, so that a failed charge does not cancel the subscription.

The initiative

Meli+ is the new benefits programme of Mercado Livre and Mercado Pago: a monthly subscription with two plans.

  • The first gives, on every purchase, shipping benefits, extra interest-free instalments and cashback in crypto.
  • The second keeps those benefits and adds well-known streaming platforms, with large promotional discounts.

Business goals

  • Bring in new Meli+ subscribers.
  • Reduce involuntary cancellations caused by payment problems: a failed or missing charge.

Experience goals

  • Landing: subscribers choose the benefits plan that suits them best.
  • Subscription management: subscribers add a backup payment method.
From the brief, translated from Portuguese.

The starting point

A proposal to iterate on.

The brief came with the current landing and a flow of about ten screens for the backup card: an email, a notification, a coachmark, the list of payment methods. The redesign starts from them.

Inside the app

The same app, a different flow.

The screens keep Mercado Livre’s yellow header and Mercado Pago’s blue actions. What changes is the order, the layout and the words.

01 / New subscribers

One plan at a time.

The original landing was one long page: a hero, then both plans and everything they include, one after the other. The redesign splits it into three slides: what Meli+ is, then one plan per slide, with its price, its benefits and one button.

In short

  • What Meli+ is, on a slide of its own, with one button: see the plans.
  • One plan per slide: the price, what it includes, and “Escolher esse plano”.
  • Total’s streaming and discounts, listed with their logos.

Goal More new Meli+ subscribers

[1.0]

  1. Apresentação [1.0]

  2. Meli+ Essencial [1.0]

  3. Meli+ Total [1.0]

Three slides: what Meli+ is, then one plan each, with its price and one button.
After · redesign
Before · the brief
The landing · One long page, both plans one after the other, became three slides: what Meli+ is, then one plan per slide, each with its price, what it includes and one button.

02 / The backup card

A failed payment shouldn’t end a subscription.

When the main card fails, Meli+ can charge a backup one. The journey invites subscribers to add it from three places, an email, a notification and the subscription page, and lets them change or delete it later.

In short

  • Three ways in: an email, a notification, the subscription page.
  • A backup card from a new card, a saved one, or the Mercado Pago balance.
  • Change or delete it any time; deleting asks first.

How might a failed payment never cancel a subscription?

Goal Fewer involuntary cancellations from failed payments

Step 1 of 10 · 1.0

E-mail

An email warns that the Meli+ subscription could stop if a payment fails.

Tap the phone to go on, or pick a step. The tap marks where the user taps.

03 / Two iterations

From layers to pages.

The first iteration layered the flow over the subscription page: a modal, then bottom sheets. The second flattened it: a spotlight and a tooltip instead of the modal, full pages instead of sheets, plain white sections instead of floating cards.

2.0
1.0
From 1.0 to 2.0 · The second iteration flattened the page: white full-width sections instead of floating cards, payment methods as grey pills, and changing a card on a page of its own instead of a sheet.
After · redesign
Before · the brief
The subscription page · In the brief, the backup card was a line of text under the main one. In the redesign both cards sit in the subscription block, as pills, with the plan’s status and next bill above them.

What 2.0 changed

A page for each task.

Adding a card and changing one each open a page of their own, in place of a sheet over the subscription page.

What stayed

The same safeguard.

In both iterations, deleting the backup card asks first, and says it cannot be undone.

04 / A new card

Scan the card, or type it.

Adding a new card starts from the sheet of payment methods. The camera frames the card and turns green once it fits; the details can also be typed in by hand.

How to add a new credit card

[3.0]
  1. 01
    Novo cartão

    In the sheet of payment methods, “Novo cartão” opens the camera.

  2. 02
    Scan

    The camera frames the card, and the frame turns green once it fits.

  3. 03
    Type it in

    Or the details are typed by hand: name, number, expiry date and CVV.

  4. 04
    Added

    The card is added to the Mercado Pago account, ready for Meli+.

Tap the phone to scan, type and add the card.

05 / The whole journey

Every screen, in order.

The Figma board lays the journeys out in lanes: a goal for each lane, a chip for each step, and a cyan connector from each tap to the screen it opens.

Fewer involuntary cancellations from failed payments [1.0]

  1. E-mail [1.0]

    Step 1: E-mail

  2. Email aberto [1.0]

    Step 2: Email aberto

  3. Central [1.0]

    Step 3: Central

  4. Modal [1.0]

    Step 4: Modal

  5. Detalhe [1.0]

    Step 5: Detalhe

  6. Modal [1.0]

    Step 6: Modal

  7. Cartão adicionado [1.0]

    Step 7: Cartão adicionado

  8. Alterar cartão [1.0]

    Step 8: Alterar cartão

  9. Deletar [1.0]

    Step 9: Deletar

  10. Sucesso [1.0]

    Step 10: Sucesso

Fewer involuntary cancellations from failed payments [2.0]

  1. E-mail [2.0]

    Step 1: E-mail

  2. Email aberto [2.0]

    Step 2: Email aberto

  3. Central [2.0]

    Step 3: Central

  4. Modal [2.0]

    Step 4: Modal

  5. Detalhe [2.0]

    Step 5: Detalhe

  6. Full page [2.0]

    Step 6: Full page

  7. Cartão adicionado [2.0]

    Step 7: Cartão adicionado

  8. Alterar cartão [2.0]

    Step 8: Alterar cartão

  9. Deletar [2.0]

    Step 9: Deletar

  10. Sucesso [2.0]

    Step 10: Sucesso

How to add a new credit card [3.0]

  1. Sheet [3.0]

    Step 1: Sheet

  2. Scan [3.0]

    Step 2: Scan

  3. Scan OK [3.0]

    Step 3: Scan OK

  4. Form [3.0]

    Step 4: Form

  5. Sucesso [3.0]

    Step 5: Sucesso
The three journeys, screen by screen, as the Figma board lays them out. Scroll each row sideways.

What I would measure next

Fewer cancelled by a failed charge.
More who choose a plan.

The proposal stops at the design. The next step is to measure it: the share of subscribers with a backup card, involuntary cancellations before and after, and how many people who open the landing choose a plan.

Next project · TWO ↗︎

Start a conversation

Let’s talk about your product, your team, and where design can create the most value.

Call duration
20-30 minutes
Topic
Design engineering
Price
Free
Contact Bruno