Savr Recipe

COOKING

From prep to plate, a solution for smarter cooking.

INTRODUCTION

User problem summed up

savr. recipes app.

Savr Recipes is a startup app that provides easy-to-follow cooking recipes. Not only helping to create delicious home-made meals, Savr Recipes inspires to be different from other apps by promising to be an innovative yet simple, modern, and painless experience for our users with our cooking recipes and tips presented in a user-friendly and efficient design.

the problem.

Recipes and advanced techniques are not clear, hard to follow.

the goal.

To help users accurately, easily follow the instructions when they actually cooking the meal, not when they looking and choosing the recipe

the solution: Design Sprint

Design Sprint is an agile process that involves a flexible and adaptive 5-day work plan, frequent team member check-ins and self-organization and accountability to quickly deliver high-quality results.

DAY 1: MAP
Learning about the Problem

task.

i familiarized myself with the problem, read through some research, and mapped out my product’s most important user flow

persona.

end-to-end experience.

I created a possible end-to-end experience map a user might have with the product.

DAY 2: SKETCH
Sketching Solutions

lighting demos.

I looked at products that solve the similar problem that’s focused on a different area of engagement for inspiration.

crazy 8.

I decided that the “step-by-step” screen was the most critical for my users because this is where the user complete the primary activity, which helps solve the problem.

This screen will provide:

Short and repeated step-by-step instructions
Voice assistant to assist user through each step
- User won’t have to keep washing their hands to use their phone
- Voice assistant will control time remaining if user needs more time
- Encourage users to finish cooking
Tips and recommendations are provided to prevent mistakes and save time

solution sketch.

I created a solution sketch that presented a tiny storyboard; this shows how a user interacts with an interface, what results from their interactions, and what they will do next - to show how the screens would work in real life.

DAY 3: DECIDE
Create a storyboard

storyboard.

I created a lightweight, sketched storyboard; Each screen includes the necessary UI elements that I’ll need to build my prototype for day 4 and the interactions that the user will need to have to complete the task they’d use the app to accomplish.

Here are the features that make SAVR app's solutions different from its competitions:

[8]

Video played on loop so user can cook and look at the video without touching their phone
Tips and recommendations are available to prevent small mistakes

[10]
Users can keep the screen on (from shutting off) to they don’t have to keep referring back to their phone.

[3]

Users mark off ready-to-go ingredients
Skim & scan through directions, reviews, short video, photos, etc... to decide if they want to continue

[9]
Next steps are available so users can take control of their time and be proactive.

[11-13]
VOICE ASSISTANT feature:

Keeps up with the user’s pace
Perform user’s command so user doesn’t have to keep touching their phone
Respond with photo and videos if needed

DAY 4: PROTOTYPE
Creating a High-fidelity prototype

high-fidelity prototype - version 1.

I created a solution sketch that presented a tiny storyboard; this shows how a user interacts with an interface, what results from their interactions, and what they will do next - to show how the screens would work in real life.

My solution for Savr Recipes is to [1] provide users manageable information (all information can be scanned and skimmed on one screen).

[2] In order to solve the user’s problem of having to keep washing hands to refer back to their phones, the app provides the feature of keeping the phone screen on (so that users don’t have to unlock their phone) and voice assistance.

[3] With voice assistance, users will interact with the app by voicing their needs and questions without touching their phones. Moreover, without those who want to save time and multitask, the app also offers what the next step looks like so they can shorten the cooking process.
[4] The app encourages users for future projects with a congratulatory screen and social media sharing tools

DAY 5: TEST
Testing Prototype

5 user interviews.

I conducted five user interviews to test the first version of my high-fidelity prototype. The users' feedback and behavior revealed both strengths and areas for improvement. Using the 5 Act Interview method, I eased them in with warm-up questions, helping them feel comfortable without making the experience feel forced.

Given the tight timeline, I had not designed additional screens, which led to some user confusion. Despite this, all the participants were engaged and responded thoughtfully, providing valuable insights for refining the app.

Highlights from the interviews:

Users liked the app's simple, clear design with key info easy to find.
Whether experienced or not, users were excited to try cooking.
Positive feedback: seeing next steps, cooking tips, and ingredient alternatives.
Confusion on the "Finish" screen: users mistook the “Post your Creation” button for sharing the recipe, not photos.
Users loved the "Keep Screen On" feature, but some needed more guidance on using the "Voice Assistant."

pexels-filirovska-4911845 (1)_edited_edi

improvements made based on user interviews.

Five user interviews were conducted to test the first version of my high fidelity prototype. The feedback, comments and behaviors helped me identify what worked well and areas of opportunities.

