Creating Stress-Free Cooking Experiences

About this Project

November 2020

UX Researcher | UI Designer

This project is a modified Google Ventures (GV)  Design Sprint,  that answers critical business decisions that follow the 5-Day structure of Map, Sketch, Decide, Prototype and Validate. The design sprint allowed for quick answers to come up with solutions to the problem through this process. Divine is a new startup that is used to learning how to cook delicious meals.   

The Challenge

In reviewing Interview recordings and conducting basic competitive research, users complained about too much information in the instructions of the recipe. Many also included multiple, simultaneous tasks. This created cognitive load for recipe users. 

Based on the users’ interview input, I chose a solution that  simplified the process of following a recipe. This allowed for less cognitive load on the user by breaking the process into smaller steps.

Solution

Day 1- Understand & Map

Day 1 of the design sprint requires understanding the recipe users’ problem. 

In the image below, notes were taken from the interview with “Maria” of what she did, the problem she faced and what she was looking for in the cooking app.

To understand the process of cooking from beginning to end, Maria’s input helped me understand that instructions can be overwhelming, not knowing how much time it would take from beginning to end, the time in each step, and which items could be done together.  The problem is to provide useful instructions that are not overwhelming, at a user-controlled depth.  The problem is balancing depth when appropriate, without being overwhelmingly detailed without overloading the user with too much information at once.  

The map below shows the process that the user went through in the recipe.

We need to provide instructions that are clear and easy to follow. Maria said, “I made a dish, a Korean dish, for some friends and it was more complicated that I intended… ingredients that I was unfamiliar with and it was unclear of when I should be combining or cooking”. We need to be ready to provide useful background information about the ingredients (background, how it is used, when it should be added).  Our interview subject, Maria said, “the recipe included a number of unfamiliar ingredients.”

Day 2 - Sketch

Lighting Demos

In this section I conducted a competitive analysis to use as inspiration and to use in my sketches so that timing allowed for more freedom understanding by the user and as a result, avoiding cognitive overload

The images include the sticky notes that were used for competitive analysis that provided inspiration, as well as to understand how timing works in an application.

This image includes a screenshot of Timer+ that provided inspiration to understand how timing works in an application.

Timer + allows for multiple timers to be set at the same time.Maria, our interview participant stated a problem knowing whether to combine items, cut up, while cooking. A timer, or rather multiple timers could be useful in knowing the exact timeframe for each section of the recipe.

New York Times Cooking is one of my favorite cooking apps. Although it has a number of great features, one is that it states the exact timing for the recipe, for example, 1 hour plus marinating, and also breaks each part into steps. 

Kitchen Stories, a new cooking app that, although a number of interesting aspects, has a “now in season section” where ingredients are described, given a history, and with a featured recipe. 

Picstructions, an app I have not heard about but has an interesting concept, using photos with illustrations to instruct.

3 Takeaways:
  • Inspiration can come from anywhere.

  • Using multiple timers is useful in timing multiple consecutive tasks.

  • Images go a long way in conveying intent.

3 Takeaways:

The competitive analysis allowed for structuring the crazy 8 sketches so that they were focused on the purpose of understanding timing in instructions in a recipe.

Sketch Crazy 8's

 The critical screen is the one where video, instructions and timer are displayed to indicate whether the cooking is accurate and on time.This idea for the critical screen has been expanded upon in the sketch below.

I sketched 8 screens of the menu screen to tackle the timing issue. Each screen had a limit of 1 minute of sketching time. The first screen included a clock, description, and video for each screen. The second  and fifth screens included short descriptions and the timing for each step. The third screen included videos of each step. The fourth screen included videos and timing for each step. 

Screen six included photos and timing for each step. Screen seven includes two parts that can be done together, a second and third step. The final screen includes a video of steps one and two together and another video for step three with description. These were very rough ideas that led to a refined storyboard in the solution sketch.

Solution Sketch

In the above sketch, it includes the critical screen, the preceding one, and the one that comes after it. The first screen is the screen where they choose a recipe. The second (and critical) is the recipe, broken down in steps with a timer and video. The final screen includes 3 pictures of each step in the recipe.

Day 3 - Decide

I used a simple IA, based off of the sketches I did yesterday, using broad categories of dishes towards a more specific category towards the actual dish. This was based off of some of the competitive analysis that I had seen in how recipes were searched for. 

In developing the storyboard, I decided to keep the architecture as simple as possible.  The user has a menu of items to choose from, and ingredients. recipe is identified, basic information is provided, and if the user wants to dig deeper, there are four choices to learn more about.  Each choice has only one more level of depth.

Day 4 - Build a Prototype

I built a prototype in Figma.  It represents the simple Information Architecture I had in mind, the colors and fonts were selected to be easy on the eyes, and relaxing to use. Below are screen shots of the final design (after making changes in Day 5 when the prototype was tested. 

The first four screens relate to how a recipe is searched from a very general category to a more specific ingredient to come up with the recipe.

The original flow went from Main (with no clarification of what that was) to duck  to the recipe. Based on feedback from participants, the flow was revised to include types of main (meat and poultry, pasta, etc.,) to duck dishes, and duck breast dishes to arrive at the recipe, “Thai Orange Duck”.

The next screen relates to the actual recipe with image, timing, ingredients, and full instructions.

In the next 3 screens, the recipe is broken down into individual steps. Each step includes images, instructions for that specific step, a video of that step, ingredients and tools needed in that step, timing, and a link to the next step, as well as the original full recipe.

The final screen shows the completed dish, as well as ratings, sharing ability, and searching for the next dish. Participants liked the ability to rate by both taste and ease of recipe. As participants  thought it would be important to be able to go through the search process, in addition to a search box, the button is labeled as “Search By Ingredient Category”

Day 5 - Validate Designs

I arranged to interview 5 people with whom were home cooks, 2 men and 3 women.  The interviews were moderated remotely through Zoom.

The testing mostly validated my design.  There were areas of the UI to clean up. One area that participants were confused about was why the full recipe was on each screen. So, I only included ingredients required in that step. In the recipe search in the beginning, there were areas that were missing, so the flow was adjusted based on competitive analysis using sites such as New York Times Cooking and Food & Wine to see how a recipe is searched. Suggestions also included tools needed, sharing capacity, and buttons to go back to the original recipe and the recipe search menu.  

Summary

In this five day design sprint, research was conducted using competitive analysis and interview analysis. The problem was that recipe users were frustrated with the amount of information in the instructions.  Using a strategy of breaking up the recipe into steps with timing, allowed users to complete recipes with ease and less frustration.

Participants in the usability tests found the application very user friendly and loved the sharing and rating ability.

Insights and Learning Points

In the first usability test, there was confusion on the part of the flow. Therefore a second usability test was needed to validate the designs. I needed to think through the flow as a user who would be using the application. Because of the way I had originally categorized the ingredients there was confusion. Going from a very broad category to more specific made the flow easier to follow. 

Follow me

  • LinkedIn Social Icon
  • Twitter Clean