High-Level Overview
My Role: Product Designer (UX Designer, UI Designer, Research, and Business Strategy)
Timeline: 80 hours over 6 weeks
Toolkit: Figma, Miro, Whimsical, Google Forms, Word Cloud
Problem.
The What
Cooking is challenging for disabled, busy, and/or inexperienced home cooks.
Goal.
The Why
Users find cooking, especially healthy cooking, overwhelming and don’t know how to streamline the process for a more enjoyable and accessible experience - that’s where we come in!
Solution.
The How
Develop an empathetic understanding of target users’ overwhelm for cooking to design an end-to-end mobile application that houses healthy, gourmet recipes that can be cooked with 7 ingredients or less, a self-maintaining inventory system, and a pinnable calendar for meal planning.
Are You Eating To Survive or Surviving To Eat?
The Genesis.
The idea of a (originally) 5 ingredient or less recipe app came about with personal accounts of mental illness amongst my loved ones. Cooking, or feeding yourself for that matter, can be an overwhelming task for those with mental disabilities (which also translate to physical symptoms).
Observations.
I questioned if such a silent struggle existed outside of my social circle, which led me to inquire if this topic was being discussed online at all. Check out this insightful video on the topic by Fit Men Cook (our prospective user) discussing how his struggle with Depression makes healthy eating, and cooking in general, a difficult daily task!
*If you don’t have time to watch the video, don’t worry - just read on!
01
Who Is The User We Are Designing For?
The answers are in the heartbreaking comments of the video I shared above.
As shown below, many of the commenters share their relationship with mental health and food. There are also multiple commenters that speak about trying to take better care of one’s health in general.
Expanding The Target User Pool.
The genesis idea for Zesty was solely to help those with mental health struggles effortlessly eat healthy (and do so often).
However, I pivoted to other potential user groups who could benefit from the product. I did some brief white paper research on what makes healthy cooking difficult and I found 3 main paint points that they all share:
With physical, emotional, and mental exhaustion from today’s “hustle culture”, feeding yourself becomes a last priority for many.
The present world has gotten accustomed to quick gratification, and with food, this usually translates to “fast food” options.
Not everyone has creativity or knowledge when it comes to deciding what to cook and how.
In order to tackle these common threads, Zesty later expanded as something that can be used amongst many user groups: young professionals, busy parents, amateur cooks, students, etc.
02
Did We Really Need Another Recipe App?
Problem Statement.
The main pain point of users revolves around finding cooking intimidating or overwhelming amongst their busy lives. Furthermore, the challenge to eat exclusively healthy adds to that pressure. Zesty is the solution to not making the user think about anything besides gathering a minimal list of ingredients and following simple instructions, which can be learned through 3 different methods (video, step-by-step mode, or reading). Zesty does all the thinking for you!
Constraints.
Zesty is designed to be a Minimal Viable Product (MVP), thus the few chosen features included address the basics tools users need to alleviate the main pain point: A calendar in which users can pin recipes to for meal planning, a self-maintaining inventory system, and simple methods to cook recipes without having to use multiple apps.
What Makes Healthy Cooking So Challenging?
A Plethora of Information.
According to Forbes, Covid-19 has forever changed the way in which people look at their health and lifestyle. This has caused an increase in consumers educating themselves on how to read food labels, ingredients, and where ingredients come from.
With the help of the internet and other modern tools, learning how to achieve these goals on one’s own has never been more accessible. However, with more information available comes more confusion on what to trust and sift through. Thus, a tool is needed that simplifies this information, makes it trustworthy, and is actionable in a way that sustains in one’s lifestyle.
03
Number of Ingredients = Users’ Deciding Factor For Choosing A Recipe.
User Surveys Shaped The Foundation of Zesty.
To kick-off user research, 15 participants of all walks of life were asked a series of questions on their cooking preferences based on lifestyle in order to assess their comfort level with cooking, as well as the decision process that goes into choosing a recipe to cook.
The majority of users have to cook for more than one person on a daily to weekly basis and, as a result, feel more pressure to cook both nutritious and delicious foods each time.
When users were asked what goes into their decision process when it comes to choosing a recipe to cook, 3/4 of the top 4 factors are based around ingredients alone!
What Is The Number Of Ingredients To Consider?
Once I narrowed down which survey insights to focus on, I zeroed in on one more related question the survey asked: What is the average number of ingredients users cook with on a daily basis?
The 15 participants’ answers averaged at 4.86 ≈ 5 ingredients and will serve as the maximum for the recipes’ number of ingredients!
Why An App?
So, why an app over other mediums? Based on an article that discusses the habits of mobile users, “80% of the world's population use smartphones” and “91% of time spent on smartphones is spent on apps”.
In addition, based on my primary research (surveys and interviews), users use a combination of methods to store recipes: computer files, screenshots, bookmarks on the internet, etc. Based on these findings, building Zesty on an app allows users to bring it with them everywhere.
In other words, Zesty aims to be a cookbook and planner in one in your pocket.
Users Chose The Competing Apps.
In the above survey, users were also asked what cooking apps and services they currently use. This information was translated into a competitive analysis of the most popular cooking apps and services on the market. The analysis is separated based on Direct Competitors (apps that aim to share recipes and nutrition information through a digital avenue) and Indirect Competitors (services that deliver recipes and nutrition information in a tangible manner).
Examining the features of each app gave me insights as to why my survey participants use them, and they helped me deduce which features of my MVP needed to be prioritized to set Zesty apart from its competitors.
Competitors Lack Options For Varying Consumer Lifestyles.
…5 key insights helped narrow down which features are valuable to users:
1. Tasty is the only app that allows user to find recipes through the number of ingredients.
2. The indirect competitors are the only services that focus exclusively on healthy recipes.
3. Yummly is the only direct competitor that allows users to schedule meals.
4. Tasty is the only competitor that allows users to track what ingredients they already own.
5. All direct competitors have a feature that allows users to effortlessly add ingredients to a shopping list.
User Interviews Highlighted 6 More Pain Points.
5 individual interviews, with male and female users between the ages of 18-35 (This target age group was chosen because Millennials and Gen Z are 1. The generations that utilize smartphones the most and 2. The current coming-of-age generations still learning life skills like cooking and time management and 3. They are more likely to be struggling from debilitating mental health struggles as compared to previous generations.) with varying lifestyles and cooking frequency, were conducted to further elaborate on consumer cooking/eating behaviors.
The main frustrations participants expressed with finding a recipe to cook are whether or not they are cooking it correctly, not being able to find ingredients, too long of a cooking time, not being able to store meals for a few days, cooking for multiple people, and recipes not meeting dietary restrictions/preferences.
In addition, 3 key insights from the user survey were echoed:
Overall Research Insights.
As this was a research-heavy product, here is the breakdown of the key insights gathered from each research method:
Secondary Research - 91% of time spent on mobile devices is on apps (making it the optimal platform to build Zesty on) and most smartphone users are Millenials and Gen Z.
User Surveys - The top deciding factor that determines whether or not users go through with cooking a recipe is number of ingredients.
Competitive Analysis - Zesty’s competition lacks options for meal scheduling, ingredient management, filtering recipes based on number of ingredients, and filtering based on nutritional preferences.
User Interviews - Shared 6 new pain points (that would be addressed based on competitive analysis insights) and confirmed already-known pain points.
04
With Zesty, Everyone’s a Pro! Meet Eli.
An Overwhelmed Millennial.
Based on my compilation of research, I created a user persona to reflect the audience who would utilize Zesty!
Eli is a single millennial living in a big city where the world is at his feet. He has to balance a full-time job and his social life all while trying to meet his goal of eating healthier. For him, this means needing a tool to help him organize his cooking schedule, simple guidance on how to start cooking healthy, and assistance in organizing what groceries he already owns.
The Product In Practice.
Based on the empathy map and task flows I created to empathize with Eli’s needs, frustrations, and motivations, I merged them into storyboard to understand what Eli’s user journey would look like when using Zesty to address these pain points. I translated this storyboard into a realistic scenario and made a user flow to map out the app’s ultimate potential.
The Final Hierarchy.
I finalized the features for the MVP after revisiting the pain points in user interviews and created an App Map to organize the app’s hierarchy. The prioritized features include an inventory system for ingredients, a calendar to plan meals, the ability to add ingredients to a shopping list in the click of a button, and the ability to search for meals based on preferences.
05
Users Hold The Key[words].
Wait…What Does ‘Healthy’ Even Mean?
18 participants were asked to list keywords that immediately come to mind when given a series of prompts. The results were put into word clouds to visually see which keywords were most popular (the bigger the word, the more frequent it was mentioned)!
This exercise helped to get into the mind of users and how they would navigate a healthy cooking app with the terminology used!
I used these findings craft the content and search feature of the app.
Wireframes With Key Features.
The ‘keywords’ activity and the app’s architecture were analyzed in tandem to create wireframes, which ultimately was referenced to create a final prototype. The annotations highlight the actions each feature has to offer, including how the calendar works and the customization of a user’s profile.
06
5 Ingredients Won’t Cut it…7 is the Sweet Spot.
5 versus 7.
I changed the number of ingredients from 5 (based on user research) to 7 ingredients! WHY?:
1. After researching many “5 ingredients or less” recipes online, they don’t account for toppings, cooking oils, etc.
2. I wanted to stay true to the mission and minimize frustration with recipes that require many ingredients. The 2 extra ingredients allow for room to include absolutely everything needed to make the recipe.
3. BUT…I will still include optional garnishes to avoid discouraging thoughts like, “why does my dish not look like the demonstration picture?”
07
Part of What Makes Cooking Simple is Making it Easy on the Eyes!
Branding
So much visual stimuli is overwhelming, especially for those with cooking fears or disabilities. After creating a mind map, it was clear that the words I want to exhibit with this app are playful, tasty, modern, healthy, and “zesty”.
The dark food theme is easy on the eyes and the contrast with bright colors (chosen with color psychology) addresses visual accessibility concerns.
The Logo.
The idea behind the Zesty Logo came about when scrolling through Pinterest and noticing a “Z” shape form naturally on a lemon peel. I then reversed it and visualized it as a logo and its evolution began. Ultimately, 4 final iterations were narrowed down and the final logo was chosen by users through a survey and a brief discussion afterwards.
The main deciding factor for the final logo is that when it is in one solid color, the logo is still recognizable as a lemon twist (rather than a random spiral)!
Accessibility Check #1 - Visual.
How might we…respect the playful and gourmet juxtaposition of the brand’s identity while also prioritizing accessibility requirements?
In order to ensure that the app is created with the visually impaired in mind, I did multiple rounds of accessibility checks to ensure the shades of yellow, green, white, charcoal, and black pass WCAG requirements’ contrast ratio, not only aesthetically, but also inclusively!
08
A Change of Plans in User Testing…
6 participants were chosen to test the Hi-Fi Prototype using 2 research methods.
After testing with the first 3 users, a common complaint amongst all of them was that the “add ingredient to basket” icon was confusing to understand because it gave users the impression that it was an e-commerce app (and that they had to buy these ingredients through the app).
I took this as a learning opportunity to diverge into split testing by changing the iconography for group B to test.
Result: Group B ended up having no issues with the new iconography.
4 Iterations Based On An Affinity Map.
Based on the affinity map I created to organize user feedback (including pain points, positives, and improvements needed to be made to Zesty), I concluded that 4 main iterations needed to be made to improve the app’s usability:
09
The Final (Minimum Viable) Product
Accessibility Check #2 - Tactile.
Whether it’s physical or mental, anyone including me and you, can become disabled at any point temporarily. Focusing on the physical, I tested the app with a user with relatively large hands.
Why? In theory, If the app works for big fingers, it can work universally. When cooking, you may not know which finger you will need, as some can be dirty with food. Users may not be fortunate enough to have all their fingers, and of course users vary in hand sizes.
The Nav Bar alone was designed in a way that the thumb zone would be reachable for both left and right handed people, but further testing of how different hand sizes and conditions can affect Zesty’s user experience would benefit everyone involved, not just those with permanent disabilities.
10
Scalability
Beyond the MVP
Freemium to Premium Model: If Zesty is going to be a business at the end of the day, adding premium features to the app is crucial to not only benefitting clients, but also the business. These premium features can be education on ingredients, tips on portion sizes, as well as a subscription service where fresh ingredient kits for pantries can be delivered to users’ homes!
Future Sneak Peak: Apple Watch. Users said in research that they hate getting devices dirty. An apple watch adaption of the app would solve this issue and be a convenient option, especially for those who are disabled and can’t grip their phones.
Lessons
What I Learned
More testing: I wish I had tested a mid-fidelity prototype before creating the Hi-Fi prototype. This would have highlighted areas that needed special attention and caught simple mistakes in formatting.
Simple yet effective: A huge motif was that I should have put conformational pop-up notifications when users take actions such as pinning recipes. Sure, it’s UX Design 101, but I am grateful that this experience ingrained it in my head how the simplest changes make the biggest difference in usability. Moreover, it made me even more cognizant of microinteractions in my designs moving forward!
Keep scripts concise: When conducting user tests, a big challenge was deciphering between participants being confused about my wording of tasks or being confused with the way the app was built. I learned to be more precise in my choice of words when testing.
Next Steps…Best Thing Since Sliced Bread
Developing the App.
“I need it in my life!”
100% of users said they wish Zesty was a real app based on how practical and intuitive it is. My passion grew after receiving such postitive feedback and I plan to add to the product’s roadmap and release this product to the public!!
A few of the steps in the roadmap will include:
Establishing a quality team that will moderate the content to keep the UI consistent and stay true to a clutter-free interface.
Further researching the different types of accessibility issues that users may encounter with this app, such as the 7 types of color blindness.
Testing, Testing, Testing!