Chef's Helper
A recipe-keeping, audio-assisted app that cooks with the cook
Project
The task was to build an app for the kitchen of a family-run restaurant in Honolulu
Software Used
Figma
Miro
Google Suite
Beautiful.ai
Numbers
Duration
April - November 2021
Roles
UX Research
Competitive Analysis
Personas
User Stories
User Journey
Wireframes (Paper, Lo- and Hi-Fidelity)
Information Architecture
Usability Studies
Style Guide
The Problems
Even experienced cooks sometimes forget an ingredient.
Various experience-levels of cooks leads to inconsistent dishes coming out of the kitchen.
Recipe app must allow comments and customization so the dishes stay relevant.
Recipes are in various places which makes finding the needed recipe difficult in the moment.
The Goal
An app that assists on the kitchen with a set of accessibility functions like a built-in screen reader, scalable text, and visual cues that ensure the cook doesn’t miss a step or an ingredient. The app will also include scaled ingredient amounts in the method steps.
Understand
As an avid home-cook and a student of UX Design, I jumped at the prompt to design an app for a family-run restaurant kitchen in Honolulu, Hawaii.
For this project, I used the user-centered design process that relied heavily on foundational research, persona creation, user journeys, and usability studies.
Constraints
The Chef’s Helper app is designed to be used on tablets, with and without audio assistance.
Since this product was commissioned by the restaurant and will not be made available in the App Store, there were no business concerns.
People with disabilities were not included in either study because they would not be working in a commercial restaurant kitchen and are, therefore, not in our targeted group of users.
Analyze
In order to understand the needs and pain points of a diverse group of users, I joined several Facebook groups for chefs and, in those groups, posted an in-depth, online survey. I also sent surveys out to friends and family who are the primary cooks in their homes. The results of the surveys gave me a great amount of information to work with.
I also did an extensive Competitive Analysis and prepared a Competitive Analysis Report. To ensure I had a more well-rounded analysis, I dug around the 'net to find any bad reviews of these apps and took notes of the complaints. Once those things were done, I could create the Value Proposition.
The information gathered in the foundational research allowed me to create Personas, Empathy Maps, the User Journey, User Stories, Problem Statements and Goal Statements.
Personas
I referred to the personas and used them as a compass at all phases of the design.
The research gave me a solid foundation upon which to begin ideating and yielded these pain points.
Pain Points/Challenges
1. Even experienced cooks sometimes forget an ingredient.
2. Inconsistent quality of dishes leaving the kitchen because each cook works from a different recipe.
3. Recipe app must allow comments and customization so the dishes stay relevant.
4. Recipes are in various places which makes finding the needed recipe difficult in the moment.
Ideate
Sketches
Thinking about the User Journey provided a lot of insight on the Information Architecture: how the functions should be connected to each other, how the navigation should work, and how the user would actually move around within the app.
Then I went deeper and did several rounds of paper wireframes before creating composites of the best ideas.
Next, I sketched Big-Picture and Close-Up Storyboards to show how Chef's Helper would be used in context.
Then, I jumped into Figma and did a very simple illustration of the Information Architecture and a quick diagram of one of the User Tasks.
Wireframes
After sussing out the design on paper, I moved to Figma to create the digital wireframes.
The lo-fi wireframes show the two main user flows: choosing a recipe and cooking it to the end, and adding a new recipe. These wireframes were made into an interactive prototype.
Validate
User Testing
Before creating the high-fidelity mock-ups and after the designs were done, I did a round of usability testing to find out what people felt about the design and to discover ways I could improve the user journey. When the mock-ups were done, I did a second round of testing.
For the first Usability Study, I conducted five online interviews in which the person was asked to complete three specific user journeys to see how they managed and what they felt about the process. For the second Study, I gathered information from anyone who was willing to click through the mock-ups and give me feedback. Five people participated.
The Usability Research Study Plan outlined the questions the study needed to answer, the KPIs, the methodology, and the script. It also provides information about the project, the participants, and the study itself.
Affinity Map
The Usability Test provided a great deal of information and suggestions for how the app could be improved.
I also created a Usability Research Presentation to share the insights received by the study participants.
The first Usability Study provided these key findings.
The icons in the Meal Planner are confusing
5 out of 5 participants were confused by the icons in the Meal Planner. This means that the icons in the Meal Planner are unclear to all users and need to be changed.
How-to videos are over-emphasized
2 out of 5 people spoke in an annoyed way about the How-To videos in the Steps, which means that some people would prefer for video tutorials to be de-emphasized and relocated.
Shopping List connectivity
2 out of 5 participants wanted to be able to connect entire recipes to the Shopping List. This means that the recipe ingredients of an entire recipe can be added to the Shopping List in one click.
The second Usability Study provided these key findings.
Fonts are unpopular
5 out of 5 participants made unflattering remarks about the fonts. This means that the fonts must be changed and perhaps unified into a single font.
The Summary page is too crowded
4 out of 5 participants said that the page is overwhelming, that there is too much going on. This means the page needs to be redesigned and simplified.
The Set-Up page is empty
2 out of 5 people said that the Set-Up page is weirdly empty, especially coming right after the over-crowded Summary page. This means the distribution of information across those two pages needs to be re-thought and re-designed.
Iterate
The feedback I received in the second round of the Usability Study helped me make a few last-minute changes that greatly improved the look and feel of Chef's Helper.
UI Design
The movement from lo-fi wireframes to hi-fi prototypes required me to take a step back before moving forward because I made the lo-fi wireframes for mobile devices but I wanted the app to be used on tablets.
Since the Chef's Helper app will be used in the context of a commercial kitchen, I kept the design very simple, made clickable areas large, and provided several ways to move through the pages (e.g. by voice, tapping, swiping).
As the design came into being, I created the Style Guide concurrently.
How Chef's Helper addresses the four Challenges
1. Forgetting an ingredient
By stating the scaled ingredients in the cooking steps, Chef's Helper ensures no ingredient is left behind.
2. Inconsistent dishes
Having every cook using the same recipe and having the amounts of ingredients scaled by the app, dishes leaving the kitchen will be consistent.
3. Keep dishes relevant with comments/updates
The ability to customize the recipes and add comments or updates to a recipe keeps the dish modern and fresh.
4. Recipes in various places
Chef's Helper is the repository of all the family's beloved recipes. New recipes are easy to input.
Interactive Prototype
Click on the arrows in the right corner to open the prototype. Then click 'Options' and choose 'Fit to Screen' for the best experience of the Chef's Helper app.
Learnings
As this was my first UX Design project, I made a large number of mistakes - and because of that, I learned a tremendous amount. Some of the learnings that stand out are:
I’m pleased with how much foundational research data I was able to gather with only online surveys, but in the future, I will also conduct interviews. Interviews make it easier to create the Empathy Maps.
The first draft of an idea will never be the final version.
It’s never too late to change the font.
Defining the problem properly can not be overstated. If the problem has not been defined properly the entire project can easily slide off the rails.
Always make a copy of the wireframes, prototypes and mock-ups before getting to work on them after receiving the findings of Usability Studies. I attacked the designs to improve them ASAP (without duplicating them first) and then regretted that I didn't have a lot of 'Before' images for later comparison.
Style Guide
Before making the Style Guide, I watched a few YouTube videos to understand Best Practices. Some of the advice I took was not great. After defining the colors and getting to work I found that most of my colors were completely unpractical. The upside is that I learned how not to do color.
With fonts, I learned that it is time well spent to spend an hour (or two) flipping through fonts to find just the right one. I changed fonts three times. The final time, I simplified and unified the look by defining a single sans serif font.
The Style Guide was updated once mid-design and again after the design was completed.
Conclusion
Chef's Helper was an excellent first project. I purposely created some constraints (no business considerations; no onboarding; would be used in a single kitchen on one type of device) because I didn't want to be overwhelmed the first time I went through the UX Design process - it's a lot! I'm very pleased with how it all turned out. Several people told me they'd use it if it were a real product, which is really the only KPI I could apply to this project.