Real Recipe
Project Overview
Real Recipe is a new startup that shows hundreds of recipes to help people follow new recipes and cook great meals at home. Recently, Real has been seeing negative reviews about recipes involving multiple steps. Users felt that the recipes are difficult to execute or the instructions are unclear. Therefore, Real needs to create a better method for users to learn the recipes effectively.
The Problem
A new design that incorporates more teaching methods such as video instructions, photo examples and more to help users better understand more complex recipes.
The Solution
As the UX/UI designer, I was challenged to complete the design of Real Recipe during a five-day design sprint. I mapped the IAs, created interactive prototypes, conducted usability tests, and finalized the designs.
My Role
Mapping, Sketches, Wireframes, Prototypes, Interaction Designs, Usability Testing, Presentation
Deliverables
Final Prototype
Day 1: User Research
The first step of my design process is getting to know my users better to successfully improve Real Recipe’s user experience. I gathered quotes from reviews that capture different user perspectives to fully understand what they have been saying about Real Recipe.
Users Reviews
“I can see what the finished product looks like, but I don’t know if I’m on the right track halfway through...is it supposed to look like this? If not, it’s better to know sooner rather than later.”
“It’s fun! If I have time, I’m up for a
challenge. And I think it’s the best way to
learn to cook when I have the time. There
are some parts I don’t enjoy though…like
emptying my cabinets because I don’t know what kitchenware I need, or constantly needing to wash my hands so I can refer back to my phone.”
“Sometimes I feel like steps are sprung on me...and that turns an enjoyable experience into a stressful one. ”
“I know the basic definitions - like, what
minced Garlic should look like. But a lot of
times I see techniques that I am totally
unclear on. I google image search or
youtube it, which kind of throws everything off- and, means needing to drop what I’m doing to use my phone.”
Key Insights
After reading through all the reviews, I identified these key insights:
Users would like to minimize the time spent on their phones when learning a recipe
Users would want to know if they are on the right track during cooking
Users feel like the current experience is overwhelming
Mapping
With the identified key insights in mind, I began to map out the possible goals the user wanted to achieve. Mapping allows me to empathize further with my users’ needs by listing the steps they will take with Real Recipe. I then brainstormed two main routes with multiple branches where users would interact with our app. These possibilities include saving a recipe if users enjoyed it and leaving a review to help the app improve.
Day 1 Takeaways
To begin a project, the most important is to empathize with your users to create a product that best fits their needs. After day one, I learned that users value:
An accurate estimate of the recipe’s level of difficulty and cook time.
Photo or video documentation to show what a step is supposed to look like
A hands-free option to reduce time going back to their phones while cooking.
Day 2: Sketches-Crazy 8’s
For day 2 of the design sprint, I turned my ideas for possible solutions into sketches. Since I had a deeper understanding of my users’ needs, I was able to come up with multiple functions that could solve the negative reviews Real Recipe has been receiving. Some of the sketches include the following:
Adding a speaker option allows users to let the app read out the recipe.
Adding a video recipe so users could better follow along with a professional chef teaching them.
Adding a review option allows users to leave any comments on the recipe.
Day 2 Takeaways:
The crazy 8’s challenge pushed me to generate as many ideas quickly as possible. Once I saw the app visually, the solution unfolded itself. I wanted each recipe page to begin with a video at the top to demonstrate a more accurate learning process. To minimize users’ time on their phones, I also added a speaker so users could choose to have the recipe read out loud. Each recipe should include images of the more difficult steps for users to know they are on the right track. Finally, I want users to be able to review and leave comments they have about Real Recipe to help us improve.
Day 3: Create a Storyboard
The next step of my project is to create a storyboard. A storyboard helps me map out each step of the experience that I want to test. Here, I drew scenes depicting how users would interact with my app while making a meal, from entering the kitchen to opening the app. I further included functions such as playing a video and saving the recipe since I viewed them as important upgrades that would improve the user experience.
Day 3 Takeaways:
Creating a storyboard helped me validate users' steps as they navigated the Real Recipe app. Giving the user multiple ways of learning a new recipe was crucial since everyone learns differently. Users feel most at ease when they are in control of their experience.
Next Steps: Building a Style Guide
Based on Real Recipe’s logo, I created a color palette that describes the friendliness and warmth of the app. My goal is to make users feel welcome when trying to learn a new recipe.
Creating a Brand Identity
For the font family, I chose Poppins, a simple yet fun font representing the Real Recipe brand.
Day 4: Prototypes
I was ready to create my prototype with my chosen brand identity from the ideas I generated. I wanted a clean and user-friendly interface to ensure a positive learning experience.
Putting it Together
User flow 1: Picking a recipe
User flow 2: Learning the recipe
User flow 3: Leaving a review
Day 4 Takeaways:
Building a prototype allowed me to see the app in action. I was able to experience the app as a first-time user to navigate any challenges new users would face. Furthermore, a prototype helped me decide which functions would be practical or redundant.
Day 5: Testing
For my usability test, I tested 5 users who are interested in learning recipes or have prior experience doing so. I then gathered my observations from these tests and ranked each issue based on priority.
Users reported that it would be better to see photo examples directly instead of having to click on words to see them.
Critical issues
Solution
I eliminated photo definitions of words and showed the photos directly.
Major issues
Users prefer a star rating system to a questionnaire.
I changed the questionnaire to a five-star rating system so users can see each recipe’s ratings clearly.
Solution
Minor issues
The video for the recipe should be full screen.
I added a new screen showing how the full-sized video works. Users will now be able to transition between the full-sized video and the regular-sized video.
Solution
Day 5 Takeaways:
Conducting usability tests with target users is certainly the optimal feedback a designer can get. From the suggestions and opinions users have voiced about my app, I was able to upgrade it to the fullest.
Final Prototype
After tidying up the UI design and incorporating my new designs, I created the final product of this design sprint. The final design includes browsing recipes from various categories, learning a recipe using three methods, rating and saving recipes.
Reflection
This design sprint was an exciting challenge because it taught me new ways of designing, such as the crazy 8’s challenge and storyboarding in a short period of time. The sketching challenge pushed me to visualize as many possibilities my product could have, while storyboarding helped me communicate the functions of my app in sequences. Overall, I learned that design processes can come in different shapes and ways while still resulting in a helpful product.
For my next steps, I hope to add more filters for recipes, such as sorting recipes by popularity, so Real Recipe users can further benefit from my designs.