SAVR
Role: UX and UI Designer
Tools Used: Figma, Photoshop, Invision
Problem: SAVR is a start-up that teaches people how to cook. An app was created to share recipes with people and did so with lines of text in sequential order. After initial popularity and success, the app began receiving negative reviews regarding the recipes, and the creators wanted the problem solved.
Unlimited Resource Solution: SAVR app recipes presented in real-time, video tutorials supported with step-by-step, slide presentations. The recipes are categorized by difficulty level, allowing users to decide based on perceived skill level.
Limited Resource Solution: Recipes filtered by skill and presented as step-by-step, pictorial slide presentations
Day 1 of 5
Understanding the problem: The provided research (user interviews) was analyzed, highlighting a common theme. Users felt unprepared as they followed the recipes. Reasons cited for the lack of preparation:
Poor explanation of time required
no visual understanding of the process
Surprises that led to irreversible mistakes
I was given recordings of users that were interviewed and asked about their experience with SAVR. These were extremely helpful in highlighting recurring issues.
End-to-End Map
This is a great way to walk through the problem and quickly come up with possible solutions. The steps in red would later be consolidated into a single recipe choice that could be filtered by difficulty.
Day 2 of 5
Lightning Demos: Looking for inspiration, competitor apps and websites were searched to find possible solutions to the preparation problem. The Traeger app, Kitchen Stories app and Tori Avey website were chosen.
Key Takeaways:
Cook times broken up
Difficulty level given
Video tutorial provided
It was a time saver to see what is already being adopted by competing apps. It also backed up the common issues delivered by the SAVR user interviews.
Day 3 of 5
Crazy 8’s Exercise: After checking out the competition, a sketch exercise requiring 8 quick designs in 8 minutes was completed. The user interviews had revealed that SAVR insufficiently explained its recipes. So the Recipe Launch Screen focused on information and explanations. Techniques, ingredients, and actions would be explained in a video and complimented with still images in a slide show.
The Chosen Screen: This Recipe Launch Screen holds a lot of information, so the lower right concept was chosen for its hierarchy and legibility. Looking back, the start button and meter could be scaled down to give the images more room.
It was important to see the screens before and after the chosen screen to make sure the flow made sense.
Day 3 of 5
Story boarding: With the 3-panel sketch as a starting point, a storyboard was drawn to answer, “What might it look like to begin the app, choose a recipe and click through the preparation, cooking and resting periods of the recipe?”.
I would use storyboarding again in the future. It takes a little bit of time, but while sketching, gaps in the flow were revealed and quickly and easily resolved.
Day 4 of 5
Prototyping: The screens were re-created in Figma and connected as a prototype in Invision, for testing.
The user first chooses between Meats, Vegetables or Desserts. Then the choices are refined and the skill level decided. Not all recipe screens are created, but enough to get the user’s reactions and thoughts about information and feeling prepared.
The initial screens focus the user’s choice down by food category, time, and ease. These would address the takeaways from the user interviews and competing apps.
The Recipe Launch Screen gives the user a list of Ingredients , required Techniques and a Timeline. They hit start to begin and follow slides or video tutorials to finish.
Day 5 of 5
Interviews: 5 test subjects were selected to be observed interacting with the app and interviewed afterward.
The challenge with this test is that to fully understand the efficacy of the visuals, timeline and skill level selection, the subject would need to actually be cooking; a situation not budgeted for in this sprint.
However, the Design Sprint did quickly generate useful, actionable information and impressions from the following individuals:
There is a lot going on with this prototype, I would like to learn more about creating fully interactive prototypes. Stopping the users during testing to explain what should be happening kind of muddies their reactions.
Robin-Cooks 1/week, Skill Level/Beginner:
Found some messaging and labels confusing
Pleased to see there were visual learning elements, would most likely follow the slides
Wants visuals labeled
Campbell-Cooks 3/week, Skill Level/Beginner:
No issues with flow
Liked video option, but thought the slides would be her tutorial of choice. Felt she could follow a recipe with pictures
Appreciated the recipe break-up into Prep, Cook and Rest. She felt that would better prepare her
Tim-Cooks 4/week, Skill Level/Intermediate:
Made it through the flow, but tripped up a few times with the choice menus and CTAs
Doesn’t normally watch people cook
He preferred lines of text, but also visuals of food and cookware
Jill-Cooks 3/week, Skill Level/Beginner:
Messaging a little confusing
Too much going on. UI needs to be simpler for her
She liked that the recipes were broken up into parts, especially the prep, which would help her feel ready to cook
Summary
Observed test subjects preferred text with some type of visual, such as a slide, over text-only options
All subjects responded that seeing images of the recipe during the process would give them more confidence
All subjects responded that breaking recipes up into parts would make the experience easier
A Visual Slide Presentation, explained through text, would help users feel more comfortable and prepared to follow recipes. Increasing user success and removing frustrations would lead to fewer negative experiences to be written about, solving the problem.
