E-commerce
SaaS
White Label

Redesigning Grocery E-commerce

An e-commerce solution with a foundation of user-centric, data informed UI/UX

Grocery e-commerce, unlike typical ship-to-door solutions, remains a dynamic and evolving challenge. As Director of Product Design at Mercatus, I led a redesign of our white-label SaaS platform, which served dozens of clients through customizable, themeable web and mobile front ends. Maintaining a clear and consistent design language, while still enabling retailers to customize features to reflect their brand, was essential to achieving a user-centric experience.

đź§  My Role
  • Product Design Lead
  • Partnered with engineering, product, and client success teams
  • Led UX research, data analysis, workflow redesign, and stakeholder alignment
🌟 Highlights
  • Developed a fully tokenized, multi-platform design system with localization support
  • Lead a global team of 5 designers for this project
  • Achieved full WCAG 2.1 compliance (verified by Allyant)
  • Significantly reduced checkout abandonment rates with a redesigned single-page checkout
  • Created an import system allowing retailers to theme their web and mobile instances in unision
  • Reduced design QA time and improved design hand-off by leveraging Storybook full

Some Highlight Features

Fully customizable landing page
Allowing retailers to highlight promotions, products, pages or features.
Dynamic Product Cards
Designed to handle any data catalogue and over 30 deal types
Order Tracking
Up-to-date statuses and reconciliation for unavailable items
Order History
Recall order timings, items, and instructions
Structured Product Views
With a focus on item identification, information, and pricing
Managed Store Details
Updated through our Retailer Admin tools

Crafting Informed UX Decision

While we consider ourselves experts, our team made sure that every change we made was grounded based on customer behaviour and validated against industry best practices. We relied on a variety of data sources—Hotjar, Google Analytics, user testing, reviews, surveys, and broader market trends—to guide our decisions.
‍
The Baymard Institute was requisitioned at major milestones to perform UX audits, to ensure alignment with proven UX standards. Their resource of guidelines(available to paying customers) served as a key reference throughout the project and were included in our hand-off documentation to help teams across the organization understand the rationale behind each decision and communicate changes effectively (Product Marketing loved this!).

Validation and User Feedback

With each iterative release, our team closely monitored user behavior and conducted staged user testing sessions. In collaboration with the Product team, we reviewed every piece of user feedback and quickly addressed any issues that surfaced.

Here are some of the key objectives we achieved: