About the Project
This is a one-week GV Design Sprint challenge. The original brief, “SAVR,” was provided by Bitesize UX.
Timeline
Tools
5 days
Pen & Paper, Figma
My Role
Product Designer
The Goal
My goal in doing this sprint was to revamp the UX such that complex or challenging recipes would still be followed with ease, enabling users to develop their cooking skills with confidence.
The Challenge
In this modern day and age, phones are quickly becoming instant portals for information, including recipes and cooking advice. KITCHN is an application that provides not only countless tried & tested recipes, but also a community of users to interact and share knowledge with.
However, users have expressed that certain recipes are difficult to follow due to their complexity, and users end up feeling frustrated, frazzled and unsatisfied with their experience.
In response, I set out to quickly create an improved user experience by using a design-sprint approach that focused heavily on evaluation and human-centered design. As this was an individual effort, I oversaw the entire process from research to ideation to product development.
Google Design Sprint Methodology
I used the Google Ventures Design Sprint methodology for this project. It’s a 5-day process which involves the following steps:
-
Understand. Map out the problem & pick a focus area.
-
Ideate. Sketch out solutions on paper.
-
Decide. Choose a solution.
-
Prototype. Create a realistic prototype.
-
Test. Get feedback from users.
Day 1: Understand
To really understand the problem, I dived straight into several user interviews and feedback comments. Some of the most common user sentiments were that they felt that recipes were too complicated, the instructions weren’t clear or the flow of cooking was disjointed, and therefore the finished dish was something they weren’t satisfied with.
The most prevalent pain points that I saw were:
-
users weren’t able to validate their progress as they were cooking (unable to verify if they were doing the right thing)
-
Users were stressed because they don't know the next steps or how to prepare for them: feel like steps are “sprung on” them
-
Users are frustrated with not knowing exactly what equipment is needed beforehand, and find that they waste time looking for equipment as they are going through a recipe
As a result, I brainstormed some ideas to address these various issues, and ultimately came up with a possible user flow map for my potential design.
-
The user would begin by browsing and choosing a recipe.
-
The user would then see a screen that gives an overview of the ingredients & equipment needed.
-
As the user is going through the recipe, there would be step-by-step instructions with videos.
-
The user would follow the recipe and hopefully love the final result! :)
Buzzfeed's Tasty App
I chose to examine this app because it's the top iPhone app for cooking—and for good reason. Tasty is very tailored to help its consumers create a recipe properly, as it has videos for every recipe as well as a step-by-step mode which allows for customers to follow along clearly. This also reduces the amount of information on one page, which could be overwhelming for its users. I liked the implementation of videos as well as the stepwise instructions, and thought these would be useful features for my redesign. I thought the feature of the ingredients popping out from the side was interesting, though I thought it could be improved. My take on this feature will be shown later in my design.
WikiHow App
I also looked at WikiHow, which is an app designed to teach people how to do things. While it isn't the most polished app or a traditional cooking app, it does have some recipes that mainly focus on specific cooking tips. However, because its main aim is to clearly teach people new skills, I thought it would be a good app to explore, as cooking is very much a procedural task. I like the element of checking off the ingredients, and how it has an ingredient breakdown for each major step, so that users aren't caught off guard. I also like how their user experience is seamless through scrolling, and there are automatic videos that play for each step to ensure that the user understands what each step entails.
Crazy 8 Sketches
I chose screen 4 to be my main screen, which is located at the upper right.
After choosing my main screen, I created a 3-screen sequence to further parse out the design.
Screen 1: I thought it would be good to have a recipe overview, where users could have a general picture of the recipe and get a handle on its difficulty and time expenditure.
Screen 2: I thought that an overview of equipment and ingredients needed and an ability to check off these things would aid the user in feeling prepared even before cooking.
Screen 3: I wanted there to be a step-by-step walkthrough of a recipe with video so that users felt less overwhelmed by each step and also had visual cues to see what they needed to do.
3-Screen Sketch
After studying these apps, I sketched a few potential “main screen” ideas using the Crazy 8’s method, which is a brainstorming method that involves rapidly sketching 8 screens in 8 minutes.
Ultimately, I chose screen 4 to be one of my main critical screens, as it had a picture of the setup before the recipe began, which I thought would be helpful to users who were visual and wanted to be able to see an overall of what ingredients were needed and how they ought to look. This screen also had an ingredient overview, which allows users to see what they need before the recipe begins.
Day 2: Ideate
Before I began sketching, I searched for existing applications that I could draw inspiration from, and chose Buzzfeed’s Tasty app and the WikiHow app.
Day 3: Decide
On day 3, I revisited my sketch from the previous day and evaluated whether I thought it was good enough to move forward with. Ultimately, I decided it was.
I was satisfied with my solution because of the way it incorporated both step-by-step instructions as well as the ability to seamlessly swipe between steps so that the user could easily be aware of upcoming steps.
I also liked the ability to be able to check off ingredients & equipment, though I know not everyone wants or needs this feature. I thought it would add a level of control into the user experience and would help users feel like they were able to handle the recipe because they had the tools & ingredients they needed, even if it were new and challenging.
Lastly, I wanted the design to really emphasize visual aids, and the design I chose allows for auto-playing video clips or images to aid with the cooking process.
To proceed, I sketched out a storyboard for my application.
My screens are devoted mainly to the preparation and recipe delivery , because that was the main issue of the application.
-
Since users have to open up the app, there is a simple login screen where users can login if they wish to save their reviews and recipes, or they have the option to skip.
-
Users are then brought the home/browse page, where they can search or recipes or find inspiration from the current trending recipes.
-
After selecting a desired recipe, they’ll be brought to the recipe main page, where they can see an overview of the recipe, as well as equipment and the ingredients needed. Users can choose to use the checklist feature to mark which items they have to keep track.
-
Afterwards, they are able to go through recipe step-by-step, which will help isolate each step and let the user stay in control of the situation. There is a video/visual aid for each step, to help them know what things should look like. They simply need to swipe left and right if they want to look back at the previous or next step, making awareness of the entire process easier to access.
My 8-screen storyboard for "KITCHN."
Kitchn App
The high-fidelity mockups & prototype I created for SAVR was inspired by beautiful food blogs I had seen online. I wanted it to not only be a user friendly app but also one whose visuals inspired people to cook and create beautiful meals. I used a recipe that I saw from Bon Appetit as the sample recipe for my prototype.
I used Figma to create the screens & create the interactions.
Login Page
Recipe Search
Recipe Overview
Equipment Overview
Recipe Step with Video
Hi-Fidelity Mockups
Day 4: Prototype
Day 5: Test
I recruited 5 participants that fit my persona to test this prototype.
-
2 participants: mid-50s, with relatively lower technology exposure
-
3 participants: mid-20s, who all have exposure to both cooking and technology.
I asked them all to express what they were thinking as they were navigating the prototype, and also observed them to see if there were any pain points in user flow or navigation. At the end, I asked users if they would use this app and if they had any feedback.
Overall, participants were enthusiastic about the redesign of the application, and expressed that they were willing to use this app.
Many of them noted the step-by-step format and thought it was a good way to break down complex recipes. Additionally, they appreciated the visual element found in the photos/videos, because it allowed them to see what the recipe intended for them to do, allowing them to check their progress and see at what step, if any, they went wrong. They also liked the ability to see how much of each ingredient was needed at each step, so that they didn’t have to constantly refer back to the ingredient list.
Overall Thoughts
I really enjoyed this challenge! I love cooking and learning how to cook new recipes, so the different pain points that the users were expressing were very relatable to me personally. Since this was a short one-week sprint I didn't have the time to really flush out this product, but I think I would have really liked to think about and design additional screens.
Additionally, I think it might have been productive to explore a "preview next step" feature a little more. The app currently has an ability to drag to next steps to quickly see what will come next, but I think it would have been interesting to create a feature that was a little more intentional about prepping the user for the next step.
After collecting feedback from the user testing, I incorporated changes to my prototype, which is included below.
Final Prototype
About Me