Role: UX Designer UI Designer
Date: 1/9/2023 - 1/13/2023
Mentor: Renan Castro
Tools: Figma, Google docs, Bitesizeux
Overview
Savr is a startup that wants to make it easier for people to follow new recipes and cook great meals at home. A streamlined platform for users who are less familiar with cooking. The app includes detailed steps and lists to make sure you are set up for success in your culinary endeavors.
Exploring the Problem
The problem space for Savr is part of a 5 day Google Ventures design sprint challenge from Bitesizeux.com. As such, I did not personally conduct the research. I was instead given access to interview recordings and personas in order to synthesize the data on my own. Users “we” interviewed were home cooks, preparing meals 3-5 times a week. Somewhere around entry level. From the data I was given, I found a few specific problems that I chose to tackle.
Problems:
- I’d like to see what each step looks like so I know I haven't messed up yet
- I’d like to know what cookware I will need before I start cooking
- I like for steps to be clear and concise so that I have less room for error
- I’d like to see what each step looks like so I know I haven't messed up yet
- I’d like to know what cookware I will need before I start cooking
- I like for steps to be clear and concise so that I have less room for error
Sketching a Solution
When a home cook attempts a new recipe, they are taking a risk. While sketching up a solution it is important to understand this and do everything I can to minimize the risk that users take when attempting a new recipe. Now that I had a firm grasp of the more specific problems that plague home chefs, it was time to put pencil to paper and start brainstorming solutions.
Here is my initial crazy 8 (6) of different ways I could think of to display recipes to the user. I chose to put emphasis specifically on how the recipes are displayed because the problems I had listed occurred once users were already in the kitchen getting ready to start cooking. Looking back at the problems I had listed, I thought it important to try to include as much visual representation as possible, including photographs of cookware, the food during each step of the cooking process, and even the possibility of having a video for more audio-visual learners.
To conclude day two of my five day sprint, I picked and chose some of my favorite elements from my Crazy 8’s to draft a Frankenstein's Monster-esque sketch of how the screen might be used in a small 3 screen flow. I would later opt for even more imagery in my later sketches but for now I had at least added some core features.
Included Features:
- Cookware checklist
- Ingredient checklist
- Images for each step
Deciding What Works
Day three is about deciding what works and what doesn’t, picking and choosing aspects from my ideas that would work best for the user to solve our three main problems. Without the luxury of a team, I sorted through my sketches to find which ideas solved what problems and how they can be combined to create a product as easy to use as possible.
I spent a bulk of my time on day three crafting a short storyboard of how the user might find a recipe as well as the screens involved. These seven screens are the rough wireframes that paved the way for my future prototype. I decided to include photographs of the food steps on a separate screen, this way users more familiar and confident in their cooking will not need to scroll as far to complete their recipe. Meanwhile users who need every ounce of help they can get have access to pictures, videos and cleanly laid-out steps.
Cooking Up a Prototype
Moving in to day 4, it was time to get cooking (haha) on a functional prototype in time to test it on day 5. With the rough wireframe sketched out I was able to get right into Figma and start putting together a prototype.
Key Features:
- Step-by-step images
- Cookware list including images
- Steps list with detailed descriptions
- Step-by-step images
- Cookware list including images
- Steps list with detailed descriptions
I'm very happy with how those two key screens turned out. I implemented photos for each cooking tool required, a checklist for ingredients, a video for more visual learners as well as more detailed step descriptions with photos for those who need just a little bit more information about a step. I chose to include all of these features in hopes of solving the concerns users expressed about trying a new recipe. Unfortunately Behance makes it difficult to show you what everything looks like without making the images too small or taking up a ton of space, so here! this is the prototype, feel free to click through!
Testing My Solutions
On day five, I was finally able to subject people to some interrogation. Except it wasn’t interrogation, and to my surprise users really loved it. Even asking if I had intended to make it into a real product. Of course there were issues, the prototype was built in just one day after all, but people really enjoyed the layout. That being said here were some of the stand-out problems I was able to uncover.
Problems found in user-testing:
- Having ingredient measurements and steps on separate pages meant a lot of back and fourth for more forgetful chefs
- Reviews were not included on each recipe
- No way to leave comments on recipes
- The biggest complaint of all “looking at this app makes me hungry”.
Conclusion
I loved this project, it was a ton of fun going from nothing to a testable prototype in just five days. I also had a blast making a recipe app (I am a terrible cook). If given more than just the 5 day sprint window I would be thrilled to continue iterating and incorporating the feedback from my testing, there are just so many more fun features to add! But unfortunately for me, that is where the story of my five day sprint with Savr ends.
As I'm porting this into Behance, I'm finding the format is not really ideal. Tons of text, not a lot of personality, awkward spacing. So please, if you made it all the way down here take just one more moment to see how it looked in Figma! Thank you so much for reading!
