top of page
Optimizing App Functions to Improve
Efficiency and Usability for the Home Chef
Project Type
GV Design Sprint
About this Project
SAVR Recipes is a cooking app which needs assistance in boosting efficiency and satisfaction by users. This project follows a Google Ventures adaptation of the Design Sprint process
My Role
Sole UI/UX Designer- Design + Prototyping + Testing
Day 1- Challenge and Map
SAVR is a new startup with a native mobile app which acts as an online recipe index. While they have gotten a lot of positive feedback on the quality of their recipes, they have seen an increase in down-voting as many users find the recipes disorganized, too complicated, and/or find themselves unprepared for the next steps. The result– user’s cooking outcomes suffer.
User interviews conducted prior to my involvement in the project had the following quotes which greatly steered the design sprint’s motives:
“I know the basic definitions- like what minced garlic should look like. But a lot of times I see techniques that I am totally unclear on. I google image search or youtube it, which kind of throws my flow off- and means I need to drop what I’m doing in the cooking process to use my phone”- Sara
“I try to be as efficient as possible with how many pots and pans I’m using. There are lots of times when I have to handwash something midway through when I really didn’t need to if I just changed the order of a few things.” -Ron
“I like to be Ready for the next few steps. Sometimes I’ll be standing around waiting and it’s not until later that I realize I could have saved 20 min by starting on something else.” - Lindsey
Persona
From the User Interviews, a persona was created, named Nate.
The predominance of issues which are to be addressed by the design sprint were as follows:
-
Address the issue of timing of the recipes’ steps
-
Address the lack of clarity in the recipes’ steps
-
Address the lack of explanation of cooking techniques for new cooks.
Looking at the above information, I drew a map of the possible user flow which would be general to everyday use.
Day 2 Solutioning
Lightning Demos
I chose to dive into three popular cooking apps, so as to see what common and unique interfaces were out there which could address the needs of the individual. The three apps I turned to are: Kitchen Stories, Forks Over Knives, and All Recipes Dinner Spinner.
Of the three, Kitchen Stories had the most unique concept. It chose to make the entire cooking experience visual, and had lots of video and pictures of how recipes should look, stage by stage. Making SAVR stand out a bit more, It seemed important to keep visuals a priority, though perhaps not with lots of videos, as one of the main issues was having to be glued to the phone while cooking.
All three apps presented with timing guidelines for the recipes, though none of them separate what could be prepared prior to the cooking process by the user, nor was there a function which allowed the screen to stay on during app use to keep from having to frequently wash one's hands before being able to reopen the app on the phone. There also weren't guidelines on the recipes themselves as to what equipment and tools were clearly needed for the recipe without figuring that out in the middle of the cooking project.
Sketches–Crazy 8s– Triptych Sketch
Following the map generated on day one of the GV Design Sprint with the guidance of the persona, I started to sketch out possible interfaces for the screen. I started with the Crazy 8s sketch session and then decided on what I believed would be the most fruitful screens to use.
I chose to have the focus screen be the recipe screen itself, as it seemed that that was where users were being failed by the app. The other support screens were the opening screen to the app and the search function on the homescreen. Atypical to the triptych design, I had my main screen at the end of the three sketched screens, as I felt like following the recipe itself would be the completed task.
Day 3- Storyboarding
I decided on the following solution and created a storyboard for the following sequences within the design solution.
The order of the story is as follows:
-
User opens app
-
User searches for a meal in the search bar
-
User filters results from search
-
User taps on recipe card
-
User toggles ‘cooking time’ on to keep app on during duration of app use
-
User taps ‘pan’ button to see the tools and equipment needed for recipe
-
User follows recipe from ‘ingredients’ to ‘preparation period’ to ‘cooking period’
-
If User comes across a cooking technique they are uncertain of, the user hovers over a cooking term and a visual and written explanation of the technique pops up.
I chose to keep the visuals to pictures over video, as I felt that one could glance at the photo to see what was demanded of the dish, without having to wait to watch a full video to get to the step needed. I also felt that the separation of a ‘preparation period’ from the ‘cooking period’ was a simple and elegant solution to the issues the user faces of not knowing what to prepare ahead, and when to do so.
Day 4- Prototyping
Click to View the Prototype
I realized that some of my implementations of novel tools like the toggle for keeping the app on (what I call in the prototype “Cooking Time”) and the equipment button as well as the hover over words to display the technique described would be best served with a quick tutorial to introduce the new user to the tools of the app.
The prototype opens at the loading page, then jumps into the tutorial. From there one can see the search bar and enter in what type of recipe keyword one wishes to search, refine the search result with the filter button, and click on the recipe to see the recipe.
From the recipe screen, one can toggle the ‘cooking time’ button to on, and check what tools (via the equipment button) they’ll need before they start preparing the ingredients. They then scroll down to see what ingredients are needed, the preparation steps involved before the cooking process and then start cooking. Cooking terms which might be unfamiliar to the user are highlighted, allowing the user to hover over them to view visual and written instructions on how to perform the technique.
Day 5- Testing
The prototype was tested on Day 5. The tests elicited strong positive responses.
Four of five of the participants quite enjoyed the flow of the prototype tasks, and said that they loved the idea of having the phone stay on for the duration of the cooking process with the toggle switch.
Testers also stated they found the equipment/tool button helpful. One of them stated “Wow, that would save me time in the kitchen, having all my tools gathered and at hand”.
All testers felt that the separation of recipes into ‘preparation’ and ‘cooking’ sessions clarified the flow of the recipe.
One of the participants said that they really enjoyed the tutorial at the beginning because they felt that it helped orient them to the app’s features.
The only lukewarm critique was that 3 of the 5 users wished to see more pictures of the food preparation in steps interspersed throughout the text.
Further thoughts
Everything from the lightning rounds to the Crazy 8s practice, as well as the challenge to prototype everything to fit requirements in one day helped me to see how this design sprint process really helps to bypass the inner critic and pull out the inner designer.
I had thought of variations of information delivery. Some of those variations included utilizing voice commands like one would with Siri or Alexa, and the app itself having a voice to tell you what step to do next. However, this (I believe) wouldn’t work well with the need for users to see the steps, because the goal would be to make for fewer interactions with the phone while cooking.
Finally, I would integrate the suggestions from testers to implement more pictures in the cooking process, as that was desired by 3 of 5 of the testers, and makes sense that they would need to see the steps more if they are new to cooking in general.
bottom of page