duration : 5 Days, Modified GV Design Sprint Challenge (BitesizeUX)
MY ROLE : Sole UX Designer
Tools : Adobe XD, Miro
PROJECT SUMMARY
Completed a 5 Day Design Sprint Challenge by BitesizeUX for a Mobile Recipe App to improve their recipe page and provide a seamless experience for users during their cooking journey. I achieved this by creating a step by step cooking flow including visuals that leads users through the cooking process and adding a voice interaction feature that helps with navigation and recipe dictation by responding to user requests for a hands-free cooking experience.
Even though the solution I arrived at requires additional testing and validation, this Design Sprint has provided me with an opportunity to be able to understand the goals, come up with quick ideas, and produce an improved outcome within a short span of time.
Play to view the final experience of my Recipe App
DAY 1 - MAP
OVERVIEW
What is Savr Recipes?
Savr is a new startup that shows hundreds of recipes with cooking tips for at-home chefs. They have an active community of users who rate and review recipes for other users.
Problem
Recently, Savr has seen some negative reviews about recipes that involve more steps, or more advanced techniques. Many people who were excited about a certain recipe ended up with disappointment about the outcome, because they didn’t find the instructions to be clear, or easy to execute.
Solution, Design Constraint
Though Savr gets lots of positive feedback on the quality of their recipes, the focus here is to create a better experience for users during the cooking process. The solution will be designed as a feature for the Savr Recipes native mobile app.
How can we create a better user experience for a user who is in the kitchen with a chosen recipe - ready to cook and follow instructions?
Why did I choose this Design Challenge?
As a person who loves cooking and trying innovative dishes, I have often found an interesting recipe online, eagerly gone through, but ended up with disappointing user experience leading to abandoning their site (forever). Hence I chose this challenge not only to be able to empathize as a designer, but also as a primary user.
“A cookbook is only as good as its worst recipe”
– Julia Child, the French Chef
RESEARCH
From the research highlights, persona and an interview video provided by BitesizeUX, I was able to synthesize the data and gather insights on user behaviors, needs, expectations and pain points.
Research Goal
To understand the user experience of cooking a new recipe for the first time
Persona
The following persona describes a 29 year old male, a working professional, who cooks about 3 times a week. He enjoys trying out new dishes. His pain points and goals are explained in the persona.
“Sometimes I feel like steps are sprung on me… and that turns an enjoyable experience to a stressful one. I like to be as prepared as I possibly can be before I start cooking things I can’t undo”
– User quote
Synthesized Data and Findings
Users enjoy the challenge to cook new dishes but they have their own needs and frustrations.
1 Clarity
- Users do not understand if they are on the right track at different points in the cooking process.
- Dropping the app - Unclear techniques and definitions cause to research outside of the app for clarity.
2 Timing and Proactiveness
- Users would like to save time by being ready for the next few steps i.e., having the ability to visualize the outcome.
- Time consumption with complicated recipes has created stressful experiences. Users would like to learn what needs to be prepared beforehand and the duration it takes for the entire meal preparation so they don’t have to rush doing things at the last minute.
3 Efficiency
- Minimize the pots and pans to avoid unnecessary steps and cleanup.
- Increase the productivity by reducing having to physically operate the mobile device in between the cooking process.
“I will know how to utilize my time on a weekday when recipes stay true to how much time it is actually going to take”
– User quote
The following map contains the steps the user takes to achieve his or her goal.
End to End User Experience Map
DAY 2 - SKETCH
Solo-version of Lightning Demo
My goal was not only to research how the recipes are being presented but also to get insights from the sites that use the voice command feature in order to provide users with a Voice powered cooking journey experience.
What I liked about Food Network is that it has the ability to select or deselect the ingredients list as we begin the process of meal preparation. Their recipe preparation contain a progress bar that helps to foresee the number of pending steps. It also has a substitutions section to help find an alternative ingredient if the primary ingredient is not available at home.
Screenshots from Food Network App
Screenshots from Tasty App
Tasty app on the other hand has two modes - first, a written step by step list of instructions to be followed and second, each page representing each step of the instruction containing a video along with some written content. The quantity of each ingredient in the ingredients list gets adjusted according to the user preferred number of servings which saves users' time.
I looked into the voice command feature to prevent ending up with a messy phone or being less efficient by cleaning hands regularly to view the recipe.
Amazon Alexa creates a seamless voice assistance experience. When I requested for a recipe, the app responded with the recipes and looked forward to my next command. I was impressed with its capability to understand the voice commands without any flaws and provide the desired outcome.
Screenshots from Amazon Alexa App
Screenshots from Hound App
Then, I reviewed Hound, the Voice assistant app. I used voice search that led me to the respective recipe page (as shown in the images). Pressing “Start cooking” button led me to recipe instruction pages with each step being presented on individual pages. For every page, the voice assistance icon reads the recipe instruction of the step that it is on, when pressed.
Crazy 8’s Exercise
Since the users of the app already have a positive experience in finding quality recipes, for this design sprint, I am primarily focussing on improving the experience of the Recipe pages so the users can have a pleasurable cooking journey.
Crazy 8's Sketches of the critical screen - Recipe Pages
Solution Sketch
The sketch below displays the solution of the critical screen(s) (Recipe pages) when the users navigate by selecting a recipe from their Favorites.
Solution Sketch - 1) Favorited Recipes 2a) Recipe landing Page 2b) Recipe - Step by Step Instructions Page 3) Cooking/Recipe Completion Page
The Recipe landing Page contains a video of the entire recipe, Ingredients amongst others. The user can begin their cooking journey by pressing “Begin Cooking”. Each subsequent page contains a short video of the instructions as they make progress in their cooking. The users can choose to read the step by step instructions provided on each page or can use the voice assistance feature for a Hands free cooking experience. Once the cooking process is complete, the users are provided with a final screen where can choose to navigate to Home or to the recipe landing page.
DAY 3 - DECIDE
Storyboard
Based on the solution sketch of my critical screen(s) from Day 2, I tried a couple of other solutions before finalizing the idea. Since it is a voice assisted cooking app, I included key voice commands on the screen to aid users in taking the necessary action. With this idea, I sketched possible interactions that the users would take to complete their cooking journey.
Storyboard
The user logs in to the app (Screen 1) → Lands in Home Page (Screen 2) → Explores the recipes (Screen 3) → Views favorite recipes (Screen 4) → Navigates to the desired recipe page (Screen 5) → Takes a quick peek at step-by-step recipes (Screen 6) OR → Begins cooking by watching videos [Users may choose to use voice assistance to navigate and watch videos] (Screen 7 through 10) → Cooking completion page (Screen 11)
DAY 4 - PROTOTYPING THE SOLUTION
Prototype
There are two phases on the Recipe Page:
1 Physical activity such as clicking and typing.
Users can navigate through the app by pressing the buttons to learn a recipe.
2 Voice Interaction such as speaking and listening.
Users can engage the application using voice commands in order to learn a recipe.
The prototype signifies Voice Powered Recipe Page(s) where the users can choose to have the voice assistance enabled as desired.
Once the user lands on a Recipe page, they have the option of going over the entire recipe on a single page or follow the step by step video instruction for the recipe with optional voice dictation. The Recipe landing page and its accompanying instruction pages are the critical pages, whose functionality will be tested on Day 5 to understand if the app meets user expectations and uncover any usability issues.
Recipe Page
DAY 5 - VALIDATE
UsAbility Testing
I conducted 5 moderated remote usability test sessions of my High Fidelity Prototype via Zoom. Friends and acquaintances were enlisted as participants.
Participants’ Characteristics
1 Out of the 5 participants, 3 were working professionals and 2 were homemakers.
2 3 participants cook on a daily basis while the other 2 cook mostly on special occasions.
3 The participants prepare meals for themselves and/or family members either out of interest or out of necessity.
4 The participants like learning new recipes.
Objective
1 Observe participants’ behavior and identify their expectations when they learn a new recipe.
2 Uncover any usability problems on the recipe and its instruction pages.
Findings
The user testing sessions helped me understand the participants’ perspectives while learning a new recipe with the optional voice assistance feature.
“Some people modify the recipes to make it work for them. Learning those helpful tips from other people might make my cooking easier and interesting”
– Participant quote (from User Testing Session)
Positive Feedback
Overall, the users were impressed with the voice assisted cooking feature and expressed that it would be very useful and be a time saver without having to pause, wash hands, wipe and check the mobile.
The users also provided positive feedback on the layout, visibility of the buttons to begin cooking and read cooking instructions.
“I really like the way the content is laid out. The buttons are straightforward and takes me to exactly where I am looking for”
– Participant quote (from User Testing Session)
Key Insights - Improvements and Recommendations
1 Unable to navigate to the next page to continue the cooking process: The users were unable to find the buttons (Back and Next) above each cooking video containing step by step instructions.
Improvement: Placing the Back and Next button below the written instructions would make it easier to navigate.
2 On the cooking flow (step by step video instruction) pages, the users could not notice the Ingredients section provided at the bottom of the page.
Improvement: Move the Ingredients button below the cooking video for higher visibility.
3 Some users also expected to see the step by step instructions below the Ingredients list / Description on the landing page.
Improvement: Mentioning an overview of the steps will provide the users to take a quick peek at the steps on the landing page before having them navigate to another page with the detailed step by step instructions with images.
4 The cooking flow pages begin with the prep work (like mincing, chopping, grating etc.). The users feel that the flow must begin with sourcing the ingredients and confirming that the users have got everything before they move on.
Improvement: When a user clicks on “Begin Cooking”, navigate them to an ingredients page first before moving on to prep work and cooking. This helps to ensure the users have all the ingredients ready based on their preferred servings.
“Just like assisting with the cooking steps one at a time, It would also help if the voice assistance reads the ingredients one at a time, at users’ guidance”
– Participant quote (from User Testing Session)
CONCLUSION
This 5 day design sprint has come to an end!
As a designer and as an avid cook, my mission was not only to deliver a consistent, usable and a relevant user experience, but also to create an engaging and enjoyable experience so the users would be enthused in trying more new recipes.
How did I go about doing this?
1 Provided the CTAs to encourage the users in taking the necessary action.
2 Created a step by step cooking flow to guide users along the way.
3 Visuals - such as images and videos displaying the progress for each step so the users feel assured and not lost in the middle of cooking.
4 The star of this app! - Seamless voice interaction that assists with navigation and recipe dictation by responding to users' commands for pausing, repeating or moving on to the next step until the cooking is complete.
Even though the solution I arrived at requires additional testing and validation, this Design Sprint has provided me with an opportunity to be able to understand the goals, come up with quick ideas, and produce an improved outcome within a short span of time.
Challenge
The main challenge I faced was the constant need to go back and make changes to my wireframes by adding additional features. But due to lack of time, I concentrated only on the critical features targeted to achieving the goal. The positive feedback from the users during user testing sessions was promising.
What’s Next?
If I were to continue working with Savr, I would incorporate my recommended solutions to the issues identified during the testing sessions which would be followed by another round of usability testing.
Additionally, based on the conversation with the participants as well as along with my goals and ideas, I believe making the following additions would benefit the users:
1 Even though the voice assistance feature may provide seamless interaction with a user, having an additional help section to learn about voice commands would be useful.
2 Prevent the screen from inactivity timeout - When a user chooses to read the recipe and cook (from cooking instructions page) instead of enabling the voice assistance, providing an option to the user to prevent the screen from dimming due to inactivity will provide a solution closer to a Hands free cooking.
3 Adding Nutrition Information to the recipes.
4 If the current ingredients are unavailable to the users, providing alternatives or substitutions to the specific ingredients would enable them to use handy ingredients available at home.
5 Learning tweaks made by other users who have tried the recipe may be helpful.
6 In case of a complex recipe, the users would go through multiple steps to complete their cooking journey. The users prefer to be able to jump to a particular step to watch a video rather than having to navigate through each step/page to get there.
