Improving the Whole Foods In-Store Checkout Experience

Introduction

In this project, I redesigned the Amazon app's Whole Foods checkout feature. The project specifically addressed the challenge of streamlining access to the in-store checkout code, aiming to create a faster, frustration-free experience for customers at Whole Foods checkout.

Project Overview

The project focused on solving a specific pain point: customers at Whole Foods struggle to quickly find their in-store checkout code in the Amazon app. The cluttered interface makes it difficult to locate, causing delays at checkout and leading to frustration. To address this, I aimed for the following:

Streamlined Checkout Code Access

Simplify the process of finding and accessing the in-store checkout code within the Amazon app.

Enhanced Accessibility

Implement clear, consistent placement of the checkout code feature with intuitive navigation.

Improved User Experience

Create an interface that reduces friction and speeds up the checkout process.

Reduced User Frustration

Eliminate the stress and delays caused by difficulty in locating the checkout code.

Skip to Prototype

The Problem

Customers at Whole Foods struggle to quickly find their in-store checkout code in the Amazon app. The cluttered interface makes it difficult to locate, causing delays at checkout and leading to frustration.

How might we make the in-store checkout code easier to find within the Amazon app?

My hypothesis suggests that by implementing a persistent checkout code feature with intuitive navigation, we can reduce the time and effort required for customers to access their code.

The Solution

Making in-store checkout codes instantly accessible through persistent visibility and intuitive placement.

The redesigned Amazon app brings the in-store checkout code to the forefront through a persistent button and clear visual hierarchy. By prioritizing quick access and reducing navigation steps, we transform the checkout process in Whole Foods from a frustrating hunt into a seamless part of the shopping experience.

WHEN WAS THIS?

Jan - Mar 2025 (7 Weeks)

WHAT DID I DO?

User Researcher | UX/UI Designer | Product Designer

User Research & Competitive Analysis — Conducted user interviews, surveys, and heuristic evaluations to identify pain points and opportunities. Performed competitive analysis of grocery shopping apps to identify market gaps.
Information Architecture & User Flows — Created user personas, journey maps, and user flows to inform the design direction. Developed interaction patterns and navigation structures for improved usability.
Wireframing & Prototyping — Created low-fidelity wireframes and paper prototypes for initial testing, followed by high-fidelity interactive prototypes using Figma. Focused on responsive design and cross-platform consistency.
Usability Testing & Iteration — Designed and conducted moderated usability tests with target users. Analyzed task completion rates and user feedback to iterate on designs. Implemented A/B testing for key features.
Visual Design & Accessibility — Implemented comprehensive accessibility features including persistent icon placement with clear labeling, high-contrast UI elements, enlarged tap targets, and one-handed navigation. Streamlined the interface with familiar iconography and multiple entry points for key features.

User Research

To better understand user frustrations, I conducted 6 interviews and 2 rounds of usability tests. Here's what I found:

38%

expected the Amazon Lens icon to generate the in-store code but it didn't.

68%

searched in 'My Account' but couldn't find the in-store code.

40%

were frustrated by navigating through multiple sections.

Competitor Analysis

CVS places QR code prominently on home screen, minimizing search time and checkout friction. This insight led me to consider a more visible and easily accessible placement for the Whole Foods checkout code.

Target maintains consistent barcode location under 'Wallet' tab, ensuring predictable access. Inspired by this, I explored ways to give Whole Foods customers a similarly reliable experience when locating their checkout code.

Apple Wallet allows users to store and retrieve QR codes instantly, removing the need to navigate through multiple screens. This gave me the idea of considering future integration possibilities for Whole Foods, making checkout even faster and more convenient.

Paper Prototyping & Low Fidelity Wireframing

Based on my research, I explored various design solutions including a dedicated QR code button, integration with Amazon Lens, and a consistent feature placement under 'My Account'.

Usability Testing

After 2 rounds of user testing with 5 individuals, here's what I found:

64%

were confused by a toggle between Amazon Lens and the checkout code.

90%

wanted the code to appear automatically upon entering Whole Foods.

96%

still wanted a manual option under 'My Account' for flexibility.

High-Fidelity Prototypes

Building on user testing insights, I implemented two key changes to improve the checkout experience:

Solution 1: Distinct QR code button and updated camera icon

Solution 1: A distinct QR code button appears when users enter a Whole Foods store, providing instant access. The Amazon Lens icon has also been updated to a camera symbol for better user recognition.

This distinct QR code button ensures quick and effortless access for all shoppers — whether they need instant visibility, a seamless one-tap experience, or a clean, accessible design that reduces friction at checkout.

Solution 2: In-Store Code under My Account

Solution 2: A dedicated 'In-Store Code' option under 'My Account' ensures consistent access to the checkout code.

This in-store checkout code feature in 'My Account' provides easy access for all shoppers — whether they need consistent visibility, quick manual access, or an intuitive and organized experience that enhances accessibility and reduces friction.

Interactive Figma Prototype

Explore the interactive prototype to see the key user flows:

Tools & Methods

Figma for wireframing, prototyping, and design system creation
Marvel for paper prototyping and early concept validation
Adobe Creative Suite for visual asset creation
WCAG guidelines for accessibility compliance and testing
User interviews and surveys for qualitative research

Impact & Results

75%

improvement in task completion rates for finding the checkout code.

60%

reduction in user errors during the checkout process.

Enhanced

WCAG 2.1 accessibility compliance standards achieved.

100%

positive user feedback on new features and improved usability.

Next Steps

Conduct extensive A/B testing with the new QR code button placement to optimize its visibility and accessibility.
Explore integration possibilities with digital wallet systems for even faster checkout.
Implement location-based triggers to automatically surface the checkout code when customers enter Whole Foods stores.
Gather quantitative data on checkout times to measure the impact of these improvements.

Reflection

This project marks my first comprehensive end-to-end UX case study, where I tackled improving the Whole Foods in-store checkout experience for customers. Through this journey, I've grown significantly in user-centered design methodologies, from conducting thorough user research to crafting data-driven solutions that enhance the shopping experience.

See Next

Lume

A UX case study exploring how to help independent designers increase their market visibility through an intuitive mobile platform.

Redesigning Salesforce's Flow Builder

A case study on improving accessibility and user productivity for sight-impaired users in the Salesforce Flow Builder.

Resource Selection with Keyboard Navigation

A case study on ensuring comprehensive keyboard navigation towards an improved resource selection experience in the Salesforce Flow Builder.