Kroger Shopping App Experience
UX/UI DESIGN
USER FLOW
AUDIENCE RESEARCH
WIREFRAMES
PROTOTYPING
Publicis Sapient x
The Kroger Co.
2020
TOOLS USED
FIGMA
MIRO
ROLE + TEAM
UX DESIGNER (3)
Project Overview
During the height of the COVID-19 pandemic, grocery shopping became a high-stress, high-stakes experience. Capacity limits, senior shopping hours, supply shortages, and social-distancing requirements fundamentally changed how people navigated physical stores.
Kroger partnered with Publicis Sapient to explore how digital product design could create a safer, more efficient, and more humane in-store shopping experience. The goal was not just efficiency, but reducing anxiety and helping shoppers feel prepared, supported, and in control during an uncertain time.
Our team was tasked with designing an integrated app experience that helped shoppers plan ahead, navigate the store with minimal friction, and move through aisles safely while maintaining distance from others.
The Problem
During lockdown, shoppers faced several compounding challenges:
Limited shopping windows and special hours
Inconsistent inventory and last-minute out-of-stock items
Difficulty navigating stores while maintaining six-foot distancing
Increased cognitive load and anxiety while shopping
No clear way to plan the most efficient in-store path
Existing grocery apps focused heavily on lists and online ordering—but did not support real-time, in-store navigation or pandemic-specific needs.
The Solution
We designed a three-part, end-to-end shopping experience within the Kroger app that supported users before, during, and after entering the store. The solution integrated:
Advanced list creation and customization
Inventory-aware item selection and smart shopping time recommendations
A guided, gamified in-store navigation experience
The experience was designed to work seamlessly across mobile, desktop, and Apple Watch, ensuring accessibility and ease of use in different contexts.
Our Goals
Reduce friction and anxiety during in-store grocery shopping
Create a single, centralized shopping experience that supports planning, navigation, and checkout
Help shoppers move efficiently and safely through the store
Key Insights
Shoppers wanted certainty before entering the store (inventory, timing, layout).
Many users were shopping for households, not just themselves, increasing list complexity.
Anxiety and decision fatigue were as impactful as logistical barriers.
Hands-free or glanceable experiences (watch) were especially valuable once inside the store.
Audience Analysis
We conducted an audience analysis to understand how grocery shoppers’ behaviors and needs shifted during the pandemic. Our approach included:
Reviewing pandemic-era shopping research and consumer behavior trends
Identifying accessibility, safety, and emotional pain points
Mapping the grocery journey from pre-trip planning to checkout
Assessing where existing grocery apps failed to support in-store needs
Shopper Persona
Maya Thompson
Pain Points
Overcrowded aisles
Unclear store layouts
Forgetting items or discovering they’re out of stock mid-trip
Feeling overwhelmed and rushed
Goals
To get in and out of the store quickly
Avoid crowds and unnecessary backtracking
Know what's in stock before arriving
Tech Comfort
Comfortable using mobile apps and wearables
Relies on lists and calendar integrations to stay organized
PROBLEM
Shopper feels anxious and unprepared about grocery shopping during lockdown
HIGH LEVEL JOURNEY
User Flow
ACTION
Uses the Kroger app to plan their trip in advance
EXPERIENCE
Builds a smart list
Confirms item availability
Selects optimal shopping time
Uses guided navigation in store
OUTCOME
Shorter shopping time
Fewer unnecessary interactions
Reduced stress and increased confidence
Flow 1:
Smart List Creation & Customization
Shoppers can create multiple lists for different needs (weekly groceries, essentials, household members). Lists are customizable and dynamic, allowing users to add, remove, or reorganize items easily.
This flow establishes mental clarity and preparedness before the shopper even leaves home.
Flow 2:
Inventory Awareness & Smart Scheduling
Once items are added, users can:
View product images and details
Confirm real-time stock availability at their chosen store
This prepares shoppers for the reality of their visit and reduces last-minute surprises.
Receive suggested shopping times based on filters such as:
Senior hours
Off-peak hours
Bakery or deli availability
Calendar integration
Flow 3:
Guided, Gamified In-Store Navigation
Upon arrival, shoppers tap “Start Shopping” and select their list. The app then:
Calculates the most efficient aisle order
Guides users aisle-by-aisle
Allows items to be checked off in real time
Automatically advances to the next aisle
The experience is intentionally gamified but calm—turning a stressful errand into a guided, manageable journey.
This reduced friction and kept users present in the physical environment.
.png)
Apple Watch Experience
The Apple Watch experience was designed as a glanceable, hands-free companion. Shoppers could:
See the next aisle
Check off items quickly
Stay focused without constantly unlocking their phone
Desktop Experience
The desktop experience supported pre-trip planning, allowing users to:
This ensured continuity across devices and supported users who preferred larger screens for planning.
Build and manage lists
Review availability
Schedule shopping times
Reflection & Conclusion
This project reinforced how thoughtful UX design can act as emotional infrastructure, not just functional tooling.
By introducing a light layer of gamification—progress, completion, guided steps—we transformed grocery shopping from a source of anxiety into a structured, reassuring experience. In a moment defined by uncertainty, the product offered users a sense of control, clarity, and momentum.
Designing for crisis conditions challenged us to think beyond traditional success metrics and prioritize empathy, accessibility, and emotional ease.
This work remains a meaningful example of how UX can meet people where they are and help them move forward, even during collective disruption.