Allrecipes.com is the world's largest food-focused social network with a community of 40 million home cooks.
NAVIGATION RE-DESIGN
ALLRECIPES
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
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
BEFORE
This information heavy navigation with large flyout menus is what I improved upon in my first nav redesign in 2013
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
AFTER
The current Allrecipes nav, my redesign from 2015
The result of my first redesign in 2013
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
At the mobile size the navigation is broken down to 4 major elements: The Allrecipes logo, search, user head, and overflow menu. (Homepage design done in collaboration with Tiffany Jessup and Bryce Gifford)
Tapping the search icon reveals a simple menu for keyword search plus fields to include and exclude specific ingredients.
This menu is reserved for elements that would normally be shown in an expanded view of the navigation plus content that is secondary to the main set of user objectives.
At the mobile size the navigation is broken down to 4 major elements: The Allrecipes logo, search, user head, and overflow menu. (Homepage design done in collaboration with Tiffany Jessup and Bryce Gifford)
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.
