Project Overview

Product: Patrick's - A comprehensive grocery store mobile application designed to streamline the shopping experience through intelligent features and seamless integration.

Timeline: 12 weeks (Research: 2 weeks, Design: 7 weeks, Testing: 3 weeks)

My Role: Lead UX/UI Designer

Tools: Figma

The Challenge

Modern grocery shopping is plagued by inefficiencies that cost consumers both time and money. Shoppers struggle with forgotten items, missed deals, store navigation difficulties, and long checkout lines. Our challenge was to create a unified mobile experience that addresses these pain points while integrating seamlessly with existing grocery store operations.

Key Problems Identified:

• Average shopping trip takes 43 minutes with 23% of that time spent searching for items

• 68% of shoppers forget items from their mental shopping lists

• Consumers miss an average of $12 in applicable discounts per shopping trip

• Checkout lines account for 31% of total shopping time

• 
  

The Solution

A comprehensive mobile grocery application that combines intelligent shopping assistance, personalized deal discovery, and seamless store integration with a focus on efficiency and user experience.

Research Phase

Market Analysis

• Market Size: $682B US grocery market with mobile commerce growing at 15.3% annually

• Key Competitors: Instacart, Amazon Fresh, Walmart Grocery, Kroger app, Target app

• Market Gaps: Poor in-store navigation, missed personalization opportunities, fragmented checkout experiences, limited real-time inventory integration

User Research Methods

• User Interviews: 15 participants (ages 25-55, mixed shopping frequency)

• Observational Studies: 8 in-store shopping sessions

• Online Surveys: 11 responses for problem validation

• Competitive Analysis: 5 major grocery platforms

• Card Sorting: Information architecture validation

Key Research Insights

Primary Pain Points Identified:

1. Shopping Inefficiency: 78% of users forget items despite having lists

2. Navigation Challenges: 65% struggle to find items in unfamiliar stores

3. Missed Savings: 82% miss relevant deals and promotions

4. Checkout Frustration: 71% find checkout lines frustrating during peak hours

Why I Used Empathy Mapping for My Grocery App Case Study

Honestly? I thought I understood grocery shopping until I tried designing for it.

At first, I was designing from my own perspective—someone who shops leisurely on weekends. But my users included stressed parents shopping during lunch breaks and students counting every dollar at midnight.

I chose empathy mapping because I needed to get out of my own head and understand what users were actually thinking and feeling, not just what they were clicking.

The Real Insights

The empathy maps revealed things analytics couldn't. Like how busy parents aren't worried about app speed—they're terrified of forgetting something and having to drag tired kids back to the store. Or how budget-conscious shoppers feel anxiety with every purchase decision, not just annoyance at high prices.

Empathy mapping showed me that grocery shopping isn't really about groceries. It's about fitting one more overwhelming task into an already packed day.

That's why I used it—because the app needed to solve emotional problems, not just functional ones.

User Story

I have a hypothesis would you like to hear it? Here it goes…

Starting with Curiosity, Not Assumptions

While working on this design, I realized that my initial assumptions about user pain points might be missing the mark. Instead of diving headfirst into design solutions, I took a step back and embraced what I call "strategic questioning."

The breakthrough came when I shifted my mindset from "How do I solve this?" to "What questions will reveal the real problems worth solving?"

The Question-First Approach

Rather than designing in a vacuum, I developed a series of targeted questions aimed at understanding the deeper needs of our shoppers. This isn't just about user interviews—it's about crafting the right inquiry framework that uncovers insights we didn't even know we were looking for.

From Questions to Actionable Solutions

This question-driven approach doesn't just generate interesting data—it creates a direct pathway to solutions that actually matter to users. When we understand the why behind user behavior, the what of our design decisions becomes surprisingly clear.

Research & Discovery

User Research Methods

Primary Research:

• 5 in-depth user interviews with frequent grocery shoppers

• 11 survey responses across demographics

• Competitive analysis of 3 grocery and shopping apps

Secondary Research:

• Industry reports on grocery shopping trends

• Analysis of customer service complaints from major grocery chains

• Mobile commerce behavior studies

Journey Mapping

Through our research, we identified five critical stages in the grocery shopping journey:

1. Pre-Shopping Planning - List creation, meal planning, coupon gathering

2. Store Entry - Orientation, cart selection, initial navigation

3. Item Collection - Finding products, comparing prices, managing quantities

4. Checkout Process - Payment, bagging, receipt management

5. Post-Shopping - Unpacking, meal prep, expense tracking

Storyboard

Why I Used Storyboards for My Grocery App Case Study

I chose storyboarding because I needed to show the full context of how people actually use grocery apps—not just what happens on the screen, but what's happening in their real lives.

Beyond the Interface

Wireframes and user flows show the app experience, but they don't capture the chaos of grocery shopping in real life. A storyboard let me illustrate Sarah frantically adding items to her cart while her kid is having a meltdown in the backseat, or show how the app fits into the bigger picture of meal planning, shopping, and cooking.

Emotional Context Matters

