A Recipe for Success
In a digital world where passionate home cooks and devoted food enthusiasts unite, the AllRecipes app serves as a vibrant hub where flavors, cultures, and creativity collide. With just a tap, food lovers embark on gastronomic adventures, diving into a virtual cookbook teeming with inspiration. As a foodie myself, always on the hunt for new culinary experiences, I found AllRecipes to be my go-to source for discovering novel dishes.
However, as I delved deeper into the app, I encountered recurring problems that left me feeling unsatisfied. Determined to enhance the experience, I rolled up my sleeves, tied back my hair, and started cooking up solutions. This journey not only honed my UX skills but also deepened my appreciation for the intersection of technology and culinary arts.
Length of Project: 3 months
My Role: UX/UI Designer (research, interaction, visual)
My Responsibilities:
User Research: Competitor analysis, user testing
Wire-framing: Low fidelity, digital
Prototypes: High fidelity, digital
Microinteractions
Usability tests
User Interface Design
Conducting Research
Competitive Analysis
Determined to enhance the app’s user experience, I embarked on a UX design adventure. I began with a competitive analysis, studying other successful food and recipe apps to better understand their navigational systems and search functionalities.
Task Analysis
After gathering valuable insights, I realized that my fellow food enthusiasts and I needed a more intuitive and user-friendly interface. To create a solution that truly catered to our needs, I conducted a task analysis, breaking down the user journey into bite-sized actions from recipe search to ratings and reviews. I asked participants to complete the following tasks:
Find a recipe you can make with the ingredients you already have on hand (potato, cheese, butter). How do you search for this?
You tried a recipe and want to add your review. Where do you provide feedback?
You want to save two recipes that interest you. How do you achieve this?
Task Analysis Results
Task 1
Users had a difficult time filtering through ingredients using the “with/without” function, and searching the ingredients produced limited, if relevant results.
Task 2
The app has two ways to rate and review recipes. It displays a button within the recipe card that allows you to “rate this recipe”. It also prompts you to leave a review for the recipe if you click the stars to choose the rating. Both options make it easy for users to engage by providing valuable feedback.
Task 3
The app allows users to archive recipes to a favorites list on almost every screen. A great way to encourage continuous engagement.
Research Results
Ease of use
Existing recipe platforms often pose challenges for individuals with limited digital literacy, as they find it difficult to navigate through the interfaces and functionalities. As a result, these individuals struggle to use the platforms effectively and access the recipes they desire.
Video tutorials
Users find recipe apps with video tutorials to be highly enjoyable and engaging. These tutorials offer an alternative way of learning, allowing users to visually follow along with the cooking process. This format appeals to a wide range of users, as it provides a more accessible and interactive experience.
Ratings & Reviews
The inclusion of a rating and review feature in recipe platforms fosters user interaction and empowers users to express their opinions. This feature provides a platform for users to share their experiences, provide feedback, and contribute to the community. By giving users a voice, it enhances the sense of community and encourages active engagement within the platform.
User Personas
Empathy was key, so I crafted user personas to fully immerse myself in the shoes of different users - from novice cooks with time on their side to seasoned foodies with a tight schedule. Walking in their virtual paths allowed me to grasp the full scope of their struggles and desires.
Defining the problem
Problem Statement
The lack of navigational structure and specificity in search results made finding the perfect recipe like searching for a needle in a haystack.
Original home screen
Project goal
My objective for this project was to create an interface that fosters culinary exploration and sparks inspiration among cooking enthusiasts. By designing a more intuitive and engaging platform, I aimed to enhance the user experience and encourage increased engagement.
Ideating solutions
Armed with a deeper understanding, I set forth to design an interface that would cater to the diverse appetites of my fellow users. Low-fidelity wireframes were created using Figma to test desired user flows and uncover potential vulnerabilities. By doing so, I’m able to address issues and make changes before investing significant resources in the development phase. This approach ensures we create a user-friendly experience that meets the users needs.
Design
Colors, Typography, and Buttons
During the redesign of the AllRecipes app interface, I carefully selected colors that align with the brand’s essence of warmth, energy, and freshness. These vibrant hues create an inviting atmosphere while maintaining a sense of familiarity by closely mirroring the original color palette. This approach ensures that users feel comfortable and connected to the app they know and love. Additionally, I chose easily readable fonts that strike a balance between clarity and playfulness, ensuring an engaging and visually appealing experience.
Structure & Layout
The original layout (pictured below) lacked intuitive navigation. It was challenging to refine searches and users often encountered unrelated recipes. Users also expressed that the frequency and placement of ads within the app were disruptive and visually unappealing and that the recipe pages were cluttered making it difficult for them to follow along.
Original Interface Screenshots
Dinner Spinner
Homepage
Menu Open
Final Designs
With every pixel perfectly placed, the new and improved All Recipes app was born. Presented below are screens showcasing data-driven improvements that deliver enhanced search results, intuitive navigation, and a fresh interface, all while preserving the inviting and playful atmosphere that defines the brand.
Updated Home Screen
The home screen features a navigation bar adorned to the bottom of the screen offering swift access to various sections of the app and recipe cards that include a favorites button, which no longer distorts the accompanying photo. Additionally, I integrated video capabilities to enhance user engagement and provide an interactive experience.
Search Categories
The search feature received a complete makeover, boasting a plethora of categories that cater to every craving - from cuisines to dietary preferences. This addition allows users to easily browse and access recipe groups, making it more efficient for them to find the dishes they are looking for.
Filter Options
To further improve the search experience and ensure accurate results, I implemented an overlay with filtering options, allowing users the ability to refine their results based on specific criteria such as cooking time, meal category, occasion and more. By incorporating these filters, users can easily narrow down their search and find recipes that align with their preferences and requirements.
Open Recipe Card
The updated recipe cards now feature convenient serving size adjustments, allowing users to automatically scale ingredient quantities based on their desired portion size. To provide a more personalized experience, users can hide recipes they are no longer interested in, helping them declutter their recipe collection and focus on the dishes they truly enjoy. Additionally, the enhanced recipe cards enable users to instantly share recipes on popular social platforms.
The Wrap-Up
In the end, the journey of revamping the All Recipes app taught me the power of empathy-driven design. Understanding the struggles of my fellow foodies and designing with their needs in mind was the secret ingredient that led to a truly delectable outcome.