Ingredient Inventory

Cooking App UX Case Study

What's the problem to solve?
Create a cooking app to help users discover new recipes and shop for groceries using ingredients they have at home. Focus on busy professionals balancing fast-paced lifestyles with home cooked meal prepping.
What does success look like?
Everybody eats food. But nobody likes eating the same food all the time. Recipes are the key to finding new meals you’ll love to share. Unfortunately nobody loves finding and saving those recipes for use later.
Contributions
Lead UX Designer/Researcher
tasked with creating ingredient app from concept to final product.

The Process

Research selected
Grayed out Ideation: User Flow + Wireframes
Grayed out Prototype: Low Fidelity + User Testing
Grayed out Iteration: High Fidelity + Mockups
User Research
For this project I conducted surveys and created personas to help define the problem to be solved and goals of the app. The primary user group identified through research was busy professionals who don’t have time to cook meals.
Over the course of 2 usability studies, multiple interaction issues were uncovered and iterated out of the initial digital wireframes.
At the conclusion of the second study, user feedback was reassessed and implemented to arrive at the final high-fidelity designs.
Pain Points
Pain Points 1. Lost Recipes 2. Duplicate Purchases 3. Apathy to Cook 4. Multiple Grocery Trips
User Journey Map
User Journey Map 1. Pick Recipes 2. Go to Store 3. Pick up Ingredients 4. Unload Groceries 5. Cook Meal
research grayed out
Ideation: User Flow + Wireframes
Grayed out Prototype: Low Fidelity + User Testing
Grayed out Iteration: High Fidelity + Mockups
User Flow

Brainstormed 5 options for the layout of the home screen and ended up making a digital wireframe that combined parts of multiple designs from “A” and “D”

User Flow: Open app > Select recipes > Select favorites or new > Review new recipes > Add ingredients to shopping list
Storyboard

Brainstormed 5 options for the layout of the home screen and ended up making a digital wireframe that combined parts of multiple designs Design “A” and “D”

Storyboard: User finds app>login as new user>select all ingredients they have>select recipes for this week>app lists additional ingredients needed>user shops for ingredients needed
Digital Wireframes

Brainstormed 5 options for the layout of the home screen and ended up making a digital wireframe that combined parts of multiple designs from “A” and “D”

5 Paper Wireframes Used part of design A to sort, Used part of design D to show upcoming meals
research grayed out
Grayed out Ideation: User Flow + Wireframes
Protoytype: Low Fidelity + User Testing
Grayed out Iteration: High Fidelity + Mockups
Low-Fidelity Prototype

The initial low-fidelity prototype focused mainly on the user flow of finding a new recipe and saving it for later. The basic navigation and structural elements were implemented, with a focus on function over form.
‍
View the Ingredient inventory Low-Fidelity Prototype here

Low Fidelity Prototype showing 10 screens and their connections
Usability Studies
Usability study 1 Participants: 5 full time working individuals that cook 2-7 times a week Length: 30 minutesUsability study 2 Study Type: Round 1 unmoderated, Round 2 Moderated Location: United States, Remote
Round 1 Findings: 1. Trouble Identifying different screens 2. Confused by ingredient Tracking 3. Preferred wider selection of recipes
Added quick expanding tab to reduce navigation. Added visual indicators on footer to show where user was in the app
Round 2 Findings: 1. Trouble noting changes in favorites 2. Preferred simplified ingredient layout 3. Want more shopping/social features
Made categories scrollable for quick browsing. Made footer float above content to improve improve recipe visability
research grayed out
Grayed out Ideation: User Flow + Wireframes
Grayed out Prototype: Low Fidelity + User Testing
Iteration: High Fidelity + Mockups
High-Fidelity Protoype

The final high-fidelity prototype presented cleaner user flows for finding a new recipe and saving it for later.
It also met user needs for tracking existing ingredients and picking recipes based on the items they already had.

Try out the high-fidelity prototype below!

Mockups

Created a final mockup showcasing the experiences created, highlighting the use of circular elements to draw denote user-specific menus

Project 1 mockups: 7 diagonal left images
Accessibility
Include high contrast interface colors
attach recipe names to images
large clickable buttons

Going Forward

In this project I learned to keep an open mind to different user needs and values while designing and interacting with different app experiences. Most of the difficult decisions were made easy when I took a step back and viewed the interaction from the point of view of one of my personas developed earlier.
Takeaways
Next Steps
< Back to All ProjectsBoard Game Redesign Website Update ProjectArt Class Case Study

Want to get in touch?

For discussions about my work or any future projects feel free to reach me at coreyuxdesign@gmail.com

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.