The storyboard helps stakeholders understand that the app isn't competing with other apps—it's competing with the stress, time pressure, and mental load of grocery shopping. Seeing a visual story of someone's entire grocery journey made the emotional pain points impossible to ignore.

Communicating the Vision

It's one thing to say "users need a seamless checkout experience." It's another to show a tired parent finally getting through checkout while their groceries are being loaded, feeling that moment of relief. The storyboard made the human impact of good design tangible for everyone on the team.

Storyboards turned abstract user needs into relatable human moments that everyone could understand and design for.

Design Process

Information Architecture

We structured the app around four core pillars that address our users' primary needs:

1. Smart Lists - AI-powered shopping lists with recipe integration

2. Savings Hub - Centralized deals, coupons, and price comparisons

3. Store Navigator - Interactive maps and item location services

4. Express Checkout - Streamlined payment and pickup options

User Flow Design

Primary User Flow: Complete Shopping Experience

Grocery App User Flow

Entry Point

Users begin their journey on the Home screen, which serves as the main landing page for the grocery shopping app.

Authentication Path

From the home screen, users have two authentication options:

Option 1: Account Creation

• Users can select Create Account to register as new users

• After account creation, they proceed to the Login screen

• Once logged in, they access the main shopping features

Option 2: Existing User Login

• Users can go directly to Login for existing accounts

• Successful login leads to the main shopping experience

Option 3: Guest Access

• Users can choose Continue as Guest to bypass registration

• This provides immediate access to shopping features without creating an account

Main Shopping Experience

Once authenticated (or as a guest), users can access four primary shopping methods:

1. Recipe-Based Shopping

• Shop Recipes: Browse and select from curated recipes

• Users can search for specific recipes or ingredients

• Selected recipe ingredients automatically populate the cart via Add to Cart

2. List-Based Shopping

• Shop Grocery List: Access pre-made or custom grocery lists

• Items can be added directly to cart from the list

• Streamlined shopping for routine purchases

3. Discount Shopping

• Shop Discounts: Browse current deals and promotional items

• Users can search through discounted products

• Discounted items can be added to cart

4. General Search

• Search: Open search functionality for finding specific products

• Universal search across all product categories

• Direct path to Add to Cart for found items

Cart and Checkout

All shopping paths converge at the Add to Cart functionality, where users can:

• Review selected items

• Modify quantities or remove items

• Proceed to Checkout when ready to complete their purchase

User Flow Summary

The flowchart demonstrates a flexible shopping experience that accommodates different user preferences—from recipe inspiration to quick list shopping to deal hunting—while maintaining a consistent path to purchase through the centralized cart and checkout system.

Wireframing & Prototyping

Low-Fidelity Wireframes: Started with paper sketches focusing on core navigation and task flows. Tested basic concepts with 12 users through guerrilla testing sessions.

High-Fidelity Prototypes: Developed pixel-perfect designs with micro-interactions and real content for final validation testing.

Design Solutions & Key Features

1. Intelligent Shopping Lists

Problem: Users forget items and struggle with meal planning coordination.

Solution: AI-powered lists that learn from purchase history and integrate with recipe suggestions.

Key Features:

• Auto-categorization by store layout

• Recipe-to-list conversion with one tap

• Smart suggestions based on purchase patterns

2. Comprehensive Savings Hub

Problem: Users miss relevant deals and struggle with coupon management.

Solution: Centralized savings dashboard with personalized deal curation.

Key Features:

• Digital coupon clipping with auto-application

• Price comparison across local competitors

• Personalized deals based on purchase history

• Cashback tracking and reward management

3. Store Navigation System

Problem: Users waste time searching for items in unfamiliar store layouts.

Solution: Interactive store maps with real-time item location and optimized routing.

Key Features:

• Turn-by-turn navigation to each item

• Route optimization for efficient shopping

• Real-time inventory updates

• Alternative item suggestions when products are out of stock

4. Express Checkout Integration

Problem: Long checkout lines and payment friction create frustration.

Solution: Integrated payment system with multiple checkout options.

Key Features:

• Stored payment methods with biometric security

• Skip-the-line mobile checkout

• Integration with store loyalty programs

• Digital receipt storage and expense categorization

Visual Design System

Design Principles

Brand Identity

• App Name: Patrick's

• Logo: Minimalist yellow half-sun icon over text

• Color Palette:

  • Primary Green: #2B8A14 (buttons, header bars)

  • Sun Yellow: #FFCD45 (highlight bars, accents)

  • Warm Gray: #A3A0A0 (backgrounds)

  • Black/Charcoal: #222222 (text)

  • White: #FFFFFF (background, contrast text)

Typography

• Primary Font: Jost, or system default

• Font Weights: Regular, Medium

• Font Sizes:

  • Headers: 75 pt

  • Subheaders: 25–30 pt

  • Body text: 20 pt

  • Button text: 14 pt (uppercase or bold)

    
    

UI Components

Buttons

• Primary Button (Green):

  • Fill: #4CAF50

  • Text: White

  • Rounded corners (6–8px radius)

• Secondary Button (Outline):

  • Border: #4CAF50

  • Text: #4CAF50

  • Background: Transparent

Checkboxes

• Square with checkmark when selected

