What?
Who?
Why?
A cooking app to put a little “pepp” in your meal prep
Those who cook at home but lack time and inspiration
Those who are overwhelmed deserve a streamlined meal planning and preparation process
Team Size:
1 designer
Role:
UX Researcher, UX/UI Designer
Time Frame:
4 months
Deliverable:
1 functioning prototype
Toolkit:
Figma, FigJam, Adobe Illustrator, Maze
How might we...
make finding inspiration for a meal straight forward and faster for the user?
Research
Competitive Analysis
Through reviewing other established cooking apps we can better understand features that are popular with users. The apps ranged from highly detailed like Umami, to very simplistic like SuperCook.
Additionally, identifying gaps in the market is perk.
In person & Virtual Interviews
By speaking with users on their cooking experiences and habits in the kitchen we can better understand specifically what kind of product would be most beneficial.
User Priorities:
Variety of ingredients
Simplicity in process
Exploring new foods
Timeliness preparation
Health forward options
“If I start too big it feels overwhelming and I’ll never do it.”
“It’s a whole thing where you have to figure out what to eat, then go to the store, and make sure you have enough food.”
“I’m trying to make it as easy as possible.”
Sample Question:
What kind of activities are you balancing in your daily life?
What we want to know?
How much time and mental capacity the user has available for tasks like cooking
Sample Question:
What are your main goals when preparing meals?
What we want to know?
How we can narrow down the product features to ensure they are important to users
Sample Question:
Are there any changes you would make to the cooking process?
What we want to know?
What is difficult for users for this topic and what they would need to improve their habits
User Dislikes
Thinking of new ideas
Going grocery shopping
Overwhelming
USER PERSONA
Name: Kaitlyn
Age: 33
Location: Los Angeles, CA
Family Status: single, no children
Occupation: Therapist
Hobbies: yoga, journaling, hiking, reading, she’s interested in it all!
Community: Kaitlyn is active in advocating for social and political justice on social media. She is too overwhelmed from her mentally demanding workload to heavily participate in her community. However, she enjoys socializing with her yoga and hiking friends.
“I usually prefer my meals to be quick, not overwhelming”
Overwhelmed day-to-day activities are exhausting which leaves little mental capacity for meal prepping
Nutrition a variety of food sensitivities makes gathering ingredients stressful
“If I start too big it feels overwhelming and I’ll never do it”
To the point grocery stores are a dreaded place so straight forward information to complete tasks as soon as possible are vital
Doable feeling accomplished about creating a meal is imperative
Needs
“I’m trying to make it as easy as possible.”
Motivations
Efficiency
Taste
Variety
Health focused
What I learned from the Sitemap
Having the screens mapped out so visually is beneficial for double checking which features are absolutely necessary to include.
Priorities
Easily scrollable inspiration page
Interactive step by step cooking instructions
A simplified grocery list for focused shopping
What I learned from the User Flow
With more required screens than originally expected, it was important to narrow down the overall user goals to zone in on their needs.
Design
Lo-fi User Test
Test A Goal:
Find the most clear option for laying out the New Recipe main screen.
Test B Goal:
Confirm if any unnecessary elements are included on the screen.
Participants:
5 Users
Patterns:
Comments of text being disruptive to flow based on its positioning. Vertical reading would prove more effective than horizontal + vertical.
Surprises:
The consensus from all users in which screens would provide the most clear path to move through
Considerations:
The design must be easy to find navigation paths for following along
What I learned from Lo-fi Wireframes
A hierarchy of elements is vital for good communicative design. This happens early in the defining stage but is best showcased for the first time in lo-fi wireframes.
Logo Development
It was important to have a clean and eye catching logo. This would include minimal details yet it was necessary to have a playful and inviting aesthetic to be inviting for users.
The idea was to play with cooking related shapes to incorporate into the logo. Utensils were an early option but were not working as they appeared too cluttered.
The final option used a pepper and stem.
Final Logos
HIGH DETAIL LOGO
DESKTOP LOGO
MOBILE LOGO
Color Inspiration
Colors were pulled from natural colors occurring in various types of peppers.
Different shades of each bright color are used to create dimension.
The colors read bright, fresh, and fun which is also what users want their meals to be like.
Final Colors
Primary Color
#38732E
#9BC793
#8AC447
#CFF5A4
#F4FFE8
#F3B91A
#FFDE85
#FFF5DB
Secondary Colors
#871317
#DF1F26
#DE6A6E
#FAD9DA
Neutral Colors
#212121
#FEFEFE
#E0E0E0
Typography Goals
The main goal for the typography was for ease of reading and stress. Sans serif was the best option to reach this goal as it is inviting.
The smooth corners of the main text, Nunito, convey joy and creativity.
Final Typography
Bauhaus 93, Regular, various
LOGO
Nunito, Black, 50px
CALL TO ACTION 1
Nunito, ExtraBold, 40px
HEADING 1
Nunito, Bold, 28px
SUB HEADING 1
Nunito, SemiBold, 24px
SUB HEADING 2
Nunito, Medium, 20px
SUB HEADING 3
Nunito, Regular, 18px
BODY TEXT 1
Nunito, Light, 16px
BODY TEXT 2
Nunito, Light, 14px
BODY TEXT 3
Nunito, Light, 14px
BLANK FIELD TEXT 1
Nunito, Bold, 14px
BUTTON TEXT 1
Nunito Medium, 14px
BUTTON TEXT 2
Design Process Highlights
A playful aesthetic
Creating a layout with users’ needs in mind
Consistency in following a brand aesthetic
Testing
Unmoderated User Testing via Maze Platform
6 participants who all cook at home provided feedback in improving the clarity of the product design.
Hi-fi User Test
Task #1:
Locate the recipe for “Elevated Avocado Toast” and also use the “Cook with Me” function to view the entire recipe
Task #2:
Toggle between “Scrollable” and Cook with Me” view modes
Outcome:
5/6 users successful in completing task #1
6/6 users successful in completing task #2
Patterns:
All users chose to find the requested recipe via image instead of trying to fill in the Search field.
Heat maps showed low to no misclicks across all users.
Surprises:
Users were the most clear with the toggle option to switch between “Cook with Me” and “Scrollable”
Considerations:
Choose one consistent way for users to switch between “Cook with Me” and “Scrollable” views.
Missing context for finding specific recipes.
Confusing Icon Communication
Toggle mode
Icon mode
Summary
User testing participants were asked to view a recipe using two different view modes, Cook with Me & Scrollable.
View modes could be switched on and off using two different options, icons & toggles.
Problem
Users had confusion distinguishing when a specific view mode was activated.
Users also were unsure if they could click on icons when shown at a lower opacity.
Confusing Icon Communication
Solution
Update the view modes to be controlled by toggle, not icons.
Toggles are already of use elsewhere so this will also improve consistency.
Additionally, reduced the overall toggle size and revised the toggle switch to be green instead of yellow.
Consideration
This revision will take up more screen space. This will need to be top of mind if longer scrolling screens are added in the future.
Challenges
Not having constant team feedback is always difficult. Coming from a background in fashion I’ve learned that I thrive off of collaborative design.
Remembering to step back and look at the whole picture is helpful to ensure details are not requiring more attention than necessary.
Lessons
It’s not always a direct translation of what the user says they want and therefore what should be incorporated into the design.
Determining what design would work best for the users’ interests rather than regurgitating what they say they’d want is key in UX design.
Alternatives
Adding more screens to this prototype would be beneficial to even better show ease of use and the product’s full potential.
Future
A larger research participant pool would be interesting to see how similar or different the insights would be.
Focusing on user exploration versus a set task list for hi-fi testing would produce more organic results.
Please reach out