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

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.  

BEFORE

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.

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

 

AFTER

See another case study

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. 

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 

Use Ingredient Search live on Allrecipes