Design Sprint Case Study - Savr App

CLIENT Concept, Student project
ROLE UX/UI designer

Problem

Savr is an app that houses recipes for at-home chefs. Recently, users have complained about recipes that involve lots of steps or advanced techniques. Many people were left disappointed with the outcome of a recipe because they felt the instructions weren’t clear or easy to execute.

My goal was to redesign the recipe pages on the app, so that users can follow complicated recipes without feeling stressed or confused.

According to recent studies, more people want to buy ethically-made products, but they aren't actually doing it.

I can personally relate, so I wanted to explore why that is and how to help people make the "ethical" choice when buying.

Research highlights

Since this was structured for a design sprint, the research highlights below were given to me at the start of the project:

  • Users want to know they’re on the right track at different points in the cooking process.

  • They want to know what’s coming next, so they can prep a few steps ahead.

  • They want to know which equipment is required, ahead of time.

  • They want to follow a recipe easily and confidently so the dish comes out as expected.

  • They don’t want to refer back to their phone every time a new step or technique is introduced.

End-to-end user experience map

User-map—recipe4

Lightning demo

Map apps
Following recipe steps seemed somewhat similar to following map instructions, so I looked at different map apps. I was inspired by the way map apps show you both the current step and then what’s coming up soon after. 

map

Yoga apps
Similar to Savr’s problem, yoga videos can sometimes involve lots of confusing poses/steps that a user has to follow. Because of this, I found inspiration from a yoga app. In this specific screen, I liked that it gives you an overview of the session from the thumbnails and allows you to pick specific sections in the side bar, so you can revisit or skip steps easily.

yoga

Recipe app competitors
I was pretty impressed with what already exists in the recipe app space. The apps I looked at (Jamie Oliver, Tasty, Sidechef) all had large imagery or short gifs to physically show you what you’re supposed to be doing in the steps, which was great. Alongside the imagery, they included the text details and had “step by step modes”, so users could focus on one step at a time or swipe to view future/past steps.

jamie
sidechef

Crazy 8s

After looking at other apps for inspiration, I decided that the most critical screen to sketch would be the the step-by-step mode. This screen would be the most useful to a home chef, as it could visually and incrementally walk them through a complicated recipe.

crazy 8s

Solution sketch

solution sketch

Storyboard

During the storyboarding process, I wanted to flesh out what the screens of the step-by-step mode would look like and the recipe page itself. I combined some of the inspiration I found during the lightning demo to create a design that could show one step in detail, plus upcoming steps at an overview level.

storyboard

Prototype

The screens that I landed on for my prototype are slightly different from my storyboard. As I was putting them together, I realized that some of the ideas that looked pretty good on paper didn’t translate well to the screens. Using the research findings as a base, I wanted to incorporate as many helpful elements as I could without making the design feel cluttered. I ended up including a check-list feature, equipment tab, recipe video, ingredient look-up, and the step-by-step mode.

(Scroll to the bottom of this page to see the clickable prototype)

recipe screens 3
banner4

Testing

The 5 users I interviewed were all at-home chefs, who cooked between 2-6 times a week and used recipes at least 50% of the time. What I wanted to find out through the testing was:

  1. could participants easily navigate to all of the features that I included?
  2. did they find the features useful?
  3. were there any parts of the design that hindered their experience?

Findings

Adjustments needed

  • All of the participants were able to navigate to each feature easily, aside from the ingredient look-up. Most didn’t realize this was a feature. 

  • There were multiple comments about users preferring the step-by-step mode to be in portrait orientation so that they wouldn’t have to turn their phone around.

  • Another popular comment was that users didn’t realize the thumbnails were scrollable, so when they wanted to skip 3-4 steps ahead, they weren’t sure how to do that. 

Liked

  • Multiple participants liked the check-list feature on the ingredients.

  • Liked the equipment list so they could prep that ahead of time.

  • Liked the step-by-step mode, aside from the comments above.

  • Liked that you could view a video of the recipe to get the overview of the process first.

  • Liked being able to see thumbnails of steps in the step-by-step mode.

What I would do in the next iteration

Overall, users were happy with most aspects of the design, but in the next iteration I would try portrait orientation designs for the step-by-step mode and rework the thumbnail sidebar. The sidebar should show users where where they currently are in the recipe, while allowing for navigation to future or past steps. 

Clickable prototype