Due to the increasing interest in healthy eating habits and with busy schedules and limited time for meal planning and preparation, people are seeking easy and efficient ways to organize their meals for the week. Additionally, with the rise of online grocery shopping and delivery services, there is a demand for a tool that can generate a shopping list based on planned meals. A menu planning app that offers recipe storage, menu creation, and automatic shopping list generation can provide a convenient solution for users looking to simplify their meal planning process.
Background
While there are many recipe organization apps on the market, what sets this app apart is its innovative approach to menu planning. By allowing users to create custom menus for different occasions using recipes from their collection, the app streamlines the meal planning process and helps users save time and stay organized. With its intuitive and user-friendly interface, the app makes it easy for users to select recipes, with one touch add them into their menu, and generate shopping lists directly from the app.
The Challenge
Tools:
Figma
Canva
Google Meets
Chat GPT
Timeline:
8 weeks
My Role:
UX/UI designer
The challenge in designing this app was to seamlessly integrate the features of storing recipes, creating menus, and generating shopping lists into a cohesive and user-friendly interface. This requires a deep understanding of user needs and behaviors, as well as the ability to design an intuitive user experience that makes it easy for users to accomplish their goals quickly and efficiently.
Identify and understand the problem our users are facing with their current recipe management and meal planning methods.
Conduct thorough research to gain insights and clarify user needs and behaviors.
Utilize data-driven design principles to create clear and intuitive designs for the app.
Gather feedback from users through usability testing and other research methods to validate the design and identify areas for improvement.
Make iterative changes to the design based on user feedback, ensuring that the app meets the needs and expectations of the target users.
Project Goals
Discovery
Research Goals:
Understand what the pain points are of users who are feeding large crowds/ cooking large meals.
Hear user stories about the process of preparing large meals and what constraints they face.
Understand how different sized families cook meals.
Understand what users look for in useful organization methods.
Understand how users curate their menus and shopping lists.
What are the most popular websites that users use for finding recipes.
Compare and contrast other apps already on the market and discover the best designs and features that I want to implement.
User Research
11 participants were interviewed remotely or in person.
Interview Questions:
What is the cooking style in your household? Do you mostly prep and cook your own meals or do you prefer to eat out mostly. Why is that?
Walk me through the last time you meal prepped. What were the steps you took? What did your process look like?
What does a typical food shopping experience look like for you?
In what ways do you wish the process could be streamlined?
What do you find most useful about using a meal prepping plan?
How do you feel about meal prepping from an emotional standpoint? I.e. is it something you enjoy? Do you find it stressful?
If you could change anything or fix anything about your process what would it be and why?
Participants:
Users who currently or have in the past used a meal planning program.
Users who currently or have in the past used a meal planning app.
Users who consistently cook or meal plan for large crowds.
Users who have interest in meal planning, cooking for large crowds, or meal planning apps.
Key interview insights:
100% of the interviewees emphasized the importance of convenience and time-saving in their cooking routines.
75% of the interviewees mentioned that their personal preferences and dietary restrictions influence their meal planning and shopping habits.
100% of the interviewees face challenges in deciding what to cook, especially when they need to come up with meals on short notice.
25% of the interviewees prefer to shop in stores once a week, while 50% use online shopping and delivery for convenience, and 25% keep a shopping list on their fridge and add to it throughout the week.
50% of the interviewees mentioned that having additional help in the kitchen, such as a sous chef or someone to do food prep, would make cooking more enjoyable and less time-consuming. Other factors that contribute to a more enjoyable cooking experience include music, focused cooking without distractions, and a sense of accomplishment after finishing the cooking process, as mentioned by 25% of the interviewees.
Empathy Map for User (based on average responses from interviews)
User Says:
"I value convenience and time-saving in my cooking routines."
"I often struggle with deciding what to cook, especially when I need to come up with meals on short notice."
"I have personal preferences and dietary restrictions that influence my meal planning and shopping habits."
"I prefer to shop in stores once a week or use online shopping and delivery for convenience."
"Having additional help in the kitchen would make cooking more enjoyable and less time-consuming."
User Thinks:
"I want to make delicious meals that fit my dietary preferences and restrictions, but it can be challenging to come up with ideas on short notice."
"I need to plan my meals in advance to ensure I have all the necessary ingredients."
"I want to save time and effort in the kitchen to enjoy other activities in my busy schedule."
User Feels:
Frustration when trying to decide what to cook and feeling limited by dietary preferences and restrictions.
Anxious about making sure they have all the necessary ingredients for their meals.
Overwhelmed by the time and effort required for cooking, especially during busy times.
User Does:
Shops in stores once a week or uses online shopping and delivery for convenience.
Keeps a shopping list on their fridge and adds to it throughout the week.
Tries to find ways to make cooking more enjoyable and less time-consuming, such as seeking additional help in the kitchen or creating a pleasant cooking environment.
User Needs:
Convenient and time-saving solutions for meal planning, grocery shopping, and cooking.
Inspiration and ideas for meals that fit their personal preferences and dietary restrictions.
Assistance or tools that can help with meal prep or make cooking more enjoyable and less time-consuming.
Competitive Analysis
Reading user reviews from the top 3 competitors in the App Store gave me insight into what user needs were being met within these apps and what was still lacking.
Plan to Eat is a menu planning and recipe organization app that allows users to import recipes from the web, plan menus, and generate shopping lists. Unlike the app being studied, Plan to Eat also includes a meal planner that allows users to schedule meals in advance. However, Plan to Eat's interface is less intuitive and may require a learning curve for new users.
Yummly is another recipe organization app that offers features such as recipe search, meal planning, and grocery list generation. One of its strengths is its built-in timer feature that helps users cook their recipes with precision. However, Yum's interface can be cluttered and overwhelming, making it difficult for users to navigate.
Paprika is a recipe management app that allows users to organize their recipes, plan menus, and generate shopping lists. It also offers a feature that allows users to scale recipes for different serving sizes. However, Paprika's interface can be complex, and it may take some time for users to learn how to use it effectively.
Ideation
Defining the User
Giving Structure to the Data…
This site map was designed to create a clear and organized user journey, allowing users to easily navigate through the app's features and content. This was crucial in outlining the structure and information architecture of the app, which included features such as a recipe database, menu creation, and shopping list generation. By carefully planning and mapping out the user journey, we were able to ensure that each feature was presented in a logical and intuitive manner, making it easy for users to accomplish their goals efficiently and effectively.
Getting into the user’s shoes…
Task Flows and User Flows mapped out the journey of my user both on global and analytical level, which helped me to see which roadblocks my users might come up against and how I could design with those in mind and make sure the experience of creating menus and adding recipes would be as smooth and easy as possible.
Task Flow
User Flow for “Creating a Recipe”
User Flow for “Creating a Menu”
Design
Branding the product…
The brand values for the app were centered around the principles of being “easy, fun, and fast”. These values were expressed through the use of carefully chosen colors, logo design, and fonts that aligned with the app's overall aesthetic and user experience. By focusing on these values, the app was able to effectively communicate its purpose and goals to users, creating a sense of trust and confidence in the app's ability to simplify and enhance their meal planning and cooking experience.
Logos
Components
Typography
Colors
Icons
Sketches and wireframes
The design plan for my MVP was to focus on recipe saving and categorization, menu planning, and grocery list generating.
Sketches
Low Fidelity Wireframes
Early phase iterations…
Following a discussion with the developer about the technology involved in importing recipes from other websites, we ultimately decided that a manual input method would be the best approach. This decision was based on the belief that manual input would be easier and more straightforward for the user in the long run, as well as the fact that it would help expedite the development process. By focusing on creating a simple and user-friendly interface for manually inputting recipes, we were able to ensure that users could easily add their favorite recipes to the app without any unnecessary complications.
Previous Design
Iterated Design
Mid Fidelity Wireframes
One of the goals I designed for this app is to allow the user to explore the app before committing to creating an account. Therefore I designed the flow in a way that the user can skip the onboarding process and explore the app but they will eventually have to create an account before they can save any recipes into the database.
Mid Fidelity Wireframes
Testing
Does it make sense to the user?
The goal of conducting usability testing for the recipe app was to evaluate the ease and efficiency with which participants were able to achieve three predetermined goals:
Add a recipe
Create A Menu
Generate a shopping list
To conduct this testing, I arranged for remote sessions with five participants and gathered feedback on their experiences. This feedback was then compiled and analyzed to identify any pain points or areas of improvement in the app's design and functionality.
80% of users expressed a need for clearer feedback and confirmation when saving recipes, such as a pop-up message indicating that a recipe has been successfully saved.
60% of users suggested adding tags to categorize menus, allowing for serving edit options in the menu edit page, and generating a shopping list button within each menu for improved menu planning functionality.
70% of users found the flow of the app pleasant and enjoyable to use, but expressed confusion about the functionality available without creating an account, and suggested incorporating prompts to create an account when saving a recipe.
50% of users expected more advanced features, such as a pantry feature and the ability to edit items based on available ingredients, similar to other apps like Paprika.
90% of users suggested improvements for adjusting servings on the recipe review screen, adding prep time and difficulty level categorization, providing a skeletal menu setup, and making the grocery list filtering more obvious for better usability.
Making changes to improve the product…
I prioritized the iterations based on what I needed in order for us to launch Phase One of the app (MVP) and kept the remainder of the iterations as “next steps” for Phase 2.
Prototype
Next Steps
Phase 2 Iterations:
Add a Social aspect to the app where you can follow others and see their menus and recipes (Spotify Model)
Create a “pantry” option (Paprika Model) where you can keep track of what ingredients you have at home.
Design a skeletal menu page so users can easily add recipes for each section of the menu.
Incorporate smaller details such as syncing the app with music apps, having an assistant feature for reminders (to take out ingredients from the freezer) timers, make recipe notes, etc.
Reflections
Designing the recipe app provided me with invaluable insights into the world of data-driven UX design. Despite the fact that the project took longer than initially planned, the extra time afforded me the opportunity to thoroughly explore my users' perspectives, my design choices, and the iterations that followed. Collaboration with a developer was instrumental in honing my communication skills and taught me the importance of working as a team at every stage of the project. Looking ahead, I learned the importance of moving forward with a project, even when information is missing or time is limited, and that iterations can always be made later. These valuable lessons have equipped me with a solid foundation for future UX projects and will serve as a reference point for continued growth and development in the field.