Sitebuilder redesign for Mercado Libre’s e-commerce editor
OverviewProcessResultsTakeaways

Each day sellers and business need more flexibility, customization and technology posibilities to reach strategic goals.

How do we migrate from fixed template structures to a modular system to open up the possibilities for Mercado Libre's sellers?

Role: Interaction designer
Sector: E-commerce / Saas
Project time: 6 months for MVP / 6 months for engame design
Status: Launched (Partially)
Team:
Design Project Lead
Development Project Lead
Ssr Interaction designer (Me)
Sr Interaction designer
Jr UX Writer
Product Analyst
Tools:
Figma
Analytics
Hotjar

Mercado Shops started as a Mercado Libre feature, offering sellers a one-click experience to create a landing page for their marketplace products. Initially, sellers had limited customization options with fixed templates based on the Andes design system. However, user feedback consistently highlighted the need for more flexibility.

To address this, we improved the editor, transforming it into a powerful site builder. This allowed users to customize their homepage structure, manage components modularly, and differentiate their shops from others. As a result, we reduced churn rate, resolved detractors related to platform limitations, and increased user ownership and engagement.

💡 Opportunity

As Mercado Shops grew into a strategic business unit, we discovered new needs from sellers.
They wanted the freedom to structure their online shops in a unique way, differentiating themselves not only from Mercado Libre's marketplace but also from other sellers.

🎯 Product Goal

To meet user requirements, our product had to be flexible and dynamic, enabling sellers to customize their homepages according to their needs. This involved managing modules and easily adding, moving, or deleting components during the ecommerce customization process.

📊 Business goal

Our business goal was to reduce churn rate and detractors in NPS by improving the design and customization experience. This would enhance user retention, minimize visual and structural issues in sellers' online shops, and prevent them from seeking alternative platforms.

Process

Context

Team acknowledged editor rigidness: users were limited to preselected components in templates. They had to accept the default structure; if desired modules were in another template, there was no way to incorporate them.

Address the friction required significant development and analytical work to conceptualize and roadmap the solution.

Process / Context

With a large user base of over 50,000 sellers, evolving the way they built online shops presented considerable challenges. However, as the team grew and matured, more talent became available, making it possible to tackle this long-awaited opportunity.

Process

Insights

Users expressed the lack of flexibility as a major friction point through multiple channels: usability testing, NPS surveys, and customer interactions. Benchmarking against competitors revealed a significant gap.

Users were disappointed that the leading LATAM marketplace lacked essential features, directly impacting the product's value proposition of enabling sellers to build their shops using Mercado Libre's technology ecosystem.

Process

Scoping

Despite having the necessary talent, we faced legacy code and over 50k existing shops. To ensure a seamless transition, we aligned design and development constraints, considering technical and experiential aspects.

Negotiating between these considerations was crucial. Due to architectural limitations, implementing a user-friendly experience was technically challenging. We planned the project in two major steps: enabling component management and customization separately. Unifying these tasks into a single flow would be the part of endgame.

Process

Concept & Strategy

Considering constraints and the technical landscape, we designed new possibilities for sellers while ensuring familiarity. We leveraged the Andes design system, aligning with the Mercado Libre platform. Analyzing existing user flows, we simplified actions and integrated them into the sitebuilder layout.

Providing choice between the preview and sidebar interaction layers was crucial, catering to users' preferences. Mercado Shops serves a diverse user base, ranging from novice sellers to agency designers experienced in various sitebuilder platforms.

Process

Wireframing

Leveraging previous research and insights, we standardized patterns based on user expectations. Through explorations, we conducted user meetings to validate ideas and ensure familiarity in introducing new component management features. Also provided intuitive affordance for users to seamlessly move, add, and delete modules.

Process / Wireframing

During the MVP rollout, anticipated frictions arose. We collected data and insights to redesign the experience, addressing technical debt. The MVP reassured users of our commitment, despite the need for further iterations to meet their expectations.

Process

Handoff and development

To streamline the development process, we conducted delivery meetings with the team, covering layouts, user flows, and task flows. We specified use cases, action states, and component behaviors to ensure modularity.

A format was created to guide developers in building each module, from structure to detailed behavior..

Results & Conclusions

The design and development process successfully reduced user friction related to structure rigidness and lack of customization. This improvement was evident in reduced churn rate, lower detractor scores in NPS, and decreased customer contacts regarding design and visual topics.

Closing the gap with competitor platforms enhanced user confidence, reaffirming their priority for our company. We value user feedback and will continue to iterate and evolve the product, addressing the features and insights that couldn't be tackled in the MVP.

After the rollout, sellers may select fonts and colors away from Mercado Libre's look & feel. Also build their own landing structure to differentiate between their competitors with a unique online shop.

The emergence of a new approach to designing online shops introduced fresh challenges and concepts to the product. With the ability for users to add, move, and delete components, fixed templates built with the Andes design system lost their uniqueness. Users could now create structures different from the original templates, raising visual issues related to flexibility and look and feel. To address this, we worked on a new template system, which you can learn more about in the related case study.

Takeaways

Collaboration between development, product, and design teams was crucial in overcoming product challenges and driving disruptive iterations. Aligning user insights, technical constraints, and product context helped create a meaningful roadmap, unravel uncertainty, and avoid breaking the user experience.

Balancing insights, features, and goals allowed for task prioritization that made sense for everyone involved. Embracing challenges systemically anticipated obstacles, ensured cohesion between existing and new user flows, and revealed impacts on other product areas. Working in silos disconnects flows and hinders users from achieving their goals.

💡 Strengthened soft skills
  • System thinking
  • Negotiation
  • Prioritizing task and roadmap them
  • Data-driven decisions making
  • Prospective and future thinking
  • Opportunity, problem and solution framing
⚙️ Strengthened hard skills
  • UX research
  • Analysis and data collection
  • Information architecture
  • Detailed-oriented handoff documentation
  • Usability testing
  • Lo-fi and Hi-fi Prototyping

See more projects

Give a look to another projects where I had the opportunity to work and learn!

Template System for Mercado Shops
See full project
A/B testing and experiment strategy for e-commerce
See full project
Embajadores: Employee Experience for AB-InBev
See full project
Diego Franco
Product Designer
+1 548 333 6681dicfrancoc@gmail.com
LinkedInResume
Made by me, in webflow.