Transforming the home cook's app of choice into their own personal sous chef.
Timeline: 2 Weeks, 80+ Hours
Role: Lead UX/UI Designer
Introduction
After college, I worked at an agency designing food publications where I pored over hundreds of recipes and tinkered with formatting to make them accessible to the home cook.
I had also become a baking enthusiast, and was even given a few recipes to test from our food editor. I experienced what was involved in professional recipe development; how to take something written by a chef that might have been scaled for a restaurant and pare it down for the home cook. There is a lot of fussing over details when writing recipes for print publications, but surprisingly it seemed as though digital recipes were not afforded that same consideration.
My most frustrating experiences in the kitchen are usually when I am cooking from my phone. Generally, I feel like I can’t keep up with a recipe while actively cooking. My brain will instantly forget the step I just read, and as I am fumbling around with my phone to unlock it over a pan full of burning food, I scroll quickly in a panic to reread the step but can’t find where I left off. It is a golden rule for cooks to follow any recipe to a T the first time around, but so much of this experience on mobile makes this initial attempt fraught with peril.
So, taking a design thinking approach to dissecting a best-in-class home cooking app, NYT Cooking, I set out to find opportunities for improvements. I focused on recipe formatting for active cooking as well as ideation around navigation improvements to limit interaction needed with the phone while cooking.
*This is a concept project for NYT Cooking and I am not personally affiliated with them.
Research
I set out to validate my assumptions about how tumultuous the experience of cooking from a recipe on mobile could be.
I conducted a survey of a group of home cooks to understand their approaches to cooking. A commonality that emerged was the desire to have more visual cues integrated in recipes so they could better grasp the technique.
︎︎︎“I am a visual learner, and love when there are visual references. Whether it's a note saying "julienne the peppers—similar to a matchstick" or a gif is always helpful also. So really, if it's a technical skill that isn't often in the knowledge bank of a "normal" consumer, visuals or references are wonderful.”
In a survey with NYT Cooking users specifically, a similar sentiment emerged:
︎︎︎“Instructions can be unclear, especially when making a recipe for the first time. It would be beneficial to have gifs or imagery to know what to look for. Bon Appetit’s [app] Basically does a great job of this and it’s a free resource while NYT is a paid service.”
A one-on-one user interview led to even more insights around a successful home cooking process, namely the importance of “mise en place” or feeling adequately prepared with all of the ingredients before actively cooking. A conversation with a professional chef instructor reiterated this:
︎︎︎“The best way to prevent panic in the kitchen is to be utterly prepared.”
Defining the Job
In order to better define the key user I would be designing for, I created a persona based on my insights from home cooks. Using a jobs-to-be-done approach, I defined ideas for why this persona, Ruby, would hire the app. From there, I generated “how might we” statements based on the features of her job and began to generate solutions. I measured the success of her various job features against her previously hired solutions to see the opportunity spaces for the dream solution I would propose.
Ideation
Redefining the way a recipe is formatted digitally.
I performed a crazy 8’s exercise, rapidly sketching ideas for how a recipe could show key information while actively cooking. I then affinity mapped those ideas to identify any patterns.
Defining the Solution
Similarly to bringing a hierarchy around Ruby’s jobs, I created a hierarchy of potential solution features derived from my sketches. Ruby’s ideal solution would help her feel supported, save her time, enable her to complete the recipe successfully, and ideally she would learn something along the way.
My solution would take the existing “start cooking” feature of the NYT Cooking app and turn it into a more elaborate visual walkthrough that would onboard users to complete their mise en place, utilize better navigation, and have visual cues for reference. This new feature could also allow for utilization of the immense archive of photography and how-to videos NYT Cooking already has.
My solution would take the existing “start cooking” feature of the NYT Cooking app and turn it into a more elaborate visual walkthrough that would onboard users to complete their mise en place, utilize better navigation, and have visual cues for reference. This new feature could also allow for utilization of the immense archive of photography and how-to videos NYT Cooking already has.
Definition
Can an app become a sous chef?
I began wireframing by loosely sketching the format of the feature. Completing mise en place was a focus because if cooks were engaged from the beginning to complete those important steps, it would hopefully result in a less panicked approach. Referencing my research around the importance of preparation, I developed an ideal task flow for the home cook: gather the ingredients ︎︎︎ complete the mise en place ︎︎︎ begin actively cooking ︎︎︎ then cut the heat and begin plating their food.
I considered how navigation between steps could work, taking a familiar design pattern from Instagram stories, I figured a tap or swipe between steps could be used. During active cooking, using looping GIFs or photos that showed a visual cue for doneness would support the cook in measuring their success. Throughout the recipe, there are opportunities for additional learning that the cook could add to her toolbox.
Early interface ideation sketches.
The Prototype
Explore the prototype below
︎︎︎
• From the recipe page, the “start cooking” CTA would now direct users to this enhanced step-by-step feature.
• There are two options for gestural interactions, swiping or tapping to the next step.
• Key steps would include visual references.
• The recipe steps would be broken out onto separate lines to make it easier to follow along.
• Use of iconography would show the estimated time for each step, key insights, or links to further learning.
• A progress bar shows users how close they are to the completion of the recipe.
• There are two options for gestural interactions, swiping or tapping to the next step.
• Key steps would include visual references.
• The recipe steps would be broken out onto separate lines to make it easier to follow along.
• Use of iconography would show the estimated time for each step, key insights, or links to further learning.
• A progress bar shows users how close they are to the completion of the recipe.
Usability Test
I figured the most appropriate way to test the usability of my prototype would be to ask a user to cook-along with it. I enlisted a set of friends to zoom with me while they attempted the recipe from the prototype. I wanted to learn how they already approach cooking from the NYT app. During the test I would observe their reactions to using the app, if they felt clear during a couple key doneness steps of the recipe, and to make sure they were able to access the information when they needed it most.
The true measure of a successful usability test: a home cooked meal to enjoy afterwards!
The reaction to using the feature was positive overall. My interviewees felt supported while cooking, that the information they needed was easy to locate while cooking, and that they physically interacted with their phone less than usual. There were two key points of confusion my interviewees faced: the main entry point did not stand out enough and they attempted to click on icons for additional tips because they thought it might be linked to more content.
For my revisions I redesigned the main CTA to stand out and have more contrast. I borrowed the previous design pattern for that button to function as a secondary CTA. If an additional tip was linked, it would use the secondary CTA button. To further remove confusion, I replaced the lightbulb and play button icons with a header that denotes that the copy is part of a “kitchen tip.”
Reflections
Back in journalism school, part of why I was convinced to pivot to design were the creative digital approaches NYT takes to storytelling. When I first saw “The Displaced,” a VR 360° documentary from NYT, it was so moving I sobbed into my headset (I was pretty worried it would short circuit). With so many examples of stellar digital storytelling, it is surprising to me NYT Cooking’s recipe format is standard and does not differ much from a print cookbook experience. Motivated by my negative experiences cooking with my phone, I felt defining this problem from a UX perspective and drafting solutions could open up some creative ideas to rethink how NYT Cooking envisions users cooking along with their app. I am excited about the potential of UX to make the home cooking experience more joyful and I see the opportunities for NYT Cooking to break its digital experience out of the recipe box.
Me in chef regalia, because dressing the part is half the battle of cooking with confidence!