Designing the Ingredient Lab

Interaction Design | Info. Architecture | Wireframing | Prototyping

2 min read

Client

Food Network

My Role

Lead UX Design

Device

Web

Launched

July 2021

Overview

Recipes aren't just a list of ingredients with instructions. They are informative guides that help customers navigate the cooking journey — from deciding what to cook and buying groceries to preparing the meal and finally, enjoying it.

The Problem

Food Network recipes include a lot of detailed information — a description, ingredients, instructions, notes, ratings, reviews, and more recipes.

Research showed that customers felt overwhelmed when scanning the recipe, deciding if they could make it and eventually using it to cook.

The Mission

Evolve recipes to smoothly guide customers through all stages of the cooking journey – discovery, planning, preparation, and post-experience.

Constraints

Patterns for recipes were well-established, so the successful solution needed to embrace those patterns to avoid disturbing customers.

Overview

Foodnetwork.com customers have access to 80,000 recipes, but when customers needed to find recipes containing specific ingredients, their only tool was a basic keyword search with simple ingredient filters.

The Problem

Customers naturally entered ingredients into the search box, but the engine struggled to understand their intent, and only returned recipes containing the keywords in its title.

Customers would then manually parse the returned search results to find a recipe that contained their ingredients.

The Mission

Create a specific search by ingredient tool for customers to find recipes for the ingredients in their home that's easy-to-find, easy-to-use and returns accurate results.

Constraints

Due to a legal partnership, this feature needed to be positioned as a standalone experience for Food Network Kitchen premium subscribers.

Analyzing the App

Food Network Kitchen's mobile app had the search by ingredient feature implemented earlier in the year.
I analyzed the mobile implementation, to leverage the mobile team's learnings and to provide product parity.

The mobile edition provided inspiration, but due to product constraints, adjustments were required.