WHISK LIST
Role
UI/UX Design, User Research, Information Design, Copywriting
Duration
3 Weeks
Tools
Figma
Context
Working 40 hours a week is no longer the norm. For those who work longer hours, the last thing they want to do after a long workday is cook a meal with hard-to-find and costly ingredients. Many recipe websites feature recipes from famous chefs that use expensive ingredients, making it overwhelming for those who want to use what they have. Our busy lives make it difficult to find the motivation and time to cook. As a result, we often rely on mediocre pre-made meals, fast food, or pricey takeout.
The Problem
Many young adults find the idea of cooking for themselves overwhelming and stressful and end up resorting to constantly eating takeout or other unhealthy foods, resulting a hit on their health and their wallet.
The Solution
Whisk List is a mobile and desktop application with the goal of encouraging young adults and beyond to cook for themselves. Whisk List aims to make cooking feel less of an unpleasant chore and something that can be fun and fulfilling.
Understanding the user
User research
Personas
Problem statements
Competitive audit
User Research
“I say that I don’t know how to cook, but what I really mean is half the recipes that I want to try seem so complicated and out of my cooking abilities. I can follow instructions, but simplifying a hard recipe is a lot of work too.”
- Interviewee #1
Analysis
I conducted interviews and created empathy maps to better understand the users I designed for when it came to their needs. The main group that was found through research were young adults in their late teens-to-mid 20s who are full-time students or have started working full-time and don’t have the time or desire to cook for themselves and instead have to resort to unhealthy and expensive takeout or food delivery.
This user group validated some of the previous assumptions about Whisk List users, but it also revealed some other factors that affect their desire to cook. Many cooking websites and apps make cooking seem laborious and require complicated cooking knowledge. It was clear that more young adults would be willing to cook if it recipes and process were more inviting and accessible.
Personas
Michelle is a full-time college student with a busy class schedule that needs a way to find fast, easy and healthy recipes so she can make them her limited money and equipment in her dorm room.
“I need a way to cook healthy meals when all I have in my dorm room is a microwave and an air fryer that I’m not even allowed to have.”
Goals
“Michelle”
Make meals that are quick and simple that she can bring to school
Save money on food overall
Frustrations
Doesn’t have a stove, only has a microwave and an air fryer
Not a lot of time to cook in between classes, studying, and a part-time job
Personas
Finn is a full-time barista and part-time freelancer who hates to cook and needs a way to cook meals for themselves on a budget, while still being healthy and tasty.
“The last thing I want to do at the end of the day is make myself some food. Sometimes I just don’t end up eating or I spend an unreasonable amount getting McDonald’s delivered.”
Goals
“Finn”
Cooking healthy meals on a budget and on a tight schedule
Frustrations
Not a lot of time
Hates making grocery lists
Hates cooking in general but knows it will save money
Competitive Audit
An audit of a few competitor’s products showed some insight into some gaps and opportunities to address with the Whisk List app and responsive website.
Starting the design
Ideation
Digital wireframes
Low-fidelity prototype
Usability Studies
Ideation
I did a brief ideation exercise and came up with ideas for how to address gaps identified in the competitive audit.
My focus was making recipes accessible to those of all backgrounds, make the cooking preparation process easier, and suggesting ways to give back to their community.
Digital Wireframes
After ideating and drafting, initial designs were created in order to give an overall look at the app design.
These designs focused on making it easy for reluctant cooks to find recipes that appeal to them and their interests or goals.
Featured recipes would always be ones trending on social media and adjusted for easy and fun recreation by users.
Easy categories to explore and find recipes that best fit the users’ needs and wants
Low-Fidelity Prototype
To prepare for usability testing, a low-fidelity prototype was created to connect the user flow of finding a recipe and going through the recipe preview page and cooking.
Low-Fidelity Prototype Usability Study: Parameters
The goal of this usability study was to identify any pain points in the current app (lo-fi) designs, identify any accessibility issues and more features or pages to include.
Study Type
Unmoderated usability study
Location
USA, Remote
Participants
5 participants
Length
30 minutes
Low-Fidelity Prototype Usability Study: Findings
1
Buttons
Initial button placement was confusing for some users.
2
Recipe Directions
Users found it useful to have written directions in addition the video demonstration on the same page, as well as photos on the written directions page.
3
Organization
Users said it would be helpful if the recipe ingredients and Grocery List feature were connected.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
The home screen of the app is quite long, so organization of the different sections was an important factor to consider.
It was decided that highlighting user-tailored content “above the fold” would be more useful and visually balanced.
During the usability study, users found the placement of the button to go to the recipe at the very bottom of the page confusing to find.
The button was then placed in a fixed position on the page and would scroll with the user so it is visible and accessible at all times anywhere on the page.
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the lo-fi version, including additional screens and features in order to improve the user experience.
Accessibility Considerations
1
Accessibility features are available for all users on every single screen of the app.
There are options for voice command, setting a different language, changing size of text, and a built-in screen reader.
2
All recipe instructions, as well as Grocery List features are set in both written and visual forms. This can help different types of learners.
Responsive Design
Information architecture
Responsive design
Site Map
It’s important that the same information is accessible on all platform versions of Whisk List.
Information is organized inthe same way so users can have a consistent and complementary experience of Whisk List.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. Each were optimized for user needs on each device and screen size.
Going forward
Takeaways
Next Steps
Next steps
1
Conduct more research on how the app can help communities when it comes to food pantries, food donations, and other resources to aid in food security.
2
Add more ways to teach users the skills they need to learn how to cook and have fun while doing it.
3
Include incentives and rewards to users for the skills they learn and any aid and work they do for their community.
Takeaways
Impact
Users shared that the app made them feel like they could cook more often because they’re able to find trendy recipes that were also easy and altered to be made with what they have at home or accessible ingredients that can be bought on a budget. It made cooking less overwhelming and more inviting.
Lessons Learned
The problem I’m trying to solve can be done in a way that appeals to the user base that I’m targeting while also encouraging them to help out their community. While this is a start, there are other real-world problems that are also impacting whether or not young people are able to cook for themselves, and there is more work to be done!