Taking advantage of the 5 Act Interview, I was able to ask warm up questions to get the users comfortable to open up yet not make the experience awkward or forced. Because this is a quick project, I didn’t have enough to design more screens to create a better and smoother experience for the users, which caused some confusion to some of them. However, all users were happy to go through the app and answer questions with care and good intentions.

Change typeface to add more personality to design
Added the author of the recipe the build authenticity
Added “Share” and “Favorite/Save” recipe buttons for convenience purpose

Added estimated cooking time for each step
Add arrow back and forth to indicate that users can slide left and right to go back to previous step or move on to next step
Changed from “Tap to enable Assistance” to “Enable Assistance” to strengthen command and simply the design

More theme-based color chat box to grab attention
Simplified messages and larger typeface
User can now pause Assistant mode with “Pause” button

[1]

Added Rating feature for easier interaction
User can share the recipe with others with “Share Recipe” button
“Take photo” makes capturing the experince even quicker

[2]

Simplifying the screen with aligned simple buttons
Removed emoticons to make the screen clean and simple
Added “Similar Recipes” with basic functions (“Like”, Calories, Time, Name, Author) for quicker skim and scan and encourage users to keep making next dishes

DELIVERABLES

Cooking doesn’t have to be a difficult tasking. Understanding that life could be hectic and not everyone can afford (time and/or money) to go to cooking classes, Savr Recipes is an improved and user-friendly mobile app that will be your company, your sour-chef, your assistant when you need a hand.

Our mothers are always the best cooks to anyone of us, being patient when teaching us, and from whom we receive the best advice from. Based on this concept, Savr Recipes will assist, provide real life tips, be by your side, and answer any concerns, just like your Mama is standing right next to you, teaching you how to cook.

main recipe screen.

Name of the recipe in distinguished typeface to grab attention
Photo and name of author
Users are able to click on the author name to obtain more information (background and other recipes)
Basics info: cooking time, difficulty level, calories
Users swipe right/left to see more photos

Ingredients based on customizable serving size
- Required ingredients, their alternatives, and quantity
- “Show all” to see all required and non-required ingredients
- Check-box to keep up with grocery list
An accordion Nutrition list

A summarized step-by-step direction to help users easily skim and scan to decide if they want to continue with the recipe

A grabbing-attention “Start Cooking” button to start “Step 1” screen

step one.

A short video of how to execute each cooking step
The screen indicates which step the user is in and estimated time for that step

Assistance is what differentiate Savr Recipes from other recipe/cooking app. In order to prevent users from keep washing their hands to refer back to their phones:
- “Keep Screen On” keeps phone screen unlocked
- “Voice Assistance” interacts with users by listening to their concerns, questions, and commands and responding accordingly.

User can swipe right or tap “Next” to go the next step
Direction includes detailed instructions and photos of how the food should look like

A short video of how to execute each cooking step
The screen indicates which step the user is in and estimated time for that step

To multi-talk and save time, user can tap “Show all” to quickly check out next step
An accordion Tips tap for more cooking tips

interactive Savr assistant.

To provide an experience of having “someone” right next to the users to help them cook, they can ask any questions and will then receive responses from Savr Assistant
Savr Assistant will also check in regularly with users to keep the cooking process going smoothly.

Savr instructs, guides, and responds to users

What should I do after toasting the spice?

Users use their voice to type to interact with Savr Assistant.

Instruction video is automatically played in loop so uses don't have to touch the screen
Users can pause or stop the interaction with Savr Assistant

success.

A Finished screen congratulating the users for their effort

Bon Appétit!

Users can Share/ Save/ Write Review about the recipe

To encourage users to continue trying different recipes:

Users are presented with other suggested recipes (Similar Recipe, Different Categories, Other Recipes from Same Author, etc.)
Suggested Recipes will include photo, “Save/Favorite” tap button, basic Calories amount and cooking time, Name and Author of the recipe)

PROTOTYPE

CONCLUSION

Design Sprint is a useful method for quickly testing an idea without spending a lot of time and effort on something that might not work well as expected.

Learning and using Design Sprint for this project for the first time was a very mesmerizing, eye-opening, and interesting journey. I could almost use this method for any idea that needs a quick ideation and implementation:

Day 1 helps me get to know the problems and information about the targeted users
Day 2 provides a big picture of the industry and inspirations
Day 3 puts me in the users’ shoes by creating a step-by-step storyboard of what a user will go through while using the app
Day 4 is when I create the visuals of my idea
Day 5, in my opinion, is very important when I interview user and observe how they interact with the app to finalize my design solutions.

