UI/UX Case Study: Designing Mae’s Cookbook, a product that provides food recipes for users.
We’re in 2021 and I still can’t cook a meal successfully. Can you?
“Food, as a form of art is unique in many ways. Just like painting appeals to our sense of sight, and music appeals to our sense of hearing, food, when created at its best, appeals to all five senses at once. Textures, flavors, colors, and aromas of ingredients used greatly influences the overall taste of a meal.” For some, cooking is an highly enjoyable task while for some others like myself, it’s a tiring chore. However, when we think of cooking as an art practice or project than a chore it becomes a much more enjoyable process. To eliminate one of the factors that contribute to us seeing cooking as a chore, I designed a mobile application that walks you through the process of cooking a meal successfully and provides an opportunity for users to share their creative work of art.
Introducing Mae’s Cookbook
The creation of Mae’s cookbook is fueled by the desire to provide a database of recipes where users can have a directory of their favorite meals. To make the UX more extended, it allows users to search for its recipes by the supplies they have, preferred cuisine types, occasion and more
The application layout is structured around intuitive navigation, high readability and eye catching background. However, it is enough to give users a product that solves their problem but much more better when you give users product that solves their problems according to their specific needs
How does Mae’s Cookbook help?
- Provides step by step instructions to people who have little or no understanding on how to cook a satisfactory meal
- Provides variety of recipes based on users dietary requirements
- Provides a means of communication between a user and the chef to enable the user inquire about the cooking process
- Reduces the average number you burn a meal yearly by about 80%
Users: Mapping Needs and Priorities
Initially, I conducted interviews asked participants, “What if you had someone to walk you through the process of cooking your desired meal every time?” and “What benefits will a food recipe app bring to you?”
Through this, I arrived at the following:
- For people who have little or no understanding about cooking, providing recipes at their fingertips is a way to alleviate difficulty and ensure they cook their desired meal successfully
- People want to enjoy cooking because for some, it serves as a form of relaxation
- People are anxious and worried when they find recipes for their desired meal but the ingredients does not meet dietary requirements
- People feel nourished when they are part of a community that provides insights into how to nourish the body of others
From here, I reframed my challenge into this question
“How can I provide the required information and walk Sandra, our faux persona, through the process of cooking her desired meal and help her feel confident about her journey as a chef while simultaneously enhancing her mental state”
Understanding the users, their desires, and preferences is a step closer to designing important screens, crafting the perfect delivery process, and solving the outlined process within the app.
I was able to categorize insights that stood out to focus on them and turn them into design opportunities with an Affinity Diagram
From the diagram above, I grouped “Potential features” which are crucial to users into two; high and medium value.
User Flow Mapping
The next step was to sketch out the flow of the main features
Designing a solution
Can I know what works for you?
To be able to customize the app experience for each user, I prioritized onboarding as a must-have feature. I looked at the onboarding process of comparators like Tasty and decided that I wanted Sandra, or any user, to feel excited and relaxed about cooking their meal. Having the users getting g anxious and asking questions about their desired meal fitting into their health needs wasn’t an option. A two-part questionnaire screen was designed to understand the specific dietary requirement which in turn, would be used to determine and customize their experience.
View Personalized Recipes
Where users can explore recipes recommended to them based on the information provided during the onboarding process. On this screen, there are numerous options from which a user can choose. It navigates to another screen where the user can view the table of information on the page; Instruction, Utensils, Videos, and Ingredients. Cooking time, difficulty level suggested accompaniments, tips, and measurement of ingredients per serving are provided on the “Ingredients” section. To make the UX more extended, I added an audio reading option to relieve users of the stress of holding a phone and cooking simultaneously. Easy peasy.
Hierarchy of Data Points:
- Primary: Food photo name, ingredients, utensils, measurement, instructions, and videos.
- Secondary: Cooking time, serving, difficulty level, suggested accompaniment, and tips.
What’s in your kitchen?
Based on the insights I gained during the research stage, it wasn’t enough, for users to search for the name of the recipe alone. Other options available to users are Ingredients, Cuisine Type, Diet, Occasion, Season, and Difficulty.
Create your own Directory
Users can create a directory of their favorite recipes and group them into categories
Profile
This screen houses all the customized information and preference of uses from the onboarding process. On the top of this screen is a section for users to share their recipes. It navigates to another screen that compiles necessary data about the meal and the cooking process.
Share
This feature allows you to be creators. Users can fill in the required information about the meal, add a photo of the meal, and post.
💡 What’s Next?
The goal is to keep updating and creating. I look forward to adding:
- A chat button that connects you with a professional. From the user research, I understood that it’s not enough to have data and instructions. Somethings need to be broken down and some concepts need to be explained.
- A section to have multiple accounts and of course, each will be personalized. With this, users will be able to switch between multiple profiles and see what’s new for them.😉
- An option that lets you sync Mae’s cookbook with your shopping list. That is, when a user likes a recipe, it automatically transfers the ingredients to their shopping list. Cool right?😎
Takeaway
Working on this project was a way for me to sharpen my UX skills. It also made me understand how difficult it is to introduce the small new feature into a product which will change the enter User Experience.
Thanks for reading 💕. I’ll love to have feedback from you whether it’s on my writing, methodology, or any other thing you think I should improve. Don’t forget to clap👏🏾 for me if you love my designs and this documentation.
Reach out to me on 📩 oreoluwanimiadey@gmail.com, Twitter, or LinkedIn if you’ll like to collaborate or have a chat. You can also check out more of my works on my portfolio
