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
Project Duration
5 Days
Area of Focus
Food / Cooking / Time / Recipes
Synopsis
As part of the Springboard's academic projects, I was assigned to do a 5 day long design sprint challenge provided by Bitsize UX. As part of the challenge I choose to help a company called Savr figure out how they can improve their recipe making.
1. User Analysis
2. Brainstorming
3. Wireframing
4. Prototyping
5. Usability Testing
Challenges & Restrictions
-
The specific recipe steps and ingredients has to be shown in a listed/bullet point format.
-
Has to be specifically designed on a mobile app platform.
-
Focus primarily on when the users are ready to cook on their recipe.
User Analysis
Starting day 1, I used the research done by the Savr team in order to construct my own user persona. Later moving into sketching a end-to-end map to see which specific areas that I want to improve on.
Illustrated example of the user not being well informed by the recipe
How can we redesign Savr's recipe page(s) so that its convenient and informative for home-made cooks.
Brainstorming
Here is where I would show you the process that went through in order to figure out what kind of solution I would provide, and what key features that would serve as an MVP for my app before moving to wireframing.
Inspirations & Competitor Analysis
Kitchen Stories App
I liked how Kitchen stories would show the user what kind of utensils and ingredients needed for specific steps. It allows the user to be more prepared, so that their cooking won't get disrupted because they didn't have the correct utensils. In addition, I liked how they would show how long the recipe would take to finish each phase, so that the user can plan ahead accordingly.
Tasty App
One of the things that I liked about Tasty app is that in their recipe's step by step pages, it shows what the food would look like at the end of each step. Furthermore the recipe page allows the user to steps if they already know or would like to revisit a specific step.
The Crazy 8 sketches on Checkpoint system idea
Here I used the rapid Crazy 8 sketching method, as suggested by the curriculum, to draw out my idea of a Checkpoint system that I believe would help the users be more informed about whether they are following the recipe correctly.
I've decided to choose Sketch #5's idea because I felt that its much simpler to implement with the tools that I have and complete in it by Day 5.
Narrowing my designs
After choosing Sketch #5, I sketched two designs, to see which UI layout I liked. In addition I'd also created 3 more pages in order to get gauge the flow of my idea.
My design's main features
While my idea revolves around the Checkpoint System throughout the sprint process I've also added in features like Informative Steps and Recipe FAQs. The Recipe FAQ feature, specifically, was integrated right before usability testing just to see how the testers would respond to it.
Ideally how my solution would improve the user's experience
Wireframing
Day 3 was when I finalized what my user flow and the majority of the pages of the prototype would be and structured.
User flow
The image below is the final sketch that I decided upon before moving into designing the wireframes. As mentioned aboce the FAQ features wasn't implemented until right before the usability testing.
Storyboarding the Wireframes
Bringing back the design that I've chosen, I then created an entire wireframe storyboard to sketch out almost every pages that you see below from the landing page to the recipe step by step pages for my prototype. As a side note, I ended up choosing Direction Idea #2 due to it being much simpler to implement in Sketch.
Prototyping
For Day 4, I turned all of the wireframes from the storyboard into a working prototype on Invision, with Sketch. Since I am working solo I had to use one of the Sketch's recipe UI design kits in order to complete the task in one day. There were a couple of changes such as the removal of the arrows in the step by step pages, due to myself being curious to see if the testers would automatically swipe left and right.
High Fidelity Prototype
Usability Testings
For Day 5, I conducted at least 5 usability testing on people that matches with my user criteria. The criteria being anyone who cooks at home at least 3-4 days per week, and has had experience with following recipes in the past.
Conducting the Test
-
All the test were conducted through Zoom, and have them share their screen for me to see and record.
-
The prototyping tools used for the test is Invision.
-
There are 3 scenarios, to test out each of the 3 features I listed previously.
-
After each scenario I would also ask what the tester's first impressions of the feature.
Test Results
In Summary
For the positives, almost every tester liked the visual design and layout of the app, they feel the visuals are clean and well structured, and that it gives some of them a food based recipe vibe to it. They also liked that they were well informed as to what if they are following the correct steps, both by seeing the checkpoint page, and recipe pages.
As for the negatives, a huge issue is that all the testers struggle to find the next button on the Step by Step page, which I was surprised since I though if they would automatically use hand gestures when they see a app in front of their screen. In addition, the wordings on some of the pages, like What is Wrong page, and the ingredients scale mislead some of the testers as they were left confused what to what information the page is giving them.
Conclusion
Overall I didn't have much trouble with Day 1 to Day 3 in terms of being able to complete the task within the given time. I did struggle a lot on the Day 4 and 5 due to the underestimating the amount of work needed for those two days. Though, the design sprint did help teach me some of the ideation and prototype methods that I can use the speed up my work, which would come in handy when I do similar sprints in the future.
What's next for the near and far future
What I learned from the whole process
Testing on the computer is different than testing on a smartphone
-
Since I tested a mobile app through the computer, due to Covid 19 restrictions, I realized that testers are less likely to use app gestures when they are being tested on the computer. its what caused all the testers to struggle with navigate through the Step by Step pages.
Making a realistic recipe app is not as easy as it sounds.
-
Since I am new to the whole cooking new dishes with recipes, I didn't realize how many ways you can create a recipe. Originally I wanted a size fits all structured instructions for every recipe, but it was impossible to complete within the given time that I set myself.
UI Design kits are once again very useful for fast paced design challenges.
-
Even though I said it before in other projects, I say it again that without the recipe design kit that I used for this project I won't have been able to complete the prototype in time for the usability testing.
The reason why recipe apps have different ingredients measurements
-
This is one of the lessons I learned when testing one of my app's features. That everyone have their own way of measuring how much salt or jarred pickles they need for the recipe.
What I can improve moving on
Make sure to be well versed into the topic that I chose.
-
One of the struggles that I faced and will improve upon is to do a lot of research beforehand because I may never knoew if my inexperience with a certain topic would bite my in the butt later down the design pipeline.
Solid arrows in boxes can also be interpret as play buttons.
-
This is another UI feature that I didn't realize until the testers mentioned it to me. The next time I would have to be careful with how I use solid arrows near text and inside boxes.
