top of page
savr header.png

Design Sprint Concept

1 week | Design Sprint Project | Figma

savr

DAY 1: Understanding the problem

A bit of background...

The SAVR app has recently seen an uptick of negative reviews due to a usability challenge when trying new recipes. Users are interacting with the app when they’re in the kitchen, already doing the work of cooking.

 

Users are frustrated that steps are not laid out in the best order, which leads to time wasted when they could have been prepping or doing something else. This can also lead to making mistakes, which is frustrating because users aren't exactly sure where they went wrong when making a new recipe, especially one that has many complex steps.

 

Users also want to know exactly how much time a recipe is going to take, because they have observed that the time estimates provided are not accurate as they do not include time for prep or cleanup. Users are also frustrated that while cooking, they have to go back and touch their phone which interrupts their flow in the kitchen, which may involve having to wash hands between each step just to look at their phone.

Jobs to be done...

  • As an adventurous home cook, I want to be able to confidently try a new recipe easily, so that a dish comes out as expected. 

  • As someone who enjoys cooking, I want to have fun and be challenged while trying a new recipe to reduce the chaos and stress associated with cooking.

The goal...

Improve the user experience when trying a new recipe to be simple to follow, easy to use while cooking, and as time efficient as possible.

Over the current iteration, users...

  • Would like if the recipe would tell them what to buy and prep prior to the cooking process.

  • Want a way to know if they are on the right track halfway through the cooking process.

  • Want to know if they have properly completed certain more-advanced techniques.

Wrapping up the day, I mapped the user journey that the provided persona, Nick, would take when trying out a new recipe, centering the goal and jobs to be done, while thinking about how the app could be improved over its current iteration.

To hone in on the idea, I mapped the journey Nick would take in the app itself, and what screens he would interact with. For the scope of this sprint, it was at this point that I determined the screens to design that would be the most important to build an enjoyable and improved user experience.

The key screen in the cooking flow, established on Day 1, is the interface where users engage during the cooking process. Drawing inspiration from navigation apps like Google Maps and Apple Maps, and the intuitive scrolling mechanism of TikTok, I aimed to incorporate familiar and easy-to-use elements into my ideas.

 

This approach prioritizes a glanceable and easy-to-navigate experience, akin to the hands-free functionality of navigation apps. By minimizing taps and incorporating swipe gestures, the interface accommodates users whose hands may be occupied or soiled during cooking, mirroring the effortless navigation experience observed in TikTok's feed browsing.

 

Emulating the automatic progression and voice-guided directions of navigation apps, the interface seamlessly presents information without the need for constant manual interaction. This design approach acknowledges the user's focus on the core task of cooking, ensuring minimal distractions.

 

Furthermore, the consideration of accessibility extends to accommodating imprecise inputs, such as tapping with knuckles or elbows, through the implementation of swipe gestures. This balances comprehensive information but also remains intuitive and easy to engage with, even in the middle of the chaos of cooking.

I utilized a Crazy 8’s exercise to ideate on this most important screen.

​

​

​

​

​

From these 8 screens, I continued to explore the ideas from the 6th and 7th sketches, and created a 3-screen simulation of the beginning, middle, and end of the flow.

DAY 2: Sketching Ideas

DAY 3: Storyboarding a solution

Building upon the decisions made on the previous day, I refined the concept further with a definitive storyboard outlining an end-to-end flow for how the app guides a user through the cooking process. The emphasis remains on simplicity, usability, and comprehensiveness, with imagery and task instructions taking center stage on the screen.

​

I envisioned a streamlined interface that seamlessly guides users through the cooking process. Each step is accompanied by clear instructions and visual aids, including videos or images illustrating the task at hand. For example, in the step of dicing an onion, a video would show how to properly dice an onion. Then, the imagery would show how a “diced onion” should appear.

 

The interface intuitively advances through steps based on estimated completion times, while still offering manual navigation options. Important details, such as remaining steps and cooking parameters like heat levels or temperatures, are conveniently displayed at the bottom of the screen for quick reference.

DAY 4: Building a prototype

Developing a working prototype presented challenges in realizing the envisioned sketches and ideas, aiming to embrace the familiarity of navigation apps and social media interfaces like TikTok. Certain UI elements were crafted from scratch, drawing inspiration primarily from the simplicity of the Apple Maps app while infusing a warmer aesthetic. Iconography was curated from Freepik's collection on Flaticon.com. To accommodate the complexity of step images, iconography, navigation buttons, and text were simplified to ensure clear understanding across screens.

​

The success of the prototype hinged significantly on users' familiarity with navigation apps and social media scrolling, underscoring the importance of intuitive design. Streamlining elements to their simplest form while preserving their function and purpose proved to be one of the most demanding aspects of prototype development, reflecting a commitment to user-friendly interaction and clear communication.

Click the image to test out the prototype

Mockups.png

DAY 5: Validating the design

I ran a usability test for the one flow that I built in the prototype. Since the task was very straightforward and mainly involved users moving through the flow, I requested the following feedback from participants:

  • What they liked about the experience

  • If the layout, buttons, and text made sense and were beneficial to the design concept

  • If they thought they’d find this type of experience helpful while actually cooking

  • If there was something they believe would improve or add to the design to make it even more helpful or useful

 

I tested 7 participants, who met the following requirements:

  • Cooks at home, preferably on a regular basis but are not professionals, or have cooked in a professional environment

  • Has followed new recipes using recipe websites or apps to follow instructions on their phone in the past, and expressed some frustration or annoyance

  • Has used and is familiar with a navigation app for driving directions

 

As expected, none of the participants became stuck at any point, and were able to navigate through the app prototype easily. Participants particularly enjoyed the following aspects of the experience:

  • The simple and easy-to-understand design, due to the large fonts, clear directions, and step-by-step guidance. 

  • The visuals and aesthetics of the design, including the inclusion of descriptive imagery and timers, which provided a clear sense of progress.

  • Clear navigation and controls through the presence of big buttons for navigation and clear indicators for timing and heat settings.

​

Due to the scope and timing of this project, there wasn’t time to implement the changes to a new iteration and retest. However, I would have made the following changes, based on priority:
 

High Priority

  • Further differentiating the next step from the current one, using a label that says “next” instead of an arrow.

  • Including the quantity/amount of ingredients needed in the current step.

 

Medium Priority

  • Remove timer for steps such as sautéing and boiling water, which are largely dependent on the cookware and stove being used.

  • Rearranging the position of the next step’s instructions, so that the current step’s instructions and imagery are the most prominent.

  • Adding an onboarding step to orient the user with the multiple ways that they can navigate through the app, such as by both swiping, tapping next, or relying on the automatic instructions.

 

Low Priority

  • Improving the visibility and prominence of the forward/back buttons.

  • Utilize color to add more personality to the UI, and make it more fun to capture the joy the cooking and trying a new recipe.

REFLECTIONS

I've learned that the Design Sprint methodology offers a structured and efficient approach to problem-solving and innovation. Its inherent time constraints helps generate ideas, validate concepts, and bring products to market faster while minimizing risk and ensuring user satisfaction. 

 

A few things I've learned from completing this project:

  • Tighter constraints can force you to think of more innovative and creative solutions.

  • Utilizing experiences with other apps and digital products helps to create a sense of familiarity. 

  • Asking users open-ended questions and soliciting their feedback remains the best way to validate a design.

bottom of page