UX DESIGN

NYTimes Cooking app "Use Up" Feature

A feature added to the NYTimes Cooking app to help people make the most of the ingredients they have on hand.

View Prototype
 3 mobile screens showing the new "Use Up" feature
Cooking is a personal journey, and for many NYTimes Cooking is a go-to resource for their cooking adventures. As someone who loves to try out new recipes at home, I find myself drawn to the app for its amazing recipe content.  That being said, I've experienced some frustrations while navigating the app  – from juggling ingredient amounts and reading directions simultaneously, to the occasional unhelpful search results.

These little quirks got me wondering: am I the only one experiencing these frustrations? I wanted to find out what hurdles (if any) others are experiencing with the NYTimes Cooking app, with the hope of making the experience of cooking even smoother and more enjoyable.
Project Overview

PROBLEM

I approached this project not knowing if others were experiencing a problem that could be solved with a feature. Turns out, people meal plan in order to avoid wasting food, but still find themselves wasting ingredients.

SOLUTION

The solution of a "Use Up" feature recommends recipes based on the ingredients you have on hand. While similar to the existing search function, it differs by suggesting recipes for those odd amounts of ingredients you have left over, ultimately helping to waste less food.

My role
Self-directed UX/UI Designer. This is a project for Designlab's UX Academy. I am not affiliated with NYTimes Cooking
Project Goal
Design a new feature for the NYTimes Cooking app that is in line with users' needs, goals, and motivations.
Research Methodologies
Secondary Research, Survey, User Interviews, Competitive Analysis, Usability Testing
Biggest Lesson
Ask "why", and then ask "why" again...                                                                       
Tools
Figma/Figjam, Maze, Google Forms                                    
Result
A high-fidelity prototype that integrates the new feature into the NYTimes Cooking app interface.
Constraints
80-hour project timeline, Existing UI, Navigation & Information Architecture
Good recipe content can only go so far...
RESEARCH GOAL

Without the certainty that there was a problem to be solved through a feature to begin with, I needed to gain an understanding of people's experience with the app. With that, I set a broad research goal:


I need to understand the behaviors, needs, and motivations of NYTimes Cooking app users to know if a newly designed feature could meet their needs while also helping to meet business goals.

SECONDARY RESEARCH

Through gathering data from app store reviews, I began to familiarize myself with some major frustrations people were experiencing.

A GIF of me organizing post-its with secondary research data

🔍 Search & filter frustrations

Many reviewers voiced frustrations over the search function not showing results related to their search. Through playing around with the search myself, it seemed like a glitchy backend was responsible for some of these frustrations, which is likely not something an added feature could solve for.


"I cannot search the recipe box...even worse, while i can save recipes from the internet to my recipe box, they often save w/o an image and in brackets says “name not available”

“Nothing in the results matches the data I search for. I just hate that i can’t find things i want with even a simple search, even w/ all the recipes in this database.”

"It's a recipe box. It does have decent search functionality but doesn't take advantage of being an app.

"Please add more filters to the search!"

🙏 Desire for more

Many users expressed a desire for more from the app. There were requests for nutritional info, more video instruction, and capabilities of toggling between multiple recipes at once. I sensed there was something here to explore so I decided to continue on with my research.


“I really love all of the recipes featured...however, i wish there was a sort of “stacking” feature, so if you simultaneously cooking 2 things, like a main course & a side or veggie you could swipe between the 2 recipes."

“Nutritional information is hardly ever included in recipes..."

"Would love if they actually committed to the video visuals. The “learn to cook” section is lackluster & abandoned. The “featured guides” don’t see any consistent updates.”
Uncovering underlying needs & motivations

At this point, I needed to acknowledge that foundational issues related to search & filter functions would likely not be solved through a new feature. However, secondary research pointed towards possible desires for users to use the app for supporting nutritional goals, learning & mastering cooking techniques, & meal planning.

SURVEY

To understand more about these additional desire I found in the app store reviews and to determine whether my assumptions were leading me down an unproductive path, I needed to gain a deeper understanding of how people engage with the app. Initially, I wanted to conduct a diary study, but due to time constraints, I conducted a survey that mimicked a diary study.

I surveyed 16 regular users of the app to understand:

  1. Why they are using the app
  2. When they are using the app
  3. Where they are using it the app
  4. What they are looking for when they are using the app
takeaway 1
Most people want more learning opportunities

