Culinary
Companion
Helping users make the most of their ingredients with AI-driven recipe suggestions tailored to their preferences and health needs.
Overview
A design exercise focused on creating an end-to-end app. This project involved user research, data analysis, and defining user goals to design a solution that meets users' needs. Usability testing and iterative improvements helped refine the interface and address UI challenges.
My Role
User research
Branding
Wireframing
Prototyping
Usability testing
Team
Solo project
Duration
5 weeks
The Problem
Although people generally recognize the benefits and joy associated with cooking, figuring out what to cook can feel discouraging.
With a plethora of recipes to discover, individuals are required to expend additional time and effort before they can start cooking.
This case study explores how utilizing generative AI can address these issues by offering personalized recipes
How might we help users quickly find recipes that meet their preferences while utilizing their leftover ingredients in order to reduce food waste?
The Solution
01 The Research
Searching for recipes and wasting ingredients is no fun.
We conducted secondary research to explore people’s relationship with cooking and common challenges. Then, we interviewed 7 home cooks to understand the specific issues they face and their cooking process from start to finish.
Tap to view their interview
User pain points
1
Guilt from letting leftover produce go unused and wasted.
2
Takes too long to find recipes that match their needs.
3
Instructions for recipes are hard or confusing to follow.
Visualizing our user insights into a persona.
02 Ideate
Solving the problem using generative AI.
Referencing our persona, we setup a list of creative constraints and came up with ideas to resolve a singular problem for each constraint within 5 minutes. It was important to find an idea that could prioritize the act of finding a recipe based upon our user research. So among the 20 different ideas, we selected 1 that could best target our user goals.
Generative AI has the potential to be robust and personable for the user.
1
Users can input their preferences and find recipes that fit their interests, health, and dietary needs.
2
Users can input readily available ingredients and find recipes that'll utilize their ingredients efficiently.
User Flow
This flow demonstrates the ideal steps for a user to reach their goal following the user story. While constructing wireframes and prototypes, design decisions referenced the user flow to ensure design decisions stayed within scope of user goals. However, this process wasn’t linear and multiple iterations occurred between the screen designs and user flows.
Low Fidelity Wireframes
Home screen
Recipe search history
Recipe suggestions
Recipe details ver. 1
Recipe details ver. 2
Recipe instructions
03 Product identity
Designing the logo and brand identity
The name of the app focused on two words to represent cooking and guidance while utilizing alliterations to sound catchy. Keywords and images were used to help devise the brand identity and color palette. Originally more colors were considered, but it was decided to utilize a more neutral tone to help elevate the colors of dishes instead.
Culinary Companion
Joy and creativity
•
Health and well-being
Sustainability
•
Independence
•
Inclusivity
•
Simplicity
Toasted Spice
#794620
Brown Sugar
#794620
Vanilla Cream
#FFF8F5
Harmonizing
Your cooking
Your recipes
04 Prototyping
Testing design choices
As the number of wireframes created reached the appropriate amount for users to sufficiently reach their goals, multiple usability tests were conducted to ensure design choices were intuitive for the user. Although there were multiple iterations moving forward and back throughout the process, here are some of the issues identified from usability tests, their design changes and following solutions.
Usability testing
Early usability tests had prototypes that were more linear, but towards the end of the project with each insight, prototypes were designed to allow users to be flexible with their decision making to best observe user experiences.
05 Iterations
AI suggested recipes screen
Substituting Ingredients iterations
Tap ingredient
Substitute screen
Problem:
How can we provide visual cues to user that they can swap ingredients? [Skip to solution]
Design goals:
To have a visual cue indicating the ingredients are interactable and expectations for what will happen when users interact with it. Then ensure that it still looks visually balanced and cohesive with the overall style of the app.
Clear visual cue
Clear expectations
Visually balanced
Add toggle button
Enabling will highlight ingredients that users can tap to make substitutions
Problems
Text may not be noticeable
Long ingredient lists will cause users to scroll to select
Solution
Making the ingredient elements intuitively interactable is ideal
Swipe Interactions
Design goals:
Clear visual cue
Clear expectations
Visually balanced
Usability test results
100% participants enjoyed the interaction
50% recognized the visual cue
Tapped or pressed the button instead of swipe
Approach to solution
In order to preserve the swiping experience, I explored methods to bridge the gap for users to recognize the interaction easier.
Solution
Tapping slides the ingredients to the side to reveal a button to swap. Although it takes an additional action, it was most clear to our users.
Design goals:
Clear visual cue
Clear expectations
Visually balanced
Final design
Reflection
Each project has a main theme or skill that I explore and for this project, it is user goals. When it comes to personal projects, I’ve realized that the freedom of creativity that comes with it also brings design decisions that can fall out of scope. A mistake I’ve experienced in the past, I wanted to improve upon with this project by tying designs and their iterations back to satisfying the users' needs. This was an issue that I’ve expressed with others when obtaining feedback and my mentor, who have helped me stay on track and within scope of my project.
During the process, I have also learned about the barriers to using AI generative content in regards to cooking such as health concerns and the reliability of the recipes they generate. However, in a scenario where this would be a non-issue, I found that these features were useful to the user based tested with. It gave them ease of access to personalized recipes and excitement to discover new recipes.
Improve accessibility throughout
The body text for the recipe instructions are 18px with extra spacing in between lines to improve readability and skimming while users are busy cooking. However, this attention towards accessibility could be further improved throughout the design. For example, the text size within the badges and recipe info are minimally 12px in order to fit nicely, but I believe that future projects should strive for better accessibility.
Non-leading tasks during usability test
When testing the usability for swiping the ingredients, I had tasks asking participants to interact with the it. However, I realized that in doing so, I am telling them that the element is interactable before they’re able to make their own observations.
So to improve upon this, I asked participants to express their thoughts on the screen and their expectations before taking any actions. This provided more accurate results on user expectations and the intuitiveness of the interactable elements.
Additional features: cooking guide
Due to the time constraints and scope of the project, these ideas couldn’t be realized, but were still important features that could enhance the user experience.
Some users have expressed that following instructions can be difficult or confusing depending their skill level. So to bridge that gap, I tried exploring ways in which users can find assistance with unfamiliar cooking steps.
Previous Project
Next Project
