Client:
FridgeFinds
My Roles:
UX Researcher
UX/UI Designer
Prototype Testing
Branding
Duration:
4 Weeks
Approximately one-third of all purchased food in American households goes to waste. This translates to around $1,500 worth of groceries wasted each year for a four-person household. This excessive food waste not only affects households' budgets but also contributes to climate change. According to the U.N. Food and Agriculture Organization, food waste is responsible for about 3.3 gigatons of greenhouse gas emissions annually
The Problem
Many people face challenges with meal planning and cooking, particularly when they have limited ingredients at home and are seeking creative and nutritious meal ideas. This can result in food waste, unhealthy eating habits, and a sense of monotony with their meals.
The Process
Research
Research Objectives:
Design an AI-powered recipe app that analyzes the ingredients users currently have in their kitchen and suggests personalized recipes based on those ingredients.
Cut down on users' current food waste.
Provide users with a variety of recipes based off of their ingredients.
Include AI in the design to help create the users recipes.
Provisional Personas:
The target audience will be people with hectic schedules or limited cooking experience who may not have time or knowledge on meal planning and need convenient meal ideas with ingredients they already have. By incorporating the needs of this target audience, we were able to create Provisional Personas. These personas will assist me later with user interviews and the design process.
Competitive Analysis:
With our target audience in mind, we examined other current AI recipe apps to assess the current market and observe how users are prompted to interact with the AI, as well as the AI's success rate. I scrutinized the onboarding processes, AI functionalities, design, and accessibility of ChefApp and Delicio.
Onboarding Process:
Design and Field Inputs:
Task Completion:
When I inputted the same ingredients - bread, bananas, flour, eggs, and sugar - into both applications without any customizations, ChefApp successfully provided me with a recipe. However, Delicio was unable to generate a recipe with all the specified ingredients. Only after removing one ingredient (bread) was Delicio able to suggest a recipe.
User Interview:
We interviewed 3 women ranging in age from 18- 25. The interviews were a mixture of both inperson and remote. With the insights gained from the user interviews, we created an affinity map for an easier understanding and grouping of our insights.
• We found that users often struggled to find dinner and breakfast meals, as well as the struggle to find recipes from specific cultures.
• All users reported to repeating meals due to not knowing other meals to prepare and make.
• Users reported needing a way to modify and customize the recipes due to allergies and health issues.
“Anything that I could like, plug in what ingredients I have so that I can use them before they go bad would be awesome. I would just like to have like pictures in there as well if the AI could find it.” – Interviewee
Analysis and Planning
User Personas:
With our interviews completed we created user personas to get a better understanding of a potential FridgeFinds user.
Site Mapping:
By creating a sitemap, we can start laying out the foundation for the app design and navigation.
User Flows:
With the sitemap made I wanted to investigate how users might interact with the design and its essential screens. A user flow is the perfect way to do this. The following is a user flow for a user inputting ingredients and customizations for a dinner meal.
Task Flows:
Tasks flows were also created to give us a perfect path for users navigating through the application. This is the same example as the user flow but without the user’s decisions.
Design
Mid-Fidelity Wireframes:
With the foundation established from the sitemap and user/task flows, we commenced the creation of mid-fidelity wireframes. We prioritized the development of on boarding screens as they establish the tone for user navigation within the design. Our aim was to educate users about the app's features using imagery consistent with the app's interface.
Branding:
High-Fidelity Wireframes:
Now is time to add some life to the wireframes. High-Fidelity wireframes where created to do just that.
Onboarding Screens:
The on boarding process was crucial to acquainting users with the app's functionality and design. We incorporated images of the actual design within the on boarding screens to effectively demonstrate how the app works and how to navigate its features. This visual approach was chosen to provide users with a clear and intuitive understanding of the app's capabilities, ensuring a seamless user experience from the outset.
AI Input Screens:
The AI input and generation screens are needed to allow users to see the different meals generated from the user’s ingredients. The generated recipes need to be easily digestible for users, the meal cook, and prep time were added as well as a description to better help users when making decisions on which meals to select.
Testing
Usability Testing:
With the design finalized and the prototyping completed, our next step was to test the design with potential users. We conducted usability testing with the same three women we interviewed during the research phase, both in person and remotely.
We checked for any usability issues with the design and its features, aiming to receive feedback on the overall usability of the application. Specifically, we observed how users interacted and responded to the AI feature, ensuring that it met their needs effectively. Additionally, we verified if the onboarding process was retainable for users when first starting the app, assessing whether it adequately introduced them to the app's features and functionality. By addressing these aspects, we aimed to identify any areas for improvement and refine the design to enhance the user experience.
Summary of Findings:
Based on the results of the usability testing, another affinity map was created to organize the feedback. While most users appreciated the design and aesthetic of the app, some expressed concerns about the navigation being difficult to follow. Additionally, there were comments regarding the visibility of the heart icon when selected, indicating that it may need to be more prominent or distinct. These insights highlight areas for improvement in the app's usability and visual design, which we will address in the next iteration to enhance the overall user experience.
Iteration
Navigation Iterations:
The bottom navigation was improved by adding descriptions of each icon underneath. This will provide users with a clearer understanding of the icons and screens.
Heart Icon Iterations:
The heart icon was improved to better show users when it was selected. When asked to like a recipe users had a hard time knowing If the icon was pressed or not. This was fixed by changing the color of the selected icon.
Launch
The Next Steps:
After finalizing the design iterations, it's time to hand off the design to developers for implementation. We'll ensure clear communication and documentation to facilitate a smooth transition. Simultaneously, we'll begin marketing efforts for the app's launch day, leveraging various channels such as social media, email campaigns, and press releases to generate buzz and attract users.
