Allrecipes.com is the world's largest food-focused social network with a community of 40 million home cooks.
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.
• Problem definition
• Examined user data
• Whiteboard wireframes
• Hi-fi mocks / UI
• Prototype using InVision
• Redlines and assets
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
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.