Skip to content
Michael Weber Design
  • Home
  • UX Design
  • Logos
  • Advertising
  • Social
  • Design
  • Trade Show
  • Publication
  • Coldwell Banker
  • Contact

Case Study: SAVR Recipe App

Case Study: SAVR Recipe App

Case Study: SAVOR Recipe app title page.

by Michael Weber

PROJECT OVERVIEW
SAVR is a mobile recipe app with a library of recipes and cooking tips for people who love to cook.

However, their recipes have been receiving negative reviews when it came to confusing steps and advanced techniques. People have felt disappointed with their recipe outcomes because they thought the instructions were not clear or easy to execute. Users also complained using their mobile device was difficult when cooking with messy hands and having to scroll for additional directions.

My Role:

UX Designer, UI Designer, 
User Tester & Interviewer 
(solo student project)

Modified GV Design Sprint, 
5 days; Designed in Figma for iOS

User Mapping, Ideating, Sketching, UX Design, UI Design, Prototyping, Usability Testing

PROJECT DURATION:

Design Sprint duration chart showing days 1 through 5. Day 1 Research and planning. Day 2 Sketching. Day 3 Story boarding. Day 4 Prototyping and Day 5 UI Testing.
Design Sprint duration chart showing days 1 through 5. Day 1 Research and planning. Day 2 Sketching. Day 3 Story boarding. Day 4 Prototyping and Day 5 UI Testing.
Design Sprint duration chart showing days 1 through 5. Day 1 Research and planning. Day 2 Sketching. Day 3 Story boarding. Day 4 Prototyping and Day 5 UI Testing.

THE PROBLEM
In the app, SAVR recipes are confusing, frustrating and difficult for user to follow.

THE GOAL:
Improve users’ ability to follow recipes.

How might we help users better understand the SAVR recipes, preparation 
and the cooking process?

PROPOSED SOLUTION:
• Use photos throughout each step of the process
• Communicate the time for each step
• Use a page for each step of the process that eliminates scrolling with unclean hands
• Re-write the recipe copy to fit each step on each page


DAY 1
UNDERSTANDING & MAPPING

Identifying important pain points guided my approach to ideating solutions throughout this sprint, starting with 
creating journey maps of the user’s cooking process.

A couple of rough sketch’s of journey maps allowed me to visualize the processes to keep in mind when designing and how a user moves through the recipe screens.


Journey Maps:

Sketch of User journey map 1.
Sketch of User journey map 1.
Sketch of User journey map 1.
Sketch of User journey map 2.
Sketch of User journey map 2.
Sketch of User journey map 2.

USER RESEARCH

5 photos of users of the recipe app.

• Users are confused and frustrated during steps in the cooking process as there are no visuals for them to compare their progress too.
• Time required was often inaccurate or vague for both preparation and cooking time.
• While cooking, users have to scroll on their device so they have to wash their hands to check the next step of the recipe.
• Recipe steps are not simple, clear or logical.
• Photos or video is needed to show the user how each step should look.

Affinity Map:

Recipe Affinity Map.
Recipe Affinity Map.
Recipe Affinity Map.
Persona Information.
Persona Information.
Persona Information.

DAY 2
COMPETITOR ANALYSIS & IDEATION

I analyzed 4 apps based on searches and reviews:

• Whisk
• Mealime
• Supercook
• Delish

One app was a meal plan app and another app uses what ingredients you have in you cabinet to create a meal for the user. But the rest of the apps were recipe apps. When studying these apps, I found the following common design traits that helped users:

• Times for prepping and cooking were clearly stated
• Ingredients for each recipe were clearly listed
• Photos and/or videos are used to guide the users
• The apps provided the user with individual, easy-to-follow steps

App screen shot from the app Meal lime.
App screen shot from the app Meal lime.
App screen shot from the app Meal lime.
App screen shot from the app Whisk.
App screen shot from the app Whisk.
App screen shot from the app Whisk.
App screen shot from the app Delish.
App screen shot from the app Delish.
App screen shot from the app Delish.

SKETCHING & CRAZY 8s
A small sample of my sketches and a Crazy 8 sketch. I used UI elements that would help users see their progress, make the step-by-step process easier and for educating the user on different types of kitchenware.

Sketch of step by step pages of app.
Sketch of step by step pages of app.
Sketch of step by step pages of app.
Sketch of ingredients page and home page sketches.
Sketch of ingredients page and home page sketches.
Sketch of ingredients page and home page sketches.
Sketch of alternative ideas for home pages for the app.
Sketch of alternative ideas for home pages for the app.
Sketch of alternative ideas for home pages for the app.
Crazy eights sketch of recipe app.
Crazy eights sketch of recipe app.
Crazy eights sketch of recipe app.

LOGO DESIGN
A logo was designed for the SAVR app to convey to the user “savory recipes”. And what a better way to do that than with smoke/steam/flames streaming off the the word, “SAVR”.