The majority of people are interested in learning more about cooking techniques from the app.

takeaway 2
Recipe browse & chill

People engage with the app mostly during their down/relaxing time, usually for recipe inspiration.

takeaway 3
Desire to use app for planning & nutritional goals

Many users are not necessarily looking for additional information beyond the recipe itself, but some are interested in learning how to meal plan or meet nutritional goals.

Talking with users to understand behaviors
USER INTERVIEWS

To understand the deeper why's & motivations behind these insights, I needed to speak with people who regularly engage with the app.

I conducted 4 one-on-one interviews helped to shed some light on how & why people use the app.

Screenshot of 3 separate video chat between me & 3 app users for user interviews.
insight 1
Motivations for meal planning

The motivations for meal planning are to save money, waste less food, and eat health. All participants meal plan using a variety of external tools (notes app, physical notebook, excel spreadsheet).

insight 2
People want to feel prepared

Despite the fact that the app does provide some “how-to” educational content, people have found themselves ill-prepared or uncertain doing various tasks called for in a recipe.

insight 3
People want more support to learn & grow

While some people engage with the educational content sprinkled throughout the app, they still feel as if they have gaps in their cooking skills and often look to external resources, sometimes leading them to more frustration.

Identifying the most realistic & impactful solution
HOW MIGHT WE

Taking the insights discovered through research, I generated 4 “How Might We” statements based on user POV’s to begin leaning into the pain points.

How might we...

  • ...provide learning opportunities to more effectively guide users through their cooking experiences?
  • ...better equip users with the necessary knowledge & support to feel confident in their cooking abilities?
  • ...help users feel more prepared as they set out to cook?
  • ...help users make the most out of the ingredients that they are buying for their weekly meals?
IDEATION

To begin imagining ways each of these pain points could be addressed through a newly added feature, I had a brainstorming session using the ‘Playing with Opposites’ approach.

In reviewing the ideas generated from this session, I asked myself...

  • Which of these solutions would make the greatest impact for the business?
  • Which of these solutions could seamlessly be designed into the app within the constraints of the existing IA & navigation?
  • Which of these solutions would be most effective at targeting user pain points?
Narrowing down the solution

After the ideation session, I knew that I needed to narrow my focus to 1 HMW statement, currently my focus was too broad targeting many different problems.  I returned to analyzing the interview data and came across this quote from an interview participant:

"I struggle with figuring out what to do with the odd amounts of ingredients I'm left with after cooking that initial meal..."

- Interview participant

The struggle of using up the food one has on hand is experienced by people who meal plan. If a primary motivation for meal planning includes avoiding food waste, then this is an important problem to address.

How Might We help users make the most of the ingredients they buy for their weekly meals?


In addition to the fact that this HMW statement would be solving a foundational problem for meal planners who use the app, a solution to this problem also has the greatest potential of not interfering with the app's existing IA & navigation, while taking advantage of the recipe metadata. Targeting an issue related to learning would most likely require new content creation, which could possibly be unrealistic for a product team.

Synthesizing findings into a persona
USER PERSONA

Now with the confidence that I had identified a deeper problem, I brought the data to life by personifying Sam. Sam meal plans to waste less food, but he still finds himself throwing out food each week.

Zooming in on Sam's pain point
JOURNEY MAP

Putting myself in Sam's shoes helped me empathize with his emotional journey within this problem space. Based on the research, Sam would make a plan to use up leftover ingredients he has at home, but not dedicate the time to research what recipes he could make using the odd amount of random ingredients he has, and then ends up tossing out the items.

I put myself in Sam's shoes at the point of having to toss out the food. I thought, "If I'm Sam, and I want to avoid tossing out food but don't have the time to invest in making a new recipe with those ingredients, how could this app support me in this moment?"

User Journey map showing Sam's journey from intending to use up the food he has on hand, to not having enough time to make it and throwing it away.

User Journey Map (click to enlarge image)

Clarifying the parameters of this solution

Looking back at the idea of a "Use Up" feature, I began an internal dialogue before committing to this as the solution.

"How would this work?"

People would input the ingredients they have on hand to have recipes recommended to them based on what they want to use up.

"But isn't this just a search function?"

In a way it is. It is a feature that makes search work better. It doesn't solve the problem of a buggy search engine that currently exists, however, it provides an opportunity for people to enter an ingredient, AND QUANTITY, and receive recommendations and prompts based on these inputs.

