Allrecipes Redesign: Home & Filtering
Allrecipes is a popular recipe website with a mobile app that allows users to discover new recipes to cook. Some features include saving a recipe, leaving reviews on a recipe, and posting your own recipes for others to try out. Through a heuristic evaluation, I identified issues with the user experience and interface of the app, which led to a redesign of Allrecipes' with wireframing and prototyping.
timeline
tools
constraints
role
team
two weeks
December 2022 – January 2023
Figma & Figjam
exisiting design
UX researcher & UX/UI designer
myself
Problem Statement
The current user experience of the Allrecipes app presents challenges a number of issues for users. From sorting and filtering to how information is presented, there is room for improvement of the existing interface. How can I redesign the mobile app to deliver a more seamless and user-friendly experience?
Solution
I prioritized a redesign of Allrecipe's home page's filtering and sort-by features, as these features are the most impactful when a user views the mobile app for the first time and begins to explore interactions. I investigated the task flow of the filtering system in particular, the insights from which then formed the foundation of the redesign.
Design Process
01. Empathize
Heuristic Evaluation
I conducted a heuristic evaluation of the Allrecipes app as it is to examine what works well and what can be done better. I wanted to highlight the areas with the most prominent issues of usability.
User Stories
I created a few user stories to describe what the user wants to accomplish when using the Allrecipes app. These user stories serve as reminders of user goals, influencing how to organize and prioritize the design of every page.
"As a full-time student, I want to easily filter by ingredients, so that I can find a dinner recipe to make tonight with ingredients I have on hand."
"As an amateur foodie, I want to quickly save many recipes to sort through later, so that I can experiment more."
"As a busy stay-at-home parent, I want to learn about recipes at a glance, so that I can efficiently and decisively scroll through brunch ideas for my family."
02. Define
Task Flow
Using task flows for features such as filtering, I mapped out the structure and relationships between various interactions and content in order to get a better sense of organization and navigation for the mobile app.
03.Ideate
Wireframes
For wireframes, I created several sketches implementing redesigns for elements from the heuristic analysis that could be improved. At this point in the design process, I realized the space limitations, so I decided to narrow the scope of the redesign to the home page's filtering and sort by features.
04. Prototyping & Final Product
High-Fidelity Prototype
For the high-fidelity prototype, I focused on redesigning the home page's filtering and sort by features, as these are most impactful when first viewing the mobile app and when discovering new recipes. Furthermore, the filters and sort can be applied to other pages, such as the saved recipes page. Having a comprehensive filtering system also makes the dinner spinner screen obsolete, since the filtering allows the user to search for the recipes in the same way but improved because it enables more search features, such as dietary needs or multiple ingredients.
06. Reflection
Overall, I am satisfied with the way the project turned out. I felt challenged by the scope of the project at first, but finding an area of focus helped to deliver the most impactful design. With more time, I would like to revisit other parts of the Allrecipes mobile app, e.g., the reviews section, to do a complete redesign of the interface. It would also be helpful to conduct a brief usability study to understand how users interact with the updated features, in order to further iterate upon the design.
