Savr Sprint: Clarifying Cooking

Cooking can be difficult, and deciding what to make is often a challenge. The Savr app tackles this by providing quality recipes, but recent feedback revealed that many novice cooks struggle to follow the steps, finding the instructions unclear and challenging to carry out.

This design sprint addresses this by introducing a new feature called “step-by-step mode” and reorganizing content on the recipe page.

Duration

5 days

Role

Solo UX Designer

Tools

Figma
Figjam
Pen & Paper

What I did

UI Design
Competitive Analysis
High-Fidelity Prototype
Usability Testing
Background

Recipes are easy to find, but hard to follow

Savr is a startup created to help home cooks discover recipes and access cooking tips. The app has fostered an active community of users who regularly update and review recipes, ensuring high-quality content.

Although there is a large catalogue of well-rated recipes, many novice cooks find the instructions difficult to follow, creating a gap between discovery and successful execution in the kitchen.
Image of person cutting bell peppers (Source: Pexels)
Problem

Why are recipes so hard to follow?

The main pain points novice cooks were facing were feelings of being unprepared in the kitchen and struggling to follow recipe instructions. 

Many users expressed frustration with following recipe steps because they were too vague which led to feelings of overwhelm and inconsistent results.

Solution

The solution focuses on providing more guidance throughout the cooking process and reducing uncertainty.
Feature

Step-by-Step Mode

This is Step-by-Step Mode, a new feature that offers clear instructions, visual cues, and helpful tutorials for specific techniques.
New Layout

Reorganized Recipe Page

The recipe page was reorganized to streamline the experience, with a recipe overview that includes total duration, ingredient and step count, and an ingredients list that doubles as a grocery list.
View details in-depth below ↓

Sprint Process

Understand

Prior Research

In this design sprint, I worked with pre-existing research, including user interviews and a persona.

In the feedback, users reported:

01

Struggling with uncertainty around cookware and basic techniques.

02

Feeling unprepared and needing more guidance to ensure they were on the right track.

03

Wanting visual cues to confirm they were following the recipe correctly.
Understand

Mapping Pain Points

I created a simple user journey map to visualize each step of cooking while using the app to identify pain points, like unfamiliar techniques and uncertainty about required tools.
Image of sketched out journey map

Pain points:

01

The written recipe at the top increases the time it takes to scroll to the ingredients

02

Some recipes may not include a list of tools

03

Recipes may not have pictures or state details like sliced or diced onions

04

Users may be unsure of a cooking term or how to perform a certain technique
Explore

Competitive Analysis & Inspiration

In this phase, I reviewed the top 6 recipe apps to see how other competitors were differentiating themselves in terms of features and user experience.

The key ideas I found were:

Shopping list integration
Step-by-Step guided mode
Short technique / Cooking skill videos
More details at the start
Ideate

Crafting Recipe Features

Building on the key ideas from my research, I explored different layouts and experimented with features to make the step-by-step mode more intuitive and informative. 
Image 1: Initial sketch of top of recipe page
Image 2: Sketches of shopping list where the app informs you about what ingredients you already have
Image 3: Step-by-Step mode with progress bar
Refine

Prioritizing Features

From the ideation phase, I decided to move forward with the step-by-step mode and the new layout as they worked together to better prepare users with key information upfront, reducing confusion and guiding them throughout the cooking process.
Image of main screens in app with interactions and details highlighted
Prototype

Testing with a Real Recipe

I went straight to a high-fidelity prototype due to time constraints, and since the solution focused on an interactive approach, using a real recipe was necessary.

Step-by-Step Mode

This mode emulates a recipe video by adding visuals and steps on each section but allows you to go at your own pace.

Recipe Page

I prioritized key details at the top as well as ingredients since these are important elements users may consider before starting a recipe.
Testing

Mixed Reception of Step-by-Step mode

I conducted usability tests with 5 users to evaluate the new changes and features, gathering their impressions on each page before testing the Step-by-Step mode. 

Overall App Insights:

The play button icon for Step-by-Step Mode was confusing for all users.
60% of participants expressed interest in using the Step-by-Step feature.
All users raised concerns about "sticky hands" when using the app.

Step-by-Step Mode Feedback:

01

Users had mixed reactions: some found it clunky, while others appreciated its emphasis on preparation.  

02

Novice cooks found the feature especially helpful for staying organized and mentally preparing.

03

A few users would prefer a video format for better guidance.

04

Most participants found the feature useful overall.
Reflection

Prioritization & Future Improvements

The new recipe organization was positively received, but feedback on the Step-by-Step Mode was mixed, with some users finding it helpful and others feeling it was unnecessary.

In future projects, I’d focus on prioritizing features more effectively, since the shopping list was a nice addition but not a user concern. Considering this was a sprint, I should have focused more on the critical pain points identified by users.

Next Time

Based on user feedback, I would consider the following for the next iteration:
Add a progress bar to help users track their progress
Allow users to jump between steps
Revise the Step-by-Step Mode button and explain purpose
Address the “sticky hands” issue

Other works

Copyright © 2024 Arlyn Elopre
Contact
LinkedInEmail