Case Study · Food & Nutrition · AI

MealMap

Using AI to take the guesswork out of grocery shopping and meal planning — learning your preferences, dietary needs, and budget to plan, shop, and navigate for you.

Role UX Research & Design
Responsibilities Research · Wireframing · Prototyping · WCAG 2.1/2.2
Duration 2.5 months
Platform Mobile (iOS & Android)
Read the study Skip to final design ↓
MealMap app concept illustration
🧠
AI-Powered
Learns your preferences
Research
9
User interviews
9
User interviews · ages 24–64
11
Think-aloud usability tests
5
Research themes identified
4
Design phases
The Problem

No single app does all of it.

The grocery and meal-planning app landscape is deeply fragmented: one app to plan meals, another to navigate the store, a third to manage the pantry, a fourth to look up recipes. None of them talk to each other, and none of them adapt to your personal needs.

MealMap was designed to change that — a single, AI-powered experience that covers the entire journey from "what's for dinner tonight" to finding it on the shelf, while staying accessible to users with diverse needs.

No grocery shopping app creates meals, remembers when your favorites are running out, manages your pantry, allows you to import recipes from anywhere, helps you navigate to your items in the store, and adapts to user accessibility needs — all in one app.

Design Question
How might we help adults plan meals and shop more easily by using narrow AI to auto-build budget-aware lists, find the best store(s) and prices, plan multi-stop routes, and guide in-store item finding — while staying accessible for diverse needs?
01 — Discovery

What we heard when we actually listened.

9 individuals — ages 24 to 64 — were interviewed on their grocery shopping habits, technology usage, pain points, and accessibility needs. Two participant quotes crystallized the core problem space immediately.

User Interviews
"
We just stopped [meal kit service] because we don't like making those decisions — what to make for dinner. So, even though [meal kit service] is probably more expensive, it's so easy just to not think about what's for dinner tonight.
Participant 7 — decision fatigue around meal planning
"
When they do a reset, I can't find anything… I have to look up at the aisles and see where things are listed.
Participant 2 — in-store disorientation after store resets
User Journey Map
User Journey Map showing friction points in the grocery shopping experience
The journey map surfaced recurring friction points: losing a written grocery list, recipes scattered across multiple locations, and struggling to locate items once inside the store.
02 — Define

Turning interviews into clear direction.

Thematic analysis of the 9 user interviews produced 5 clear themes. Competitive analysis confirmed no existing app addressed all of them — revealing a genuine market gap.

Thematic Analysis — 5 Themes
🍽️ Planning & Meal Decisions 🗺️ Store Navigation 📱 Digital Tool Adoption 😤 Pain Points & Barriers 💰 Substitutions & Budgeting
Core Gaps & Problems Identified
  • 01Meal planning and decision fatigue — the mental load of "what's for dinner" pushes users to costly meal-kit shortcuts
  • 02No "all-in-one" app exists — users manage meals, groceries, pantry, and cooking across 3–4 disconnected tools
  • 03Trouble locating items in stores — especially after resets or in unfamiliar locations
Competitive Analysis
Competitive analysis matrix showing gaps across existing grocery apps
No existing app addresses all parts of the grocery shopping experience — confirming a clear design opportunity.
Task Analysis
Task analysis diagram mapping the full user journey
Task analysis mapped the full flow from meal planning to cooking — revealing where handoffs between tools break down and create friction.
03 — Ideate

From blank paper to tested wireframes.

Ideation began with hand sketches across all major flows, then rapidly progressed to low-fidelity wireframes for usability testing — before any visual design was applied.

Hand Sketches — Early Ideation
Hand sketch - home and dashboard flow
Home & Dashboard
Hand sketch - recipes and meal planning
Recipes & Meals
Hand sketch - grocery list
Grocery List
Hand sketch - in-store navigation
In-Store Navigation
B&W Wireframes
Home dashboard wireframe
Home Dashboard
Grocery list wireframe
Grocery List
In-store navigation wireframe
In-Store Navigation
AI meal suggestion wireframe
AI Meal Suggestion
Design Iterations

What changed. And why.

Testing showed which flows needed another pass before high-fidelity design. These two small but powerful changes had the biggest impact on the final product.

01
Confirming items in cart

From auto confirmation to digital scratch off

Before
Meal planning wireframe before iteration
Problem identified

Users were confused by the auto-confirmation that they had added an item to their basket once they tapped on the live map for new directions.

After
Recipes screen after iteration
Design decision

By adding a simple checkbox, users were able to gain back a sense of control or that internal confirmation of "I got my item", similar to when they would scratch it off of a hand written list.

