top of page
Savr Recipe App
Design Sprint
Five day long sprint that challenges my ability to quickly brainstorm, prototype, and test an app in 5 days. This particular sprint challenge is Savr, a food recipe app, that helps young home-made cooks try out new recipes.
My Role
Sole UX / UI Designer,
Wireframing & Prototyping
Project Duration
5 Day sprint
Area of Focus
Food, Cooking, Time, Recipes
Synopsis
As part of Springboard's academic projects, I was assigned to participate in a 5-day design sprint challenge provided by Bitsize UX. As part of the challenge, I chose to help a company called Savr determine how to improve its recipe-making process.
Challenges and restrictions
Recipes in a list
Have to be shown in a list and bullet point format.
Mobile platform
Strictly designed for mobile platforms instead of desktops.
Ready to cook
Focus primarily on users ready to cook their recipes.
Day 1: Who are the users?
All the information taken from user reach document done by Savr. All I need to to find what struggles and needs they want.
Illustrated story of Lindsey's experience
User Analysis
How can we redesign Savr's recipe page(s) so that it's convenient and informative for home-made cooks.
What do the competitors do?
Let's see what features and functions the top industry competitors have.
Tasty App
-
Shows what the food would look like at the end of each step, allowing the user to know whether they are cooking correctly.
-
Has a table of contents that allows users to skip to specific steps that they are in, removing the steps needed to get to their desired goal.
Kitchen Stories App
-
Shows what kinds of cookware the user needs to help them be more prepared.
-
Shows detailed information on how long each process takes, helping the user know if they are on the right track.
-
Each step is pinned in the video, helping the user know where they are at, to be able to quickly access the steps if they want to skip.
Day 2: What can I come up with
The process below shows how I come up with my design within a day of the sprint.
I've decided to choose Sketch #5 because I felt that it's much simpler to implement with the tools that I have and complete it within a day.
Now let's expand the feature, what it looks like, 3 steps down
Brainstorming
Features that I move with
These feedbacks were obtained after going through several more rounds of developer specs.
Informative Steps
Let the user know what they need before each step to avoid searching for the right cookware later down the line
Checkpoint System
Asks the user how they are doing, to see if they are on the right track.
Recipe FAQs
Allows cooks to share their thoughts and experiences, establishing communication between the uploader and the reader.
How my design will improve the Lindsey's experience
Day 3: Feature to wireframe
The process below shows how I transfer the features by laying out specific steps and drawing out the wireframe that the user would be using.
Plotting the path and steps that the users would go through
Information steps placement:
To solve the user's frustration of not knowing which cookware to use until it's too late
Checkpoint System:
To solve the users' concern of not knowing if they are following the recipe correctly.
Illustrating what each step is going to look like
Moving forward with Direction Idea #2
I chose to go with Direction idea #2 instead of #1 because its much simpler and convenient to implement in Sketch.
Day 4: Building the product
The process below shows how I turned the wireframe into a workable prototype for usability testing.
Using pre-build Sketch templates as a foundation for my prototype
Due to time limitations, I had to use a pre-built template from Sketch in order to complete my prototype on time for the usability test the day after.
Prototyping
Day 5: Testing the product
The process below shows how I obtained user feedback for the product.
5 Testers
Those who have a background in cooking and want to cook more recipes.
Online Zoom
Due to COVID-19 restrictions, all tests are conducted via Zoom
Testing on desktop
Since the test is on Zoom, I had the user test the product on their desktop screen.
Specifics about the test:
-
Testers would share their screen when using the prototype.
-
3 scenarios for the testers to go through, each testing the 3 features of the product.
-
After each scenario, I would have the tester explain their first impression of the feature that they went through.
Prototyping
Usability Testing
What are the results?
Conclusion
Next Steps
What did I learn?
Testing a mobile prototype on a desktop
Testers don't use mobile gestures when testing a mobile prototype on a desktop screen.
UI kits are useful for design challenges and sprints
The pre-built UI kit helped me speed up the process; otherwise, I wouldn't have finished it on time.
Making recipes, harder than it looks
Underestimated how long it would take me to recreate a recipe for the test, due to inexperience.
Everyone has their way of measuring ingredients
During the test, salt is measured much differently than a jar of pickles.
What can I improve moving forward
See if I can test the mobile prototype on mobile phones
Using the mobile app of Zoom so they can test it out on mobile while still being able to share their screen.
Solid arrows can be interpreted as play buttons
Avoid having arrows in circles as the user might think it's a play button.
Bottom of Page
Check similar projects
bottom of page