• Right-aligned in list items

• Color: Green border with filled green check on active

Navigation Bar

Bottom Navigation Icons:

• Home

• Deals

• Scanner

• Cart

• Top Search Bar: Rounded white input field with magnifying glass icon

Screen Templates

Splash / Login Screen

• Logo centered with Sign In, Create Account, and Guest Login buttons

• Clean white background

Shopping List

• Scrollable list of items with:

  • Thumbnail

  • Name

  • Aisle/Location info

  • Price

  • Quantity

  • Checkbox

Deals & Coupons

• Two primary CTA buttons: "Weekly Deals" and "Coupons"

• Bold yellow header, grocery image in background

Store Navigation

• Aisle map of store

• Dropdown or input field to locate items

• Search bar

Shopping Summary

• Displays:

  • Item count

  • Shop time

  • Total cost

  • Savings

• Express Checkout and Checkout buttons

UX/UI Principles

• Clarity First: Simple UI, high readability, direct interaction paths

• Efficiency: Quick access to tools (e.g., item locator, coupons, floor map)

• Assistance: Location guidance, estimated shopping time

• Gamification: Time tracking & savings for motivation

Icons

• Minimal line icons used in navbar

• Consistent thickness

• Common icons:

  • 🏠 Home

  • 🔎 Search

  • 🧾 Cart

  • 🗺️ Map

  • 🏷️ Deals

Spacing & Layout

• Padding/Margin: 12–16px standard spacing

• Card/List Item Height: ~70–90px

• Section Padding: Consistent on all edges for mobile responsiveness

States

• Buttons:

  • Default, Hover, Pressed

• Checkboxes:

  • Unchecked, Checked

• Search Field:

  • Default, Focused, With Results

• Navigation Icons:

  • Active (green), Inactive (gray)tion

  
  

Usability Testing Rounds

Round 1: Concept Validation

• 5 participants tested core user flows

• 85% task completion rate

• Key finding: Users wanted more prominent deal notifications

Round 2: Design Refinement

• 8 participants tested refined prototypes

• 94% task completion rate

• Key finding: Navigation could be simplified with breadcrumbs

Round 3: Final Validation

• 9 participants tested final designs

• 97% task completion rate

• Average time to complete shopping list: 3.2 minutes (down from 8.7 minutes)

  
  

  
  

  

Results & Impact

Quantitative Outcomes

Disclaimer

Please note: The quantitative data, metrics, and performance results presented in the "Results & Impact" section of this case study are hypothetical and have been created for demonstration purposes only. These figures are not based on actual project outcomes but have been developed to showcase a complete case study framework and demonstrate how real-world results would be measured and presented.

This approach allows for a comprehensive illustration of project management methodologies, success measurement techniques, and impact assessment strategies that would be applied in an actual project scenario.

User Engagement:

• 73% reduction in average shopping time

• 45% increase in coupon usage

• 89% of users complete shopping lists

• 4.7/5 average app store rating

Business Impact:

• 23% increase in customer retention

• 34% boost in average transaction value

• 56% reduction in customer service calls

• 12% improvement in inventory turnover

  
  

Qualitative Feedback

"This app has completely changed how I shop. I actually look forward to grocery shopping now!" - Beta User

"The navigation feature saved me 20 minutes last week when I was shopping at a new store location." - Beta User

"I'm saving about $40 per month with the deals I find through the app." - Beta User

Success Metrics

Primary KPIs:

• Time to complete shopping trip: 43 min → 16 min (63% reduction)

• Items forgotten per trip: 3.2 → 0.8 (75% reduction)

• Coupon usage rate: 12% → 54% (350% increase)

• Checkout satisfaction: 6.2/10 → 9.1/10 (47% improvement)

  
  

  
  

Lessons Learned & Next Steps

Key Learnings

User Behavior Insights:

• Shoppers prioritize time-saving over extensive feature sets

• Trust in payment security is crucial for adoption

• Personalization significantly improves engagement when done subtly

Technical Considerations:

• Real-time inventory integration requires robust backend systems

• Offline functionality is essential for poor connectivity areas

• Battery optimization is critical for extended shopping sessions

Areas for Improvement

Immediate Iterations:

• Enhanced voice search functionality

• Better integration with smart home devices

• Expanded dietary restriction filtering

Future Roadmap:

• AI-powered meal planning with nutritional analysis

• Social features for family shopping coordination

• Integration with grocery pickup and delivery services

• Sustainable shopping recommendations

Personal Growth

This project significantly enhanced my skills in:

• Complex information architecture design

• Accessibility-first design thinking

• Data-driven design decision making

The challenge of balancing user needs with business constraints while maintaining a seamless experience taught me the importance of collaborative design processes and iterative validation.

Conclusion

The Patricks grocery store app successfully addressed core user pain points through thoughtful design and rigorous testing. By focusing on efficiency, savings, and user empowerment, we created a solution that not only improves the shopping experience but also delivers measurable business value.

The project demonstrated that effective UX design in the grocery space requires deep understanding of both digital and physical shopping behaviors, careful attention to accessibility, and seamless integration between online and offline experiences.