Scaling Design for a Multi-brand Grocery eCommerce Platform

Scaling Design for a Multi-brand Grocery eCommerce Platform

Timeline

2021 – 2024

Platform

Mobile App, Web

Overview

Mercatus is a SaaS eCommerce platform powering online experiences for 100+ grocery retailers across North America.

I joined as a UX designer to help scale our white-label web and mobile apps—supporting seamless shopping, curbside pickup, delivery, and personalized loyalty—all within the constraints of a multi-brand ecosystem.

🙋‍♂️ My Role

I joined the Mercatus product team as a UX designer, helped shape design strategy for improving the end-to-end shopping experience across our white-label web and mobile apps.

My responsibilities spanned defining the product direction, creating low- to high-fi designs and collaborating with product managers and developers to bring the features to life.

(I was thrilled to start this new chapter in my design career!)

💪 Challenge

As a white-label platform, Mercatus needed to strike a balance between system efficiency and brand individuality — a challenge that impacted both client onboarding and long-term product scalability. The challenge wasn’t building one product, but building many, with shared infrastructure but distinct needs.

To the Business

Most clients had similar brand colors (red or green), making storefronts visually indistinct

Each retailer integrated with slightly different APIs — the design needed to flexibly handle missing or partial data

High cart abandonment, bounce rate, and checkout drop-off pointed to deeper UX and performance issues

Low app store rating (2.1 stars) were impacting brand credibility

To the Customer

Inconsistency and outdated experiences across mobile and web

Friction in browsing, shopping and checkout flows

Performance issues impacted usability, especially with features like coupons, flyers, and sometimes even login

To the Design & Product Team

No shared design system across platforms led to inconsistent UI

Lack of documentation introduced QA debt and recurring bugs

Collaboration between design and engineering was fragmented

For a deeper dive into how we tackled these system challenges, check out my Design System case study.

🎯 Goals

We set on three clear goals based on the challenges.

Making the shopping experience easier and faster – Streamline product discovery, cart, and checkout flows to reduce friction, abandonment, and user frustration across web and mobile

Create design infrastructure to support the white–label business model — We needed scalable patterns and flexible theming so each retailer could reflect their unique brand identity

Work better across teams — Improve how designers and developers collaborate by creating reusable components, better documentation, and communication channels.

These goals helped shape the direction of the project – including building a brand new mobile app with React Native frame, redesigning key web flows like checkout, and establishing a new design system.

🔬 Research & Discovery

To better understand the problem space, I focused on both external benchmarking and internal signals:

Competitor Analysis – Studied how other white-label platforms structure their UX to support brand differentiation and consistency at scale

Google Analytics & HotJar — Investigated behavioral metrics like bounce rate and checkout abandonment to identify friction points in key flows

App Store Reviews & Support Tickets — Reviewed user feedback to identity recurring complaints and missed expectations

User Testing — Ran moderated tests via tools like UserTesting to validate flow improvements and collect feedback early before development

Baymard Institute — Referenced established UX best practices to evaluate our checkout and navigation flows against industry benchmarks

This combination of quantitative and qualitative research helped us frame the key problems and build empathy across the team.

📈 Results & Impact

Over three years, we gradually transformed a fragmented white-label experience into a more cohesive, scalable platform. Let me show you what this looked like.

Redesigned Mobile App

We focused our efforts make the transition into the newly designed mobile app using React Native. The results were a significantly improvement over our legacy app. The new experience not only reflects the client’s brand identity, but also gives them more control back over their storefronts. The updated look and feel is modern, flexible and rooted in thoughtful UX.

Here are some of the metrics we were able to track:

4.6 Stars

Avg App Rating

from 2.1 stars previously

–24%

Checkout abandonment
rate across retailers

–19%

Cart abandonment
rate across retailers

Refreshed Website Experience

Besides the mobile App, we also upgraded the website experience using our design philosophy. Previously, the Mobile and the Web were designed at different time and led to inconsistency results. Now it is the time to fix it and deliver a unified experience.

Here are some of the highlights:

The Collaboration

From requirements to final delivery, we focused on building a detailed handoff process. I worked closely with our Product managers and developers to ensure everyone is aligned.

Jira – A template was introduced to standardize the ticket to ensure no detail was missed.

Figma – We used the power of Dev mode to deliver precise, developer-ready design specs.

General Communication – Regular meetings and Slack messages kept everyone aligned while working remotely.

📚 Takeaway & Learning

Looking back, working at Mercatus taught me the value of building scalable system with flexibility in mind. Designing for a white-label platform meant every decision had to account for variation, branding, and reusability, without compromising user experience.

At Mercatus, I had the chance to work with a great team. Together, we were able to push each other during every design critique session by constantly asking “Why”, which helped me grow as a better designer and make thoughful design decisions.

“Brand is an exceptional UI/UX designer whose unique skill set significantly enhanced our team’s collaboration with technical teams. His methodical and patient approach fostered trust and consistently delivered high-quality outcomes.”
“Brand is an exceptional UI/UX designer whose unique skill set significantly enhanced our team’s collaboration with technical teams. His methodical and patient approach fostered trust and consistently delivered high-quality outcomes.”
– Yuhiro Chavez, Head of Product Design @Mercatus
– Yuhiro Chavez, Head of Product Design @Mercatus

Next Project →

Design System

DesignToken

Mentorship

Design System Transformation

Design System Transformation

Create building blocks to align design languages and improve efficiency.

Create building blocks to align design languages and improve efficiency.

Copyright © 2025

yuyiqi.brand@gmail.com

Copyright © 2025

Copyright © 2025

yuyiqi.brand@gmail.com