Template System for Mercado Shops, an ecommerce builder.

Contrast templates based in Andes design system, and alternatives designed

What is the seller’s expectation when they have to choose a template?

Role: Interaction designer
Sector: E-commerce / Saas
Project time: 6 months
Status: Launched (Partially)
Design Project Lead
Development Project Lead
Ssr Interaction designer (Me)
Jr Interaction designer
Jr UX Writer
Product Analyst

Mercado Shops empowers sellers to create customized stores on their own domain, leveraging Mercado Libre's ecosystem: Mercado Pago for payments, Mercado Envíos for logistics, Mercado Ads for exposure, and e-commerce expertise. However, expanding the platform to individual stores beyond the marketplace posed a visual versatility challenge. Previously, Mercado Shops used different layouts based on Andes, Mercado Libre's design system, resulting in stores that resembled the marketplace.

To address this, we redesigned the template system, offering sellers new branding possibilities for their online shops. This reduced churn and detractors among user cohorts, increased life cycle and perceived value, and prevented loss of users seeking visual differentiation for their shops.

💡 Opportunity

Provide visual versatility for Mercado Libre's sellers when creating customized stores outside the marketplace, offering diverse templates for various value propositions and brand identities.

🎯 Product Goal

To narrow the gap with competitor platforms in terms of shop customization and design, we aim to bring flexibility and versatility through a scalable and systemic approach. This will help reduce development efforts.

📊 Business goal

Minimize detractors and churn rates associated with shop customization and design through a scalable solution that maximizes perceived product value and reduces maintenance efforts.



Feedback channels (usability testing, NPS surveys, research) revealed a recurring issue: sellers' shops resembled Mercado Libre's marketplace instead of their own e-commerce pages. Sellers wanted to customize their shops with unique brand styles, but were limited to rearranging the fixed Andes components within templates.

Process / Context

Originally a Mercado Libre feature, Mercado Shops evolved into a strategic business unit due to increased e-commerce demand during the pandemic. Recognizing the growing popularity of website builders and the lack of coding skills among users, Mercado Shops became a solution. the team has expanded, allowing for dedicated development efforts and independence from the Andes design system.



During usability testing for other projects involving Mercado Shops, users consistently expressed frustrations regarding visual design. These insights guided our understanding of how users interacted with the previous template system.

Various sources of information, such as NPS surveys, usability testing, and Hotjar follow-ups, allowed us to quantitatively validate the issues that users qualitatively highlighted.

“I’m looking for another platform, now Mercado Shops is the same with Mercado Libre
“Seems like a copy-paste from the marketplace, doesn’t let me design on my own way, It should be 100% customizable, not look the same as Mercado Libre”
“I would like to add content, not just products. A real page also manage relevant and useful content for customers”



To take a systemic approach, we extensively analyzed the current template system, including its construction and legacy components offered by Mercado Shops.

This assessment allowed us to understand the necessary scope of the redesign without adversely affecting existing shops. We categorized the components into three groups: Product, Category, and Custom content.


Concept & Strategy

To address this challenge, we utilized brand archetypes to align with specific Customer Personas. With twelve distinct archetypes, such as The Innocent, Hero, Explorer, and more, we transitioned from product categorization to brand categorization in the new system.

This allowed sellers to express their unique purpose, values, and brand personalities, enabling a diverse range of visual styles for their shops, regardless of the product type.



We abstracted the twelve brand archetypes into visual style tiles to cover a broad spectrum of brand personalities. Moodboards were created to align communication and translate it to components like banners, carousels, and product showcases.

We standardized these components for scalability, ensuring the same HTML structure while allowing changes through CSS variables, colors, fonts, and spacing.


Handoff and development

To cater to individual seller needs, we extensively analyzed and defined various use cases, considering the design flexibility spectrum of each component. Using Figma, we created a detailed structure that captured general and specific attributes. Documentation encompassing coding guidelines was created, combining spreadsheets and Figma files for efficient information management.

Close collaboration and regular meetings allowed us to address unforeseen situations and refine code details as needed during the development process.

Results & Conclusions

We developed and delivered a dynamic component system that enables sellers to design online shops with their own brand visual personality, distinct from Mercado Libre's design system. This system offers a wide range of concepts that align with sellers' values and identity.

Additionally, we upgraded Mercado Shops' site builder with a modular concept, providing flexibility in the structure. Sellers now have the freedom to move, add, and delete components to align with their specific business goals. Although not initially included in the scope, this capability was crucial to confidently achieve our objectives.

After the rollout, sellers can choose templates and visual identities based on their brand values or communication concepts, allowing differentiation within the same product type.

Close collaboration with the development team was crucial in overcoming the challenges associated with working with legacy code and refactoring components. By doing so, we were able to create a scalable system that reduces technical debt and optimizes the effort required for upgrading and maintaining new components and the template system. This collaborative effort ensured a streamlined and efficient process for future enhancements and maintenance.


This project was highly engaging for me as it allowed me to take an atomic approach, building components from scratch and meticulously considering atoms, molecules, organisms, and more. I had the opportunity to analyze numerous use cases and variants, deeply understanding user needs and making data-driven decisions.

The project team was diverse, comprising designers in various roles, developers, and product analysts. Given the strategic significance of the project, there were multiple stakeholders involved, and I had to effectively pitch, negotiate, and defend decisions, which greatly enhanced my communication skills.

💡 Strengthened soft skills
  • Communication
  • Leadership
  • Self-starter attitude
  • System thinking
  • Complex use cases approach
⚙️ Strengthened ard skills
  • Visual design & UI
  • Detail-oriented documentation
  • Html & CSS
  • Multi-resolution components
  • Adaptive design

See more projects

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

E-commerce sitebuilder redesign 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
Made by me, in webflow.