Redesign of Mercado Play developed with Astro.
Summary • Key features • Design process • Manual installation • License • Contact
(test the live redesign or watch the demo video)
Mercado Play redesign to address the deficiencies in the user experience (UX) of the current design.
Mercado Play is a free streaming service for films and series developed by Mercado Libre.
The current Mercado Play design isn't optimal and has many aspects to improve. For example, it shouldn't be inside the Mercado Libre ECommerce platform as there is no clear connection for a user to access an ECommerce platform just to watch a film or series, resulting in poor user experience (UX). However, it could be related to the ECommerce platform in ways that improve the UX by connecting films/series to merchandising or related products. That's why I redesigned it.
- [ TODO ].
First, I started identifying the major UX problems that Mercado Play has:
- It looks like the Mercado Libre ECommerce platform, so users perceive it as an ECommerce extension and not a streaming service within the Mercado Libre ecosystem. Additionally, as it does not follow typical UX designs of streaming services, users often get lost navigating its interface.
- Ads on streamed content are too invasive. Nowadays, excessive ads frustrate users to the point that they abandon the application after encountering multiple ads during their first attempt to use it.
- As there is no mobile or TV application, many users cannot enjoy the service with their families.
After identifying these problems, I thought about how they could be solved:
Too similar to the ECommerce platform
Since the current Mercado Play design closely resembles Mercado Libre ECommerce platform, it feels unfamiliar to users who consume streaming services. So, how should its interface be redesigned?
To align with the common UX of streaming services, it should have a familiar layout (navigation bar, carousels for films/series, iconography, etc.) while maintaining key differences to make it recognizable. The design team should study the UX patterns of streaming services like Netflix, Disney+, Amazon Prime Video, Paramount+, and others, integrating new trends into the Mercado Play design to create a unique yet intuitive UX.
[!TIP] Check out the low-fidelity UI to see how I planned the component layout.
Invasive ads
Ads help monetize the service to keep it free, but the current implementation on Mercado Play harms the user experience (UX). So, how can Mercado Play be monetized without invasive ads? One solution is to use Mercado Ads1 campaigns.
The company could introduce a tool allowing publishers to display ads after a film/series ends, encouraging users to buy products related to what they've watched. Publishers could also display ads at the beginning of each film/series, or Mercado Libre ECommerce could promote its special offer events (like Hot Sale, Cyber Monday, or Black Friday) to broaden their reach.
For users with Level 6 subscriptions on the ECommerce platform, the company could provide access to Mercado Play with minimal ads only after a film/series ends.
Finally, Mercado Libre could encourage users to engage with Mercado Play by offering discounts on related products upon completing a film/series, fostering loyalty and connecting the ECommerce and streaming services.
[!TIP] When I refer to "series ends", I mean when all episodes of the serie ends and not at the end of each episode. Similarly, "ads" refers to those integrated seamlessly into the interface without disrupting the UX.
No mobile or TV application
Developing native mobile and TV apps requires significant investment in resources. So, how could Mercado Libre create a native application for Mercado Play without incurring excessive costs?
As the company uses React and likely has many developers familiar with this technology, some teams could be reoriented to React Native to develop a cross-platform application for mobile and TV. This approach minimizes costs, leveraging existing knowledge of React since React Native has a similar syntax and workflow.
[!WARNING] While React Native supports platforms like iOS, Android, and TVs, it has limitations compared to fully native environments.
Since the current UX of Mercado Play has issues, I redesigned its component layout, creating a low-fidelity UI for web and mobile designs.
Tip
Components with a green background are interactive.
I chose Astro as the web framework to develop the Mercado Play redesign because it is well-suited for creating new concepts for existing applications. As this is not a production-ready application, Astro provides more than enough tools. But what about the styles? I opted for the Justd components library because it offers a collection of accessible, functional, and minimalist-styled components built with Tailwind CSS.
Finally, after completing each step of the design process, it was successfully developed and hosted. You can access to the new Mercado Play design at https://localhost:3000/.
- Clone the repository by downloading it into your machine.
- Install Node.js (runtime environment) and pnpm.
- Open the downloaded repository in Visual Studio Code (code editor).
- Run
pnpm installto install all the necessary packages. - Run
pnpm run devorpnpm run dev:hostto run the Mercado Play redesign on your machine.
Warning
Follow these instructions only if you want to run the Mercado Play redesign locally. If you'd rather just see it in action, visit https://localhost:3000/.
This repository is under MIT License, if you want to see what you are allowed to do with the content of this repository, please visit choosealicense for more information.
If you want to contact me, please see my socials medias in my GitHub profile.
Footnotes
-
Dedicated service to publish ads in the Mercado Libre ecosystem. ↩