Overview

WhatSupper is a mobile app designed to help low-income families find affordable, nutritious meals by utilizing discounted grocery flyers. The goal is to simplify meal planning, help users make informed, budget-friendly choices, and reduce food waste while promoting healthier eating habits.

As a UX Researcher:

I led user research to create an easy-to-use experience for grocery flyer browsing, meal planning, and budget-friendly shopping. My role involved understanding user needs, identifying challenges with meal access, and improving app features to help families facing food insecurity cook affordable, nutritious meals.

Problem

Food insecurity is a major challenge for underrepresented communities, especially for families struggling to afford nutritious meals. Many have difficulty finding affordable, healthy food and are often unaware of available grocery discounts. Meal planning on a tight budget while ensuring nutrition is also difficult, leading to food waste and unhealthy eating habits.
Our research through surveys and interviews revealed key pain points that contribute to this issue:

Many families miss out on savings because they are unaware of discounted items in grocery flyers.
Meal planning is difficult for families, as they often feel overwhelmed by the need to balance nutrition and affordability.
.Time constraints make it hard for families to cook healthy, affordable meals due to busy schedules.

To tackle food insecurity, we developed WhatSupper, a mobile app that helps low-income families find affordable, nutritious meals using discounted grocery flyers. The app simplifies meal planning, helping families make informed, budget-friendly choices while reducing food waste and promoting healthier eating.

User personas were identified based on challenges related to food affordability, meal planning, and budgeting.

Solution

Site Map

The designers created a clear site map to outline the app’s structure and user flow, ensuring an intuitive and simple experience.

Lofi Protype

Based on the site map, they developed low-fidelity wireframes in Figma, focusing on efficient information delivery and ease of use.

Styleguide

The designers established a style guide using Manrope font and a green/yellow color palette to convey health and freshness. They also developed a design system for consistency and reusable components.

User Testing

To ensure an intuitive and user-friendly experience, we conducted three rounds of usability testing over three weeks. Each session involved 4–6 participants and focused on refining the app’s functionality based on user interactions and feedback.

Key Usability Tests and Findings

Test 1 : Evaluating Core Features

Objective: Assess the initial prototype, focusing on the flyer-scanning process, recipe generation, and navigation flow.

Findings:

The scanning feature was well-received, but users wanted clearer instructions on how to use it effectively.
Some participants had difficulty editing their ingredient list after scanning.
The recipe interface provided useful information but needed better visual cues for ingredient recognition.

Improvements Implemented:

Introduced an onboarding guide to walk users through the scanning process.
Enhanced ingredient list editing for greater flexibility.
Added visual highlights to make scanned ingredients more distinguishable.

Test 2: Enhancing Navigation & User Interaction

Objective: Measure ease of use, task completion efficiency, and accessibility of key features.

Findings:

Navigation was mostly intuitive, though some users struggled to locate the personalized ingredient list.
The "Rescan" function was not immediately visible, leading to confusion.
Recipe details, such as calorie count and cooking time, needed better visibility.

Adjustments Made:

Relocated the "Rescan" button to a more prominent position.
Improved layout and typography to emphasize important recipe details.
Optimized the ingredient management process for smoother interactions.

Test 3: Final Refinements & Validation

Objective: Confirm the effectiveness of previous improvements and evaluate overall user satisfaction.

Findings:

Participants found the app more intuitive after the latest updates.
The refined layout improved the readability of recipes and step-by-step instructions.
Some users requested additional filtering options to accommodate dietary preferences.

Final Enhancements

Added dietary preference filters to improve customization.
Introduced a streamlined navigation bar for quicker access to essential features.
Adjusted the app’s visual hierarchy for a cleaner and more user-friendly interface.

Hi-fi Prototype

Onboarding + Tutorial
Home/Explore Page
Recipe Generation
Saved/profile

Key Learnings

Not a Universal Solution

WhatSupper helps with meal planning but doesn’t solve the root causes of food insecurity, such as poverty, unemployment, and lack of access to housing or healthcare. It’s a tool to support individuals and families, but addressing systemic issues requires broader strategies at multiple levels.

Collaboration and Communication:

‍Collaboration and Communication: Our team faced challenges with different skillsets and work habits. To improve teamwork, I set clear expectations, defined deliverables, and implemented weekly standups, ensuring we met our goals and advanced app development.
‍Continuous Improvement: Rapid prototyping was key to addressing user pain points. As food insecurity and technology evolve, it's essential to stay adaptable and continuously iterate to meet user needs.