A tablet showing the home screen of an app called Chef's Helper, a voice-activated kitchen assistant.

Chef's Helper

UX/UI Case Study
App design
Role
All phases of the UX/UI Design Process
Tech
Figma, Miro, Google Suite, Beautiful.ai, Numbers
Time
April - November 2021

The brief

Problem Statement: A family-owned restaurant has unique issues in the kitchen. Recipes are stored in several places, sometimes even experienced cooks forget an ingredient, and the varied skill level of people in the kitchen leads to inconsistent dishes coming out of the kitchen.

The Goal: An app that assists on the kitchen with a set of accessibility functions like a built-in screen reader, scalable text, step-by-step cook along screens with photos, and visual cues that ensure the cook doesn’t miss a step or an ingredient.

The background

Hypothesis: A tablet-based, voice-activated cooking assistant with built-in alarms and step-by-step instructions would help a small, family-run kitchen a great deal. It would help younger cooks learn recipes, would ensure no ingredient gets missed, serve as a repository for new and cherished dishes, and would standardize dishes exiting the kitchen.

Constraints: Since this product was commissioned by the restaurant, it will not be made available in the App Store (so there were no business concerns).

People with disabilities were not included in either research study because they would not be working in a commercial restaurant kitchen and are, therefore, not in our targeted group of users.

The research

I used quantitative research 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. I referred to the personas and used them as a compass at all phases of the design.

The research yielded four 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.

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.

The design

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.

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 on tablets 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).

Features include: audio-assisting the cooks through the steps, built-in alarms, a 6 page process to input recipes, a page showing the status of every recipe being cooked in the kitchen, a shopping list, and a calendar-based Meal Plan that cooks can reference to know what to cook that day.

Final thoughts

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.

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. 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.