Streaming subscriptions

Create an intuitive subscription and management flow where users can subscribe to their favorite streaming apps with a discount according to their level on the platform's customer loyalty program.

8 mos in the making

shipped on aug 2020

at Mercado Libre

Different screens and parts of the subscriptions project.

Context

As a part of Mercado Puntos team, we were working on a series of “building blocks” to strengthen the program's value proposition and be able to compete with Amazon Prime. We already had free & fast shipping and a solid exclusive deals offer, but we were lacking the benefit our users most wanted: streaming content benefits.

⁓ 70%

unbanked or underbanked LATAM population

CrunchBase article.

3rd

most valued benefit after free shipping and exclusive deals

Bain & Company private study.

3 out of 10

users are subscribed to one or more streaming platforms at the same time

On-site survey.

We knew we weren't going to produce our own content —at least not from the start—. Our best option was integrating content from streaming partners into our platform, leveraging our ecosystem's capabilities. Also, we were going to give discounts according to the user's loyalty level, reaching up to 50% for level 6.

The challenge

Create an intuitive subscription flow, from discovery to post-purchase admin, leveraging the capabilities of Mercado Libre and Mercado Pago.

Value proposition

Up to 50% off according to your loyalty level

Online and offline payment methods

Manage all your subscriptions in the same place

Content partner's content catalog and features

Goals & KPIs

Increase the loyalty program appreciation

Main KPIs:

Loyalty Program NPS*

*On a scale of 0 to 10, how likely are you to recommend Mercado Puntos to a friend?

Sell subscriptions on the ecosystem

Main KPIs:

Monthly Active Subscribers (MAS)

Total Payments Volume (TPV)

My role

I was a semi-senior designer on a team of four. My role in this project was to collaborate in the entire construction of the Streaming Subscriptions product, but being especially in charge of the design of the entire communications flows.

4

UX Design

2 Sr. + 2 Ssr.

1

UX Writing

1 Sr.

1

UX Research

Support

Maybe you want to check one of my awesome teammates: Agus, Rach, Elo, Pato, Meme, and Eze.

Exploration

We got together with the stakeholders and ran a workshop to survey which action our users should be able to do and identify key stages of the flow.

We defined the main goal of our users every step of the way and used it as our mantra.

Discovers the content offer
Convey info about content, deals, and payment options.
Subscribes to a content partner
Ideally, in one single step.
Log in to the partner's app
Link the account to the partner and activate the service.
Manages their subscription
Modify payment methods or cancel a subscription.
Receives communications
Prevent issues to avoid involuntary cancellations.
First sketches and ideas for the screens.

We got together with the UX team and used this methodology to sketch as many explorations as we could in only 8 minutes.

After discussing the explorations with the design team, we started working on the low-fidelity wireframes, each with a different focus and went on to present them to the stakeholders.

Different approaches were proposed at the beginning of the project.

Recurrency engine communications

As I previously said, I was specifically in charge of building a communication flow that informs different updates to the user and optimizes the approval ratio for the payments.

This was a big challenge because there was no other product to look out for and take some insights into. So we had to be creative and build everything from scratch, choosing carefully when, where and how we wanted to communicate the different updates to our users.

One of several communications flows we had to work on.
The Figma files were delivered to the development team as a guide.

The result was more than 80 unique pieces of communication with multiple use cases between e-mails and web/mobile notifications, across 5 different partners.

Visual representation of a communication flow in the event of a payment error.

Final version

We ran the last adjustments and went full UI. One key goal was to develop a visually stunning product but also be extremely adaptable to be able to integrate multiple partners easily.

Discovery

Through benchmarking, research, and our partner's input, we gathered all the information needed to drive subscriptions.

It was super important for us to design a deal page that could convey our partner's key aspects and also be extremely generic and adaptable.

The main components defined were:

    A customizable hero

    The main deal card

    Accepted payment methods

    Content carousel and partner's key features

The main partner subscription screen.

Design for scale

Our deal page contemplated a huge variety of use cases and deals including different subscription plans and supporting free trials.

We also had the challenge to make it dynamic, being able to adjust the price according to the user's loyalty level and subscription status.

Different adaptation tests of our main card.

Checkout

We leveraged our checkout and we built into it the capacity to process recurring payments.

With the power of this new “recurring engine”, we can also allow users to modify their payment methods at any time and also take advantage of the engine events to notify users when something goes wrong.

Our checkout powered by Mercado Pago and its congratulations and error screens.

Partner login

Intuitively switch between Mercado Libre's and the partner's app to link the accounts and start watching.

The account linking flow in Mercado Libre and HBO Max.

Subscription administration

All your subscriptions in the same place. Easily manage, modify payment methods or cancel a subscription at any time.

We took into account the different subscription statuses to define the corresponding call to action:

  • active pill
  • pending pill
  • expired pill
  • canceled pill
The subscription manager and its error cases.

Documentation & handoff

Although by the end of the project the company was in a migration from Sketch to Figma, we had to figure out a way to map the different use cases and document all the specifications so that any area could refer to these documents when needed.

We approached this by using a “mother presentation” where we linked to other presentations, spreadsheets, and Zeplins with the final specifications.

Mother presentation (user journey overview)
Deep dive on the stages.
Content briefs.
Use cases matrixes.
Zeplin handoff.
Our Figma with the assets of the films and tv shows of our partners.

Results

The product turned out to be a great success from the start. We quickly became the top-selling channel for our partners in the region, selling more subscriptions than all other partners combined (Disney+, Star+, HBO Max, Paramount+, Deezer).

↑ 1 million

active subscribers across 5 countries and 5 different partnerships launched

↑ 10%

of subscribers have more than one active subscription at the same time

2% to 36%

subscriptions were made with account money and cash as a payment method

The communication flow was a key part of the success of the product, helping to maximize approval rates.

↑ 35%

increase in recurring payments approval due to the engine journey and communications recovery flow.

Finally, the whole content offer boosted up to 32% of the satisfaction index of the loyalty program.

Press