Ingredient search helps home cooks quickly find recipes based on ingredients they have on hand.

INGREDIENT SEARCH

ALLRECIPES

CONTEXT

Home cooks are often crunched for time. Sometimes they are just browsing and other times they are looking for a recipe they can make with ingredients they have at home. User feedback and data over time made it clear that Allrecipes users want a quick and easy way to search for recipes by including and excluding specific ingredients.

THE PROCESS

• Problem definition

• Examined user data and existing personas

• Sketched user flows on the whiteboard

• Wireframes

• Hi-fi mocks / UI

• Prototype using InVision

• Redlines and assets

A LOOK AT EXISTING PERSONAS

After examining a set of existing user personas for Allrecipes, it was clear which 2 of the 5 would be most likely to use ingredient search over others. Both Foodies and Social-bites are tech savvy and use advanced search options. While they would likely be primary users of the feature, my goal was to make it more accessible and prominent for all 5 of the personas.

BEFORE

SOME HISTORY

The original version of ingredient search was a tool accessed via a link near the search box in the top nav. Once clicked the user was taken to a new page with separate search fields for each ingredient included and excluded. The visual style was outdated and the UI tedious to use. Data told us that usage was low aside from the obvious areas of improvement.

MAIN OBJECTIVES

• Keep search entry in context of the navigation until the search is committed

• Make function, hierarchy and placement of entry point clear and focused

• Update visual style and interactions of the tool to be clean and modern

• Reduce number of clicks needed to use the tool

• Allow multi word terms to be distinguished from each other without typing into separate search fields

AFTER

Use Ingredient Search live on Allrecipes

CHECK IT OUT

MY ROLE AT ALLRECIPES

At Allrecipes I worked closely with product managers and engineers of multiple scrum teams plus other members of the design and marketing team. My role as a UI/UX designer was very collaborative especially with other designers. I worked iteratively on a variety of products including the main website, an Android app, iOS Apps as well as a Windows app.