The final Savor logo design.

DAY 3
STORYBOARD

After creating several sketches, I developed a storyboard based on my research, focusing on creating a seamless user experience within the app. The goal was to make it easy for users to search for a recipe and start cooking right away. Informational tabs such as “Kitchenware,” “Ingredients,” and “Nutrition” were included to enhance the user’s cooking knowledge and provide necessary details for a healthy cooking experience.

Storyboard sketch of recipe app.
Storyboard sketch of recipe app.
Storyboard sketch of recipe app.

DAY 4
PROTOTYPING

Design Sprint Time Constraints

Using my ideation sketches and storyboard, I created 1 route with only 1 recipe available to view. 

The route consists of: 
1. The Home page
2. Searching for a recipe
3. And, selecting the first pork chop recipe at the top of the list

From there, the user can move through the recipe step-by-step pages and view the kitchenware, ingredients and nutrition pages. The user can even select the blue underlined text in the Kitchenware list 
page to learn about 2 tools for cooking this recipe.

Below are the hi-fidelity screens for the SAVR App.

Savor title page shown in smartphone.
Savor title page shown in smartphone.
Savor title page shown in smartphone.
Savor Home page shown in smartphone.
Savor Home page shown in smartphone.
Savor Home page shown in smartphone.
Recipe page shown in smartphone.
Recipe page shown in smartphone.
Recipe page shown in smartphone.
A page showing Step 1 of the recipe.
A page showing Step 1 of the recipe.
A page showing Step 1 of the recipe.
A page showing Step 2 of the recipe.
A page showing Step 2 of the recipe.
A page showing Step 2 of the recipe.
A page showing Step 3 of the recipe.
A page showing Step 3 of the recipe.
A page showing Step 3 of the recipe.
A page showing Step 4 of the recipe.
A page showing Step 4 of the recipe.
A page showing Step 4 of the recipe.
A page showing Step 5 of the recipe.
A page showing Step 5 of the recipe.
A page showing Step 5 of the recipe.
The kitchenware list page shown in smartphone.
The kitchenware list page shown in smartphone.
The kitchenware list page shown in smartphone.
The ingredients list page shown in smartphone.
The ingredients list page shown in smartphone.
The ingredients list page shown in smartphone.
The nutrition page shown in smartphone.
The nutrition page shown in smartphone.
The nutrition page shown in smartphone.
Photo shown in smartphone of tongs after the tongs link was clicked by the user.
Photo shown in smartphone of tongs after the tongs link was clicked by the user.
Photo shown in smartphone of tongs after the tongs link was clicked by the user.
Photo shown in smartphone of a thermometer after the thermometer link was clicked by the user.
Photo shown in smartphone of a thermometer after the thermometer link was clicked by the user.
Photo shown in smartphone of a thermometer after the thermometer link was clicked by the user.

Prototype Link (Click the logo):

Click on this Savor logo to view the app prototype.

DAY 5
VALIDATING THE SOLUTION

I conducted usability tests with 5 participants; 4 in-person and 1 remote. Users feedback validated that the flow 
and features were useful and helpful for their cooking experience.

Users said the recipe process was “easy to follow”.

Users commented that they liked the shorter written steps. One test participant said that they believe they would feel less stressed while cooking as a result. When I mentioned to the participants after the test, that there was no scrolling in the prototype, they were surprised they hadn’t noticed it. But mentioned that was a great feature!I conducted usability tests with 5 participants; 4 in-person and 1 remote. Users feedback validated that the flow 
and features were useful and helpful for their cooking experience.

Users appreciated the time and progress bar information.

Many users said they liked seeing how much time different parts of the recipes would take. Users thought it was good to know how many steps there were left or to expect in the recipe.

“The photos are informative & helpful.”

Users liked photos throughout every step of the process. They found it reassuring and gave them the confidence that they were on the right track.

“I love how the app is geared towards various skill levels.”

Users commented that they liked the tabs and links that educates the user on different tools. One user suggested that there be a purchase option in the tab where they are learning about a specific kitchenware tool.

“I like the look of the app. It’s pleasing and calming to me.”

Users commented that they liked the “calm colors” and that they are “easy on the eyes”.


CASE STUDY CONCLUSION

The SAVR app had been receiving negative reviews when it came to confusing steps and advanced techniques. People felt disappointed with their recipe outcomes the instructions were not clear or easy to execute. Users also complained using their mobile device was difficult when cooking with messy hands and having to scroll for additional directions.

Successful solutions were designed and applied into the app:
• I used photos throughout each step of the recipe process.
• Time was labeled to communicate the time for each step in the recipe.
• I used a page for each step of the preparation process that eliminated scrolling with unclean hands.
• I re-wrote the recipe copy to fit each step on each page.

Click here to contact Mike Weber

©2024, ©2025 Michael Weber and their respective copyright holders.
Theme by Colorlib Powered by WordPress