Allrecipes.com is the world's largest food-focused social network with a community of 40 million home cooks. 

BEFORE

This information heavy navigation with large flyout menus is what I improved upon in my first nav redesign in 2013

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.

NAVIGATION RE-DESIGN

ALLRECIPES

core level the website's navigation is the most persistent and expressive element of the product. A focused navigation with a clear mental model instills confidence and trust in users by making it simple and intuitive for them to accomplish tasks. Up-to-date UI conventions and a clean aesthetic allow the Allrecipes brand to have a stronger presence without shouting over the noise of competing elements. 

THE PROCESS

•  Problem definition

•  Examined user data 

•  Whiteboard wireframes

•  Hi-fi mocks / UI

•  Prototype using InVision

•  Redlines and assets

 

CONTEXT 

 

Allrecipes has been the #1 recipe site for decades. In the beginning it was simply a place to share and find recipes. For a website who's content is entirely user generated, there was a gap between the content and people sharing it beyond the Allrecipes experience. How could Allrecipes make the fundamental product shift from being a directory of recipes to a food-centered social network? At a 

AFTER

The current Allrecipes nav, my redesign from 2015
The result of my first redesign in 2013

See the new navigation live on Allrecipes.

HISTORY

 

Redesigning the Allrecipes navigation happened iteratively over several years. Navigation is the front door to any website. Internally there were competing opinions about what entry points to keep in the navigation. Satisfying business objectives while not compromising user needs was a key challenge throughout the journey. 

OBJECTIVES OF RE-DEISGN

•  Update the look and feel

•  Pair down information and choices 

•  Create easy access to tools and profile

•  Update tech with responsive elements

•  Make search more visible

•  Respond to user feedback that Ingredient Search is hard to find

OBJECTIVES OF SECOND RE-DESIGN

 

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

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

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

•  Update visual style and interactions to be clean and modern

See another case study

2/4 Mobile Search

Tapping the search icon reveals a simple menu for keyword search plus fields to include and exclude specific ingredients.