/static/media/home.e936369fc674afb0113c.png/static/media/recipe_serve.31d42e8f41d006abab7d.png/static/media/grocery_edit.ff90fcca3635ffb19345.png

The New York Times Cooking App

is a subscription-based platform with over 110 million users accessing 22,000+ recipes with personalized features and shopping lists.
PROBLEM
The NYT Cooking app lacks a feature to adjust serving sizes, making it difficult for users to scale recipes accurately. This can lead to errors, inconsistencies, and confusion during meal prep.

solution
Introducing a serving size adjustment feature would automatically update ingredients, cooking times, instructions, and grocery lists in real-time, ensuring recipe accuracy and improving the overall cooking experience.
role
UX Researcher
UI Designer

duration
4 Weeks

tools
Figma
Photoshop

Research

Through competitive research of recipe platforms, I identified an opportunity to enhance the NYT Cooking app with dynamic serving size adjustment that would automatically recalculate ingredients, grocery lists, and nutritional information proportionally.
competitive analysis swot
/static/media/nyt_swot.ada0e605e14483e80ecb.png
In moderated research sessions with five participants, I explored how home cooks interact with recipe scaling features. Through affinity mapping, I found that users highly value accurate recipe scaling and want seamless integration with the NYT Cooking app's grocery list and nutritional information tools. Smart scaling capabilities that automatically adjust all recipe components would greatly enhance usability and improve the cooking experience. The following patterns highlight key user needs and expectations:
  • Recipe adjustments must update ingredient quantities, steps, and cooking times simultaneously.
  • Serving size changes should automatically reflect in grocery lists to ensure accurate shopping.
  • Visual cues for scaled recipes improve clarity and user confidence.
  • Users value tools that support batch cooking, smaller portions, and dietary preferences.
  • Automatic scaling features need to be fast, intuitive, and time-saving.
affinity mapping
/static/media/nyt_affinity_crop.7751750f836be09fc7f9.png
Sarah is an empty nester embracing her newfound time to explore cooking as a creative outlet. She seeks tools and inspiration that make scaling recipes, discovering unique ingredients, and learning new techniques both seamless and enjoyable.
persona
/static/media/nyt_persona.49ddab80fc5c9b04b946.png

Define

Through user research and affinity mapping analysis, I identified these key priorities for the NYT Cooking app's serving size feature:
1
Smart Scaling Algorithm
Develop an accurate serving size adjustment feature that maintains recipe taste and integrity while automatically recalculating ingredients
2
Integrated Updates
Ensure the scaling feature simultaneously updates grocery lists and nutritional information when serving sizes change
3
User Interface Improvements
Design an intuitive interface with clear controls and visual indicators to help users adjust serving sizes confidently
These insights helped define the goals, which I represented visually using a Venn diagram.
venn diagram
/static/media/nyt_venn.920cd231d174d4922a2a.png

Ideate

Drawing from my research I identified the key sections and features that the website should include:
  • An intuitive interface providing serving size controls with visual feedback and real-time updates
  • A dynamic system for automated recalculation of ingredients, grocery lists, and nutritional information
  • A consistent visual system presenting original vs. adjusted quantities
  • A seamless approach integrating with existing NYT Cooking features

Design

After identifying key features for serving size functionality, I created a user flow showing how users can adjust recipe portions while managing grocery lists and nutritional information.
user flow
/static/media/nyt_user_flow2.eea61e8923afcee14a17.png
The user flow diagram helped me visualize how serving size adjustments would impact the recipe page's layout and functionality, guiding the creation of low-fidelity wireframes. The goal was to incorporate NYT's existing UI while ensuring that features like nutritional information and the grocery list would update dynamically when the serving size was changed. Following are the key points:
  • Mapped key interaction points where serving size adjustments affect layout, ingredient quantities, and features like the grocery list and nutritional information.
  • Designed wireframes to visualize how changes in serving size would update ingredient amounts, nutritional data, and the grocery list in real-time.
  • Ensured seamless integration with NYT’s existing UI, maintaining consistency in design while adding dynamic updates for the new feature.
low fidelity wireframes
/static/media/nyt_midfi_big.456bde0ed591a1ea1477.png
In moderated testing of the low-fidelity wireframes, five participants rated the serving size feature 5/5 for ease of use. However, the overall satisfaction score was 88%, due to dissatisfaction with the existing NYT UI, particularly around the grocery list editing. Since their existing UI was out of my scope, I focused on the following leaving the rest of the NYT designed unchanged:
  • Enlarged and moved the edit and done buttons from the top navigation bar to the right of the recipe name.
  • Changed the edit grocery list page deletion UI to mirror the existing NYT’s UI.
high fidelity wireframes
/static/media/nyt_hificrop.57c3c8c6801ff9a1d2a0.png

Testing

The high-fidelity wireframe testing with 6 participants revealed strong results:
  • Users rated the serving size feature highly (93% satisfaction), with all users appreciating the red +/- adjustment buttons for visibility.
  • The grocery list functionality received an 87% satisfaction score, though users requested additional features like inline editing that are beyond the current project scope.
  • Overall site usability scored 87%, with users noting that the UI design aligned well with the New York Times brand identity.
  • The main improvement request was to allow single-unit increments for serving size adjustments instead of increments of two.
iteration
/static/media/nyt_iterationTypecrop.28aa53fcf1c3e09c81ed.png
view prototype

Reflection

What challenges did I face, and what do I think led to them?
Through this project, I faced several interesting challenges centered around user expectations for grocery list functionality. While users appreciated the serving size adjustment feature, they frequently requested enhancements to the existing grocery list functionality. Though the NYT Cooking app already has established grocery list features, expanding these capabilities was outside my project's scope, which focused specifically on serving size adjustments.

How could I have improved my approach?
Looking back, I could have improved my approach by more clearly communicating the project's focused scope during user testing, helping participants understand that while their grocery list suggestions were valuable, the primary goal was to perfect the serving size adjustment feature.

What insights did I gain?
The most valuable insight from this process was discovering that even simple features, like serving size adjustments, can significantly impact user satisfaction when implemented thoughtfully. Users appreciated the app's potential for both large and small meal planning, showing that functionality doesn't need to be complex to be valuable. This reinforced the importance of balancing feature enhancement with simplicity - a key learning I'll carry forward to future projects.