back button
Grooze cart mockup

Scan-and-Go Grocery Cart

Re-imagining a grocery shopping experience that is efficient and effortless.

Roles
Product Designer
  • Led end-to-end design from research, design, to delivery.
  • User Research, Comparative Analysis, Wireframes, Prototypes, Usability Testing, Accessibility Audits
Timeline
Jan-April 2024 (4 months)
Discipline
  • UX Research
  • UX/UI Design
  • Branding
  • Service Design
Tools
  • Figma
  • Adobe Illustrator

The Problem

Problem statement - Long checkout lines and poor in-store navigation make grocery shopping slow and frustrating for customers.User Interview quotes

The Solution

Solution: A smart shopping cart that scans products in real-time and helps customers find items using AR navigation—saving time and removing friction from the grocery experience.

Design Phases

Design Process

Uncovering Shopping Pain Points through Surveys

Discovery

Over a two-week period, I collected 53 survey responses to better understand user behaviors and frustrations with grocery shopping.This research helped me clarify the target audience and identify key challenges to solve, ensuring design decisions were grounded in user needs.

Survey data

Defining our Target Audience

Define
Who will use our product? What do they care about?
Proto-person: Mei Lin

Conceptualization

Ideate
How will user interact with the product?
existing user journey mapGrooze user journey map

Low-Fidelity Wireframing

Design

Mobile Onboarding Screens

The digital shopping cart syncs with data from user’s mobile app. Thus, mobile wireframes and prototypes are crucial for initial parts of the touchpoint journey.

Mobile device prototype information
low-fidelity wireframe

Usability Testing

Test

I tested the low-fidelity wireframes with three users and made rapid iterations directly on the high-fidelity wireframes.

first round usability testing summarybefore vs. after choose a payment method wireframebefore vs. after tutorial wireframebefore vs. after food preference wireframe
a comparison of two rounds of usability testing. reducing from 5mins to 3mins

Prototype

Design

High-Fidelity Wireframes and Prototyping

Tablet (Cart) Shopping Screens

Once users mount their phones on the digital shopping cart. The cart will be activated with user’s account data. This activates in-store navigation and auto-checkout from the cart.

tablet prototype information

Key Learnings

The Value of Usability Testing

Through usability testing, I uncovered repeated feedback on design oversights I hadn’t initially considered. Iterating based on this feedback led to stronger outcomes in the second round of testing, reinforcing the importance of validating designs early and often.

Defining the Minimum Viable Product (MVP)

Initially, I scoped the project as a service design journey across multiple touchpoints (e.g., staff interface, email receipts). This quickly expanded beyond the time available. Narrowing down to the MVP taught me how to prioritize features that deliver the greatest impact with the least complexity—an essential skill in real-world product design.

Future Enhancements

Establishing a Scalable Design System

Although I defined basic tokens such as color palettes and typography, a more robust design system would enable consistency and efficiency. With more experience in Figma, I would apply auto-layouts, grids, and reusable components rather than relying on manual adjustments.

Considering Real-World Implementation

“Smart cart” technology is still emerging, with only a few companies (such as Amazon Fresh) testing it in-market. A next step would be researching the technical feasibility, implementation costs, and potential ROI for grocery businesses. Understanding these constraints would ensure the solution is not only user-friendly but also viable from a business perspective.