Design Sprint is no longer an exercise but now becomes my companion for my UX/UI learning journey and future professional career.

Savr Recipe

COOKING

INTRODUCTION

savr. recipes app.

the problem.

the goal.

the solution: Design Sprint

DAY 1: MAP Learning about the Problem

task.

i familiarized myself with the problem, read through some research, and mapped out my product’s most important user flow

persona.

end-to-end experience.

I created a possible end-to-end experience map a user might have with the product.

DAY 2: SKETCH Sketching Solutions

lighting demos.

I looked at products that solve the similar problem that’s focused on a different area of engagement for inspiration.

crazy 8.

I decided that the “step-by-step” screen was the most critical for my users because this is where the user complete the primary activity, which helps solve the problem.

This screen will provide:

Short and repeated step-by-step instructions

Voice assistant to assist user through each step

User won’t have to keep washing their hands to use their phone

Voice assistant will control time remaining if user needs more time

Encourage users to finish cooking

Tips and recommendations are provided to prevent mistakes and save time

solution sketch.

I created a solution sketch that presented a tiny storyboard; this shows how a user interacts with an interface, what results from their interactions, and what they will do next - to show how the screens would work in real life.

DAY 3: DECIDE Create a storyboard

storyboard.

I created a lightweight, sketched storyboard; Each screen includes the necessary UI elements that I’ll need to build my prototype for day 4 and the interactions that the user will need to have to complete the task they’d use the app to accomplish.

Here are the features that make SAVR app's solutions different from its competitions:

[8]

Video played on loop so user can cook and look at the video without touching their phone

Tips and recommendations are available to prevent small mistakes

[10] Users can keep the screen on (from shutting off) to they don’t have to keep referring back to their phone.

[3]

Users mark off ready-to-go ingredients

Skim & scan through directions, reviews, short video, photos, etc... to decide if they want to continue

[9] Next steps are available so users can take control of their time and be proactive.

[11-13] VOICE ASSISTANT feature:

Keeps up with the user’s pace

Perform user’s command so user doesn’t have to keep touching their phone

Respond with photo and videos if needed

DAY 4: PROTOTYPE Creating a High-fidelity prototype

high-fidelity prototype - version 1.

I created a solution sketch that presented a tiny storyboard; this shows how a user interacts with an interface, what results from their interactions, and what they will do next - to show how the screens would work in real life.

My solution for Savr Recipes is to [1] provide users manageable information (all information can be scanned and skimmed on one screen).

[2] In order to solve the user’s problem of having to keep washing hands to refer back to their phones, the app provides the feature of keeping the phone screen on (so that users don’t have to unlock their phone) and voice assistance.

DAY 5: TEST Testing Prototype

5 user interviews.

Highlights from the interviews:

Users liked the app's simple, clear design with key info easy to find.

Whether experienced or not, users were excited to try cooking.

Positive feedback: seeing next steps, cooking tips, and ingredient alternatives.

Confusion on the "Finish" screen: users mistook the “Post your Creation” button for sharing the recipe, not photos.

Users loved the "Keep Screen On" feature, but some needed more guidance on using the "Voice Assistant."

improvements made based on user interviews.

Change typeface to add more personality to design

Added the author of the recipe the build authenticity

Added “Share” and “Favorite/Save” recipe buttons for convenience purpose

Added estimated cooking time for each step

Add arrow back and forth to indicate that users can slide left and right to go back to previous step or move on to next step

Changed from “Tap to enable Assistance” to “Enable Assistance” to strengthen command and simply the design

More theme-based color chat box to grab attention

Simplified messages and larger typeface

User can now pause Assistant mode with “Pause” button

[1]​

Added Rating feature for easier interaction

User can share the recipe with others with “Share Recipe” button

“Take photo” makes capturing the experince even quicker

[2]

Simplifying the screen with aligned simple buttons

Removed emoticons to make the screen clean and simple

Added “Similar Recipes” with basic functions (“Like”, Calories, Time, Name, Author) for quicker skim and scan and encourage users to keep making next dishes

DELIVERABLES

main recipe screen.

step one.

interactive Savr assistant.

success.

Bon Appétit!

DAY 1: MAP
Learning about the Problem

DAY 2: SKETCH
Sketching Solutions

DAY 3: DECIDE
Create a storyboard

[10]
Users can keep the screen on (from shutting off) to they don’t have to keep referring back to their phone.

[9]
Next steps are available so users can take control of their time and be proactive.

[11-13]
VOICE ASSISTANT feature:

DAY 4: PROTOTYPE
Creating a High-fidelity prototype

DAY 5: TEST
Testing Prototype

[1]