Happy Chef App
My main goals by creating this app were to help reduce food and packaging waste, encourage users to cook healthy meals from home, and to make cooking an easy and enjoyable experience. "The United States discards more food than any other country in the world – nearly 40 million tons every year. " So much of the food we produce goes directly back to the landfill and I believe individuals can help reduce their waste if only they had a better way to organize and prepare meals.
Additionally, "28% of Americans -- almost a third -- don't know how to cook. " With this stat, I also assume that they don't know how to plan meals, meal prep, and effectively grocery shop. Americans also have alot of barriers when it comes to cooking, mostly related to time and planning. "The most-cited reason, with 51%, (and one assumes there's a certain amount of overlap in these two cohorts) was that the surveyed party had a spouse or partner who does most of the cooking. The other major excuses were "not having enough time" (21%) and "not wanting to clean up afterwards" (25%). Many also indicated that the time it takes to go grocery shopping is a major impediment."
With Happy Chef, I wanted to design an app that would keep all the inspiration and organization home cooks need, all in one place. Happy Chef is welcoming and gamifies cooking in a way to keep people motivated and interested in cooking at home. It provides diverse recipe options with a handy filtering system so users can find the recipes they need quickly. It allows you to save recipes to a personal cookbook, so that users can share or come back to recipes they loved. Happy Chef also includes an integrated shopping list, so you can add items directly from a recipe to your shopping list. As for meal planning, users can add recipes to specific days of the week, so they know exactly what they will be preparing each day. This would reduce trips to the grocery store as well as reduce the hangry panic of trying to figure out what to make for dinner in the moment.
Scope
Project Duration
February 2022-April 2022
My Role
UX/UI Designer and Researcher from conception to delivery
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Objectives
Create an app for meal planning
Have a filtering system for finding recipes
Be able to save recipes and have a shopping list feature
User Research
Initial Interviews
For my initial research I conducted at written interviews. This means I sent out the same questions to 6 participants and had them return their answers in writing. I hoped this way of interviewing would get me the most unbiased information, since I did not have contact with the participants at all, and they could write as much as they wanted. The people I interviewed were all between 21-65 years old and with various gender, sexualities, income, and ethnic backgrounds. My questions centered around how they currently interact with meals, how much they cook, how much they eat out, and what they like or dislike about cooking. I found that most participants cook at least 4 times per week, and most of them enjoyed cooking because of the creativity and/or control they had over the food they ate. Strategies for cooking varied from meal prepping weekly meal on Sunday, to just eating frozen meals.
After completing these interviews, I complied a report to analyze my findings.
Customer Base
Personas
Problem statement:
Rene is a working mother of two who needs a quick and cheap way to make healthy meals because she wants her family to grow up healthy and lead long, happy lives.
Problem statement:
David is a young Marketing Specialist who needs an easy way to get into cooking meals at home because he can’t afford to keep eating out and doesn’t know how to meal plan.
Design
Information Architecture
Before I started a wireframe, I sketched out some basic IA. I knew to start the app there would be a login/create account pages but I felt it was unnecessary at this point to make those. Instead I wanted to focus on the features of the app that would each be their own pages. I knew the Recipe page would be the homepage since it is likely the most updated page and the most used page.
Wireframes
I begin the design with some quick ideation paper wireframes, and after deciding on a layout, created a digital wireframe in Figma.
Low-Fidelity Prototype
After a quick review of the IA in the wireframe I filled it out the connections in Figma to create a functional prototype.
Low-Fidelity User Testing
Before committing to this design and creating a high-fidelity prototype, I wanted to do some quick user testing. I knew my design needed some changes but I wanted to see what others thought the priority was before I started changing everything.
I interviewed 4 participants, all in my demographic of 21-65. It was a moderated study conducted in Washington State within the US.
My users consisted of one male, two females, and one non-binary person. I set forth a few navigation tasks for them to complete, and then asked for their general thoughts on layout and possible features. I had them voice record their process, and then compiled responses into an affinity map below.
Affinity Map
While there were a number of different suggestions from the testers, I focused on the top three that were most in common.
Users prefer specificity on cuisine and diet options.
Navigation options need to be expanded and resolved.
Icons are not all universal, users need them to be explained so they can learn what they mean.
Redesign
Updates
First, I went ahead and restructured the app design to take care of the three design changes my users wanted from the user testing session.
My recipe page was one where users had issues understanding the icons. Based on their feedback I changed how the “add to cookbook” icon and “add to shopping list” icon looked. I also added the ability to change the amount of servings a recipe made, which in practice would automatically change the amount of ingredients you needed.
The filters on the Recipe page was the next to update since users preferred cuisine type to show like restaurants rather than by region of the world. I added a search bar to cuisine since there are way more cuisine types than I could put as options. I also added a new filter, “Flavor”, so that users could sort by that in addition to cuisine.
Based on users saying a tutorial or key would be helpful, I added a mascot helper to provide a preliminary tutorial, as well as functioning as a help button. When users click on TomTum, it takes you to the help page in settings. Users can also disable TomTum in settings if they would prefer the app without it.
High-Fidelity Prototype
Final Thoughts
Out of all the designs I have tested with users, the Happy Chef app design was the one that excited users the most. They wanted this to be an actual product that they could start using in their own lives. The basis of the app is really just a tool to help people stay organized, but I think the playful UI really helps with making the process fun. I also think that since its designed as an app and not a responsive site, it lends itself to its mission of saving people time, because users can meal plan and add to their shopping lists on the go whenever they happen to have down time.
If I were able to create this app for real, then I would like to integrate grocery delivery apps into the shopping list page, so that users could buy all of their shopping list ingredients within the app and have it delivered to them at their convenience. I would also like to add a social element to the app, allowing users to share recipes with their friends in the app and perhaps have a feed that shows what their friends are cooking. After these additions, I would then conduct another usability study, and really focus on accessibility factors, such as reading recipes aloud, having video content added for how to do a certain cooking technique, languages, etc.