UX Design • Design Sprint • B2C • Cooking & Food • Mobile
The Team & Roles
Tools
Timeline
February 26, 2024 -
March 1, 2024
Design Constraints
Savr expressed that they needed a solution to their negative feedback that consists of a feature native to the Savr app. They also conveyed that the focus of the process should address the user experience when it comes time to cook, not the process of finding recipes to cook.
Mapping
With a team of 3 assembled over Zoom, I briefed the others on the company and a gist of the reason we came together for Savr. For our first task, we crafted an end-to-end experience to illustrate how users interact with Savr, with the goal of cooking a recipe.
User Research & Affinity Mapping
We received excerpts and recordings of user feedback and interviews from Savr. I allotted 30 minutes for the team to individually digest and make key notes of the research, and another 30 minutes for us to come together and connect themes between the notes we wrote. To summarize:
Users sometimes feel that certain steps are suddenly "sprung onto" them.
Users appreciate well-timed recipes, and feel high amounts of stress when timing is thrown off.
Users want to be efficient with equipment and know what is needed beforehand.
Users do not like when new information must be learned mid-recipe.
Users like to save time where they can and prepare steps in advance when possible.
User Persona
To keep the target user in mind, Savr provided a user persona. Nick likes to be challenged to learn new recipes when he has the time to learn, but does not appreciate recipes that give him stress and confusion while cooking.
Lightning Demos
To start off day 2, I conducted a lightning demo with the team in order to draw inspiration from industry relevant and process relevant solutions. We looked at products from other recipe companies, independent blogs, how-to sites and videos, and even a comic-reading site.
From these designs, we were able to keep in mind how users interact with different platforms to follow stories and recipes from end to end. Many successful solutions included relevant imagery and allowed users to remain highly focused while on-task. Something that we saw that wasn't as successful is that users often had poor control over being able to jump back and forth in the steps required to complete their task.
Crazy 8's
With inspiration running through our minds, I prompted the team to run through a crazy 8's exercise so that we could rapidly generate ideas to discuss and pursue. One theme that the user feedback highly illustrated is that users were often surprised with having to learn techniques and skills and/or find equipment in the middle of the recipes, so we focused our efforts on trying to give users as much relevant information as we can before they start cooking.
Solution Sketch
After rapidly ideating, we selected one of the screens to further expand into a little bit more detail by designing the screen before and the screen after. This idea highlights what the user may be unfamiliar with relative to other recipes they have used, and neatly displays what they may need to learn or obtain before they start cooking.
Storyboard Sketching
Moving forward with the solution that was decided on yesterday, I created a storyboard to illustrate the user journey of following a recipe with the new information presented at the beginning.
In this narrative, users are able to visibly distinguish recipes that might be challenging for them and can view what kinds of ingredients, equipment, and techniques they will need to complete the recipe. Users can view demonstrations of techniques if they need to understand what they are getting into. If they choose to follow through with the recipe, there are visual aids every step of the way for them to refer to.
Iteration 1: Difficulty & Color
To start off day 4, I converted the storyboard into a lightweight prototype using Figma and some assets from the Apple Design Resources Figma file. Recipe cards are distinguishable by color and difficulty level, and users can dive deeper into what they need to learn before starting the recipe.
I brought this iteration back to my colleagues, and as we went through it, we discussed that difficulty level and color are not good indicators for what we are trying to accomplish. Some thoughts that came up are:
Difficulty is subjective and not 1:1 with how familiar something is for a user
Color meaning across cultures is not the same
Having the cards tagged with colors lacks visual cohesiveness
Note: If the GIF under the subsection title does not load and the area is blank, please refresh the page.
Iteration 2: Text Indicator
To tweak this prototype, I opted to change the color and difficulty identifiers to a more simple text line with a star icon to indicate that there are new techniques, equipment, and/or ingredients for the user based on their cooking history. Bringing this iteration up for another round of discussion, we felt that the indicator did not call enough attention for the user. It may be glanced over due to the priority of the other information.
Iteration 3: Tag Indicator
To improve the prototype, I changed the layout of the cards and had the indicators function more like a tag on the top of the card. This increased the attention that it called, and the team felt like this was strong enough to show users that there is something unfamiliar about this recipe.
Some additional improvements to the original design include better text contrast to improve accessibility, and some horizontal scrolling sections to break up the verticality of the app. With the recipe card prototype realized, it was time to prototype the rest of the user journey for testing.
End-to-End Journey
The team met once more to discuss how we wanted to approach the end-to-end cooking process, and we decided to incorporate a few features based on the user research to keep the home cooks informed while cooking and have a better user experience throughout their journey. These features include:
Cooking mode to keep your device awake while using the app
Relevant imagery at each step
Optional demonstrations for steps that require certain techniques
Note: If the GIF under the subsection title does not load and the area is blank, please refresh the page.
User Testing
I crafted a usability testing script with tasks that involved users selecting a recipe where they feel like they might learn a new technique. Earlier in the process, I recruited 7 users that were home cooks who followed recipe guides for new recipes and conducted testing with them.
Usability Testing Outcomes
The prototype was met with positive feedback regarding the user experience for getting into a new recipe. Users appreciated being able to view techniques and equipment beforehand, and noted that this is not a common feature when they explore various recipe apps and websites. They also enjoyed using the technique drawers and wanted to dive deeper into seeing them in action while using a recipe. Users expressed delight when coming across the other features we included, like cooking mode, stating that it would save them from frustration since they usually have to wash their hands to unlock their phone to refer back to the recipe.
Some feedback that came up quite often during testing was that users felt confined to their current step in the cooking process. Having buttons to move back and forth did not allow users to feel free enough to look into upcoming steps. In future iterations, I would explore options for users to maintain control with navigation buttons, while allowing them to scroll freely to peek at future steps in case they want to prepare for them.
