Cook Togethr

How bite-size steps help amateur chefs gain confidence in the kitchen

Role
Single Product Designer (with mentorship from a Senior UX Designer)

Timeline
1 week-long design sprint for my Springboard UX Certification

Constraints
Project Prompt, Limited Time, Sole Designer, Mobile Solution

Credit: all photos, videos, and recipe info is property of and sourced from Bon Appetit’s Simple Carbonara Recipe

Business Objective

Savr, a cooking start-up known for quality recipes, started receiving negative reviews on recipes with multiple steps and advanced techniques.


The Challenge

As part of their reputation management, Savr wanted me to do a design sprint to test a possible solution for helping home chefs gain confidence with complicated recipes.

Day 1: Empathize

What issues do amateur home chefs experience when trying a new recipe?

I reviewed 7 customers interviews (provided) and chose to design for the top 3 problems they mentioned:

1

They don’t know where they are in the cooking process

2

They’re unsure what comes next in the cooking process

3

They struggle to be efficient with preparation and timing

Day 1: Persona

My persona, Nick, doesn’t feel like he’s “on the right track” half way through a recipe

I created Nick as a representation of the needs, goals, and frustrations of amateur home chefs when following a new recipe. Throughout the sprint, referring back to Nick helped me imagine what his ideal experience might be, and define the best features to include in the prototype.

Day 1: How Might We Questions

How might we help Nick…

1

… Feel prepared and efficient when following a recipe?

2

… See what food looks like during different phases?

3

… Reduce the back-and-forth between the recipe and instructions?

Day 1: Mapping The Process

Out of several iterations, I proceeded with this map because it provided a solution to Nick’s goals and all 3 how might we statements.

Day 2: Lightning Demos

Features from exploring related apps that might improve Nick’s cooking experience:

  • Summary of the task that includes images

  • Steps are clearly defined

  • Full screen layout with large actions

  • Visual-forward (looping videos, in-process instruction)

  • Scannable text

  • VUI

Day 2: Sketching

Rapidly sketching the critical screen - a step in the cooking process - helped me explore combinations of patterns and elements from Lightning Demos:

The Critical Screen

I selected this screen (center) because it will help Nick meet his goal of being prepared at each step and knowing what food looks like at a given step in the cooking process.

Then I sandwiched it between before and after screens to see what the flow is like, and think through some interactions Nick may have as he’s cooking:

  • Referencing the recipe on his phone

  • Preparing ingredients

  • Looking back at his phone

  • Cooking something on the stove

Day 3: Decide On The Ideal Experience

The critical screen helps Nick cook with minimal screen interaction, and provides the right step at the right time during the cooking process.

While I think voice controlled hands-free cooking is the best solution for this problem, I moved forward without it due to time constraints and because I wanted to test if the step by step solution is viable alone, first. If it’s a successful combination of video and instructions for home chefs, I would do another sprint to test how VUI works with the step-by-step process.

I quickly remade the storyboard without voice inputs to see what Nick is doing during the cooking flow: how physical prep and cooking tasks were either supported or hindered by having to interact with the screen. This reinforced the importance of large, simplified and scannable cooking text accompanied with large buttons that Nick can tap with, say, just a knuckle on his otherwise food-covered or occupied hands.

Progress bar shows Nick how many steps there are and which one he’s currently on

  • Looping silent video shows Nick what the food he’s cooking should look like at this step of the process

  • Important instructions and ingredients are bolded in each step

  • Buttons (and swiping) at the bottom give full user control

  • Hovering Voice UI button with instruction bubble “Hey, ask me…”

  • As the voice UI reads the first step, it highlights the text as it reads and outlines the entire card

Day 4: Prototyping

I designed the fewest possible screens to make the prototype realistic enough to test the cooking flow.

Without wasting time on an entire build, my assumption is these screens will present a believable facade of just enough information that will enable test participants to provide authentic insights.

My assumption is that these screens present information in the order that Nick needs it when cooking to reduce scrolling/returning to his phone and reduces surprise steps/inefficiencies.

Day 5: Test

5/5 testers completed step-by-step preparation and cooking instructions, but accidental double-taps resulted in skipped steps.

The response to the cooking flow was enthusiastic: testers want to use this feature! As I suspected, user control and visibility of system status are especially important for a cooking problem space.

SUS Score: 89.5

What Worked

Scannable ingredient list with bolded quantities

Visual list of tools and equipment

Looping video with short steps with bolded text

What Didn’t Work

Two participants double-tapped “Next” and accidentally skipped step(s).

Font displays 1’s as I’s which resulted in misreading ingredient amounts

Some participants were hesitant to press the Prep & Cook button because they didn’t see a step-by-step overview first

Explore The Prototype:

Next Steps Because This Wasn’t “Real Life”

To truly test this solution, amateur cooks should follow a recipe in an actual kitchen where timing would become a more urgent and realistic factor.

  • Do cooks prop up their phones when following a recipe, or lay them flat?

  • If their phones are leaning against something, can they still tap the screen without knocking it over?

  • What happens if they double-tap and skip past a step?

  • What happens if they mess up a step?

What I Learned

Step-by-step preparation and cooking instructions were successful, but didn’t account for accidental taps that resulted in skipped steps.

I had a blast! I gained confidence in my ability to identify important elements (stay close to an MVP/catch scope creep, create a prototype, and test quickly.

I understand the value in testing quickly to determine whether a solution/direction should be pursued further.