A sticky note from my initial ideation session of a "Use Up" feature. The sticky note reads: "Use Up feature that suggests recipes based on ingredients the user has on hand (is this different from the search function...?)
What can we learn from companies in this problem space?

COMPETITIVE ANALYSIS

Looking at apps that either directly or indirectly help users make the most out of ingredients they have on hand helped me to begin envisioning how the solution could naturally fit into the NYTimes Cooking app.

Misfits Market

While this app does not specifically work to help users make the most out of their ingredients at home, it does deal with the problem space of minimizing food waste in general which I hoped to learn from.  

Cooklist

Cooklist helps users be aware of what they have on hand via a pantry feature. This is something that feels related to a potential solution so this app was definitely worth exploring.

Blue Apron

Blue Apron helps people use what they have on hand from a slightly different angle. I was curious as to what I could glean from this app.

Strategically positioning the feature

INFORMATION ARCHITECTURE

With the new feature selected, I then created an app map to make decisions about how it should be integrated into the app's information architecture.

Because the home or “Browse” page currently includes a “Recently Viewed” section, I wondered how necessary it was to keep the “Recently Viewed” tab as well. I decided to try out replacing this tab with the new “Use Up” feature, keeping in mind that users could still see their recently viewed recipes just by going to the home and scrolling down.

App map of the

Original app map (click to enlarge image)

App map of the NYTimes Cooking app with the new "Use Up" feature integrated

New app map (click to enlarge image)

SKETCHING

Sketching through key screens, I put myself in the shoes of Sam to be sure I was including all of the steps before testing.

USER FLOWS

Mapping out a user flow was another way to double-check that I was thinking of all potential interactions Sam might encounter while using this new feature.

User Flow displaying the decisions a user encounters to engage with the new feature

User Flow (click to enlarge image)

Matching NYTimes Cooking UI, despite accessibility issues

UI & VISUAL DESIGN

With sketches underway and the placement for the feature now decided, I now needed to be sure the feature seamlessly fit in visually with the existing design of the app.

My goal for this project was to match the existing UI as accurately as possible, however if I were working for NYTimes Cooking, I would want to explore the reasoning behind the 26px x 26px icons as this size is not best practices for accessibility.

HIGH-FIDELITY SCREENS

Next, I designed the key high-fidelity screens that would be necessary for usability testing.

USABILITY TESTING

With my high fidelity wireframes complete, I created the prototype for usability testing. My testing goal was to evaluate the ease of moving through the tasks by regular app users. I conducted an unmoderated test with 4 participants who each tested 3 key task flows:

  1. Open the app and navigate to the new "Use Up" feature
  2. Engage with the feature as if you were looking to find away to use certain ingredients
  3. Edit initially added ingredients
Iphone mockup of NYTimes Cooking home page with the new "Use Up" feature integrated

Click to open the interactive prototype

‘Success’ for this test was determined by task completion of  75% or more participants and an average of 3 or higher on Lickert scale questions related to ease. To measure this, I asked participants to answer questions on a scale from 1-5.

  1. Their ease completing each task - average rating of 3.8
  2. Their satisfaction with the concept of the "Use Up" feature - average rating of 4.3
  3. Their ease of clicking on icons/buttons associated with the new feature - average rating of 4
  4. Their likelihood of using the feature in their daily life - average rating of 4.3

What went well

Participants were very satisfied with the design and remarked that it was in line with the NYTimes Cooking app design that they are familiar with.

4 out of 4 participants expressed that they would use this new feature and expressed general excitement about the concept.

What needs work

There was confusion around how to view the added ingredients as a user was going through the "Use Up" flow. This was an oversight in the design as it is important for users to be able to edit and check what they have added throughout the process.

FINAL PROTOTYPE

Trusting the process

REFLECTION

The "Use Up" app now allows cooks the opportunity to make the most out of the ingredients they have on hand while still taking advantage of the extensive recipe content that NYTimes Cooking has to offer. This is an improvement to the Cooking app and will help NYTimes Cooking retain its users. This feature does not address the main problems that exist within the app, but it meets the need that was discovered in my research.

WHAT I LEARNED

Keep asking "why?"

In one of my interviews, the participant had only positive feedback to share on the app. Mid-interview, this caused some panic as it caused me to doubt whether I was talking to the right user group.  Ultimately I discovered a deeper problem, but only after dealing with some mid-interview doubts!

check out my other projects