Savr

Smell

Design for a recipe app for better experience when cooking in kitchen.

Savr is a new startup that has a growing library of great recipes and tips and has an active community of in-home chefs. The users rate & review recipes for others.

Problem Domain

Savr has a good feedback on the quality of their recipes, but now they have been receiving negative feedback on some of their complicated recipes. They felt the recipes were not easy to understand and clear. Seen feedback related to

Timing, preparation & order of steps.
How users learn & implement new cooking techniques.

They need to help users accurately and easily follow the cooking instructions.

Since I was the only one, I modified the process a bit.

Roles & Responsibilities

For this project, I worked as

UX Designer
UI Designer
Decider

Design constraints

For this project, I had to design solutions as feature for the Savr's native mobile app. Also, since the quality of recipes is good, my main task was to focus on creating better experience when using the app.

Research & Persona

For this project, I was provided with a Persona as well as a few problem areas faced by users.

Pain points of user from research:

Users get confused halfway through whether they are on the right track.
Users want to be able to be efficient on time and start preparing for the next step.
Users want things like vegetables prepared beforehand.
Users want to see actual time required to make a dish, including the preps.
Want the experience to be enjoyable.

My process

Day 1: Map

I mapped out a few possible solutions, keeping my user at the left, and their goal at the right.

Out of these 4 maps, I selected the third map to work on.

Selected this map because:

Users can individually select whether they want to see detailed instructions for preparation or cooking, and also get info on the next step.
As compared to a video, which keeps on playing even if something messes up, this type of solution will be controlled by the user.
Gamification of the process will make this experience enjoyable and less stressful.

Day 2: Sketch

Lightning Demo: Looking at existing solutions

To get ideas and mix-and -match, I looked at a few competitors' apps, as well as a few apps that followed a step-by-step or gamified approach.

Tasty

An app on which users can browse and cook new recipes. It is a direct competitor and so helped me understand their approach.

This app has all the details required for a person to first view a recipe and if they decide to make it, follow a step-by-step process. The interaction of the app is also easy to do when working in the kitchen, like an easy swipe to go to the previous/next step.

Yummly

An app on which users can browse and cook new recipes.Just like tasty, it is a direct competitor and so helped me understand their approach.

Duolingo

An app to learn languages. Not a direct competitor.

This app helps users learn language in a step-by-step manner, with gamification. The top bar also clearly shows how much %age, user has already completed.

Sketching possible solutions using the 'Crazy 8' method

I looked at the map that I created on day-1 and decided on my most critical screen, which will be the step-screen, showing the instructions for a particular step. It is the most critical because it will be the main screen that users will be interacting with when working in the kitchen.

Out of these, I felt that the fourth is the best, because:

Buttons as well as slide option to move between steps, as users hands may be dirty while cooking.
It is not overcrowded with many options, making it easy for users to operate.

I also liked the audio output/input from the sixth sketch, as it can be useful when in the kitchen, so I decided to include that as well.

Solution Sketch showing 3 screens

Day 3: Storyboard

In an actual Design Sprint, the team works together to decide on which ideas are best. Since I was the only one working on this Sprint, I made the decision myself the previous day itself. For Day 3, I worked on creating a storyboard for the key moments of interaction. The interactions were more like low-fidelity sketches that I could implement for my prototypes.

Apart from my storyboard, this was also the day I started to consider people for interviewing on day 5. I reached out to my friends and network to get 5 people for testing. As I knew these people, I included those who often spend time in the kitchen.

Day 4: Prototype

I created my high-fidelity mockups and prototype as per my storyboard.I used the primary color of Savr and the Montserrat typeface to give a friendly and modern vibe to the app. I used Adobe XD, and also did voice prototyping, as Savr required to have voice inputs.

Day 5: Testing

The next day, I conducted usability testing for my app. Through these tests, I wanted to find out:

How easy/difficult it is to understand the interactions.
How easy or difficult it is to understand the way instructions are presented to the users.
If they feel any flaws in the flow?

Scenario: You have just come home from work. Today you decide to make Pasta. You have never made it before. You want to use Savr to learn how to do it.

Questions:

Look at the screen. Just look at the info provided. What do you think? IS something missing?
Let's assume you see the ingredients and you have them at home. Now you want to start preparing. What would you do?
Let's assume you are now starting to work in the kitchen. How would you follow the instructions?

Highlights from user testing

What users liked

One thing they liked the most was the voice interaction, making it easy to operate when working in the kitchen.
They also liked the way instructions for cooking were presented.

A few usability issues with the main recipe page

In the beginning, I thought that it would be best to show cooking steps on the recipe page and also give user option to view in a step by step manner. But most users did not go for the view step-by-step button, as they saw all the steps below. They did not feel the need for detailed instructions on the recipe page if there is a step by step button for it.
The ‘View Step-by-Step' button didn’t look like a CTA.
The words ‘View Step-by-Step' confused users as steps were mentioned below.
Users also did not feel the need to see the preparation part in a step-by-step guided manner.

A few usability issues with the voice interaction

Almost all users were not clear about the voice interaction instructions, didn’t see the word Savr before each command.
Most users didn’t understand what voice interaction meant, felt that the voice interaction means that the app will be on speaker mode.
None of the users understood the info symbol near the voice interaction.
All the users mistook the mic symbol as a button, and felt they had to press it to speak.

Insights

Users need to be told about the voice guide feature on the first page only, so that they know about the feature.
Instructions for voice interaction need to be clear and should be shown to user when they turn it on.
The cooking steps can be removed from the recipe page, and can be shown in a step-by-step manner only.

Results & Learning

The results of my user testing showed me what issues were there, and also a few suggestions for what could be better. Through this case study, I learned:

The basics of how to go about a Design Sprint.
How to manage time in a Sprint.
Rapid prototyping, creating only the essential screens and interactions.

Next Steps

For this project, the next steps could be:

To work on the recipe page and reduce the amount of information.
Telling users about the voice guided recipe at the first page itself, so that they know the availability of the feature.
I could also work a bit for clear instructions for the voice interaction.

NimbleNotes

The Silicon Store