New York Times Cooking

Project Overview
In 2017 New York Times launched a new subscription service for its cooking website, the most recent in a series of experiments into ways NYT can make more money from its existing content. To say the least, users were not happy. Through user research, I implemented features that according to users would justify the subscription based paywall.
View Prototype
Task: Feature addition
Role: UX/UI Designer
Duration: 1 month
Tools: Adobe XD, Invision
Challenge
Strategize through human centered design research methods to determine necessary features to implement on the New York Times Cooking website. Create a high fidelity prototype consisting of added features based on synthesized user research.
1. Research
2. Ideate
3. Design
4. Protoype
Process
Taken just before devouring chickpea and kale soup inspired by a recipe found on New York Times Cooking.
Research
The New York Times website has over 150,000 recipes and over 120,000 subscribers. Through surveys and conversations I received a wide range of opinions, ideas, and insights regarding the user experience of browsing recipes online.

User Survey & Interviews
I conducted an online survey to gather qualitative and quantitative data on user browsing patterns. I wanted to know:

What is important to users in their search for recipes?

Why do these users return to a website? And why don’t they return to a cooking website?

I received 25 responses. From these responses, I conducted 1:1 interviews with four of the participants with varying cooking skill levels.

I discovered that time is the most important factor regarding browsing online for recipes, specifically saving time.

Users desire cooking websites that make their lives easier. These categories include but are not limited to techniques, organization of recipe data base, and trusting that a search engine on a website will function as intended by web developers.

I synthesized the data in the form of a fun infographic.
Persona Development
The data collected from user contextual inquiries was then analyzed to create a user persona. Personas contextualizes, organizes and personifies the research. Personas illustrate who we are designing for and why.

Meet Eric
For Eric, cooking is the antidote to long days at the office. Eric is fairly new at cooking and utilizes websites with instructional videos to learn basic cooking techniques. Eric desires clear and precise information from cooking websites personalized to his skill level and amount of time he can allot to the kitchen on any given weekday.
Meet Eva
Eva has an infectious love for home cooked meals as all of the family relishes in the food she prepares. Time moves at a rapid pace in her household with school and after school activities. However, Eva somehow manages to find the time to cook wholesome meals accommodating her kid's preferences and her husband's allergies. She does wish the search for new recipes was a less arduous process.
The creation of these two personas answered, who is the target audience for New York Times Cooking? The target audience is based on Eric who would like to reduce the amount time sifting through recipes and ingredients so he can maximize time in the kitchen learning new skills. The target audience is also Eva who would like to save time by quickly searching through recipes based on ingredient preferences.
Ideate
Based on user needs I narrowed in on what features to add in order to save time. I decided on the following features:
1. Grocery list to enhance meal planning capabilities

2. Filters to easily find a recipe based on a specific set of parameters

From this stage, I moved on to information architecture and interaction design. I created a site map to define the hierarchy of the added features and how the features will interplay with the existing site. This helped mentally visualize how users would interact with the prototype before building out mid-fidelity wireframes.
After determining the interactivity with existing components of the site, I moved into designing and building the experience. Information architecture, interaction design, and wireframes each progressed in two week sprints.

After showing some initial designs of the wireframes to a potential user, she suggested I add a dietary preference feature as a way for users to save their preferences based on dietary restrictions. It was a wonderful idea, one that I implemented into the features.

Wireframes
Below are wireframes for the filters and preference page for desktop and mobile.
Design
Bringing the designs to life by filling in color and images is a part I enjoy. New York Times uses rich photos with darker backgrounds illustrating the beauty and realism of their dishes.
UI Kit
I used UI elements that were already in place while also creating new UI elements to adapt to the new designs. I detail all of the elements in the UI Kit.
Prototype
Test
I asked five participants for feedback to evaluate the desktop prototype thinking about cohesion, usability and their overall thoughts of the new features. All five participants believed the new designs are cohesive to the aesthetic. However, there were some limitations to the prototype tools as I was unable to create hover states for some of the elements in the prototype tool.  In my next test, I’d like to design more pages to include these hover states on the clickable areas.While conducting user testing, the topic of accessibility arose in the discussions. Issues such as small button size on the recipe page affected the user’s ability to add ingredients to their grocery list.

Next Steps
My next steps are to iterate based on usability testing to continuously improve the product to meet the user’s needs. I am curious to see how the future of cooking websites unfolds to reveal more features to enhance the user experience.

Conclusion
As I explore the evolving nature of UX, this project enabled me to see user experience at play on a large and small scale. All of the online cooking recipes and blogs use similar design patterns so that users can efficiently browse easily through websites. From my research, I’ve come across an online community as these design patterns unite not only the cooking websites, but the users as well. This ease of use is achieved by utilizing consistent UX/UI design patterns that users are familiar with, that also engage the user to interact with the website. It was an enjoyable experience to put these design patterns in action to create new features. Looking forward, by listening to users and adding features using the existing UX/UI design patterns, the possibilities are endless.

This project is not affiliated with New York Times and is a capstone project for DesignLab UXA. All photography by Whitney Martin.