Result
Users gained confidence in their purchasing ability.
02
Live Maps

From manual list-building to a smarter handoff

Before
Grocery list wireframe before iteration
Problem identified

While users liked the 2D maps, several participants reported grocery shopping can be overwhelming, especially when the store is busy, so a map that didn't match their mental model (i.e. high shelves, narrow aisles) added to cognitive load.

After
Grocery list screen after iteration
Design decision

I added a 3D map option to mimic the real feel of the store and match user expectations.

Result
Users felt more confident in where they were in the store and what to expect.
What iteration taught us
Mental models matter
If you design for all ages and all abilities, you will develop a more well-rounded and well-received product sooner.
Involve users sooner rather than later.
Talking to your potential users early on can save you time and effort in the end.
The little things make a big difference
I didn't expect a simple button here or there to create real change in users' minds, but those little details created real results.
Final Design

Six screens. One complete experience.

The final solution unifies onboarding, recipes, food inventory, grocery lists, in-store navigation, and error handling into a single AI-powered app — each screen built around accessibility and reducing friction.

Onboarding screens
Onboarding
  • 3 sections: Dietary Needs, Accessibility Needs, and Personalization Preferences
  • Ensures AI tailoring is user-need-first from day one
  • Multiple filtering inputs per section
Recipes screen
Recipes
  • AI-generated meal plans and single meals
  • Upload from outside sources, write your own, or browse recent & favorited
Food inventory screen
Food Inventory
  • Quick view of 'Expiring Soon' and 'Low Stock' items
  • Categorized by pantry, refrigerator, and freezer
  • Helps users manage food and prevent waste
Grocery list screen
Grocery Lists
  • AI-generated, from previous lists, or write your own
  • AI learns behavior: "you already have milk," "you normally buy cinnamon with oatmeal"
  • Catches missed items, prevents buying extras
In-store navigation screen
In-Store Navigation
  • Optimized route using cell phone GPS and store layouts
  • Guides users to items in the most efficient path
  • Substitution suggestions when items are out of stock
Error handling screen
Error Handling
  • Graceful fallbacks when connectivity or AI fails mid-shop
  • Options: reconnect, shop offline, check out later, or get human assistance
  • Users are never left stranded — AI and technology are not infallible
Video Walkthroughs

Walkthroughs. Narrated with my design decisions.

An in-depth explanation on why I made certain design choices.

Onboarding
Recipes
Food Inventory
Grocery Lists
In-Store Navigation
Error Handling
04 — Validate

Testing showed us where to push harder.

A mixed-methods testing approach combined qualitative depth with quantitative scoring — giving a complete picture of what was working and what still needed iteration.

Qualitative
Think-Aloud Testing
  • 11 think-aloud interviews
  • Sentiment analysis across all sessions
  • 1 open-ended trust question focused on AI reliability
Quantitative
Scoring Frameworks
  • SEQ — Single Ease Question per task
  • NPS — Net Promoter Score
  • SUS — System Usability Scale
  • DRT — Desirability, Reliability & Trust of the AI
Sentiment Analysis
Sentiment distribution chart showing shift to positive after iteration
Participants had an overall more positive attitude towards MealMap after the first round of iteration — sentiment shifted meaningfully toward positive and neutral responses.
Quantitative Results
Quantitative scoring results post-iteration
Post-iteration, both main tasks (planning a meal and in-store navigation) reached acceptable SEQ scores. SUS, NPS, and DRT all improved.
Score Improvements After Iteration
SEQ ↑
Single Ease Question
Both tasks at acceptable threshold
SUS ↑
System Usability Scale
Improved overall ease of use
NPS ↑
Net Promoter Score
Significantly more promoters
DRT ↑
AI Trust Score
Improved AI desirability & trust
Lessons Learned & Reflection

What worked. What I'm still solving.

🏆 Wins
  • Users reported really enjoying the ease of AI-generated meals. The decision fatigue of meal planning was directly addressed — and user needs were genuinely met.
  • Reminders to add frequently-used items to the grocery list was a standout favorite feature — users described it as feeling helpful rather than intrusive.
🔧 Challenges
  • In-store navigation remains the biggest friction point. Using the live map to select and confirm items had too many steps — we moved confirmation to the list itself rather than a map pop-up, but this interaction is still being actively iterated on.
  • During testing, many participants focused on completing the end goal rather than exploring the app — leading to missed features. I learned it's important to explicitly prompt testers to explore naturally, not just task-complete.
Next case study
Autonomous Rideshare