SAVR Recipes: GV Design Sprint

Just imagine you spend the whole day in the kitchen to recreate a dish but when you sit down to eat you discover :

How? I don’t know 😧. Sometimes I get it right 😍 and sometimes… I don’t 🥺 That’s why I was determined to think of a way to simplify the process of users struggling to make their way through recipes because of confusing directions and/or cooking techniques while having to constantly refer back to their phones in order to complete a recipe.

How it all began?

So recently I was a part of Springboard Bootcamp, where we were given 5 Problem statements and we had to choose one of them and provide a solution to the existing problem. Overall it was an awesome experience that pushed me to my limits and turned out to be a great learning curve.

I wanted to sharpen my UI/UX design sprint skills, so I decided to tackle the mini design sprint challenge for a recipe app called SAVR.

Scope and constraints

• This was a standalone project spanned over two weeks as part of the UI/UX Bootcamp by Springboard, India.
• I was given additional design constraint by my mentor which was quite a challenge.

Overview

SAVR is a new startup that wants to make it easier for people to follow new recipes and cook great meals at home. The app offers recipes of various levels of difficulty for at-home cooks to follow along. They also have an active community that gives feedback on recipes for other users.

Challenge

Recently, SAVR has been getting poor reviews on recipes.

Some of the problems faced by the users are:

• Users may be unfamiliar with certain cooking terminologies .
• They are disappointed when they realise that they are not prepared for the recipe only after they have begun cooking.
• They were not satisfied with the end result as the instructions were not clear or properly tailored.
• Constantly referring to the app for guidance, going back and forth to ingredients list, parallel processing instructions of certain items etc in the middle of the cooking.
• More advanced or new techniques that are difficult to execute.
• Having a lot of ingredients that may not be readily available.
• May not know how the ingredients may look at a specific period of time which may lead to overcooking or undercooking of the ingredients.

My Role

In this solo sprint I took the role of UX/UI designer wherein my responsibilities included performing prototyping, storyboarding, usability testing, market research, and mapping potential routes.

Timeline

This project was completed in five days.

My Design Process

I followed a Design Sprint method for this project.

Day 1 — Understanding the problem and Mapping the solutions

Step 1 : Understanding the problem

To understand the problems in detail, SAVR interviewed some of the users. There were some particular quotes about their experiences with the current application.

The persona of Nick was developed after conducting interviews with several home-cooks about their experiences while cooking a recipe for the first time.

“Nick is a 29 year old who resides in Los Angeles, California who loves to cook in his free time. He likes to try new recipes but struggles because of unclear instructions.”

“How Might I” Statement

To start with my research process I decided to use the ‘HMW’ method. ‘HMW’ or ‘How Might We’ is a method to collect thoughts and questions on sticky notes to work on defining a design challenge. A method which can be used at different points in your challenge and will bring some questions and ideas to your board which can be used to develop and define the upcoming challenge. But in this case, as I’m working alone, it is going to be ‘How Might I’ or ‘HMI’.

How Might I make sure that the recipe isn’t too complicated for the home chef?

How Might I make sure the home chef gets feedback after every step?

How Might I save time by telling chefs about steps which can be done in parallel?

How Might I create an effective interaction for the app?

How Might I help users better understand the recipe?

How Might I make the cooking experience more fun and easier to accomplish?

Step 2 : Mapping

After going through research, interviews and persona, I used what we call an ‘Affinity Mapping’. This technique helped me make sense of all the user research notes and observations I made by grouping those ideas by themes.

After thoroughly understanding the problem, I started mapping the path a user would take to follow a recipe.

Day 2 — Sketching

Step 1 : Lightning Demo

In a sprint, we look at others’ work to get inspired. Good ideas come from combining and building on existing ones.

For this exercise I used a modified version of what we call LIGHTING DEMOS. Lighting demos consist of quick 3 minutes demonstrations (hence the name of lighting demos) of a product or service you think could be used as an inspiration for your product.

In this solo sprint, I looked for inspiring products and analysed how they solved their problem. The question was: which features or ideas can I remix or improve to solve my own problem?

Udemy

This is a popular online education platform that allows instructors to build online courses on their preferred topics.

After choosing a course, users get a list of lessons (steps) they learn and execute to finish their project. The lessons include timing and an explanatory title which help them to take a look at what they will be doing at the beginning, middle or end of their project. Videos help users know that they’re on the right track and help them measure their progress.

Tasty

This popular recipe app has been developed by BuzzFeed and it features over 4,000 recipes. Tasty comes with tools like Advanced Search, Step-By-Step instruction mode, a ‘My Recipes’ page, and a useful ‘Phone Awake’ feature that prevents it from going back while you cook. It lets you filter based on food preference and suggests recipes based on dietary needs, social plans, cuisine, and even speed. The app is very easy to understand and navigate, and there is a nifty tips section that offers guidelines from users who have already made the recipe.

Nike Training Club

This is a popular app which is perfect for training at home, gym or on the road.

Users get all the important information they need before exercising. No surprises concerning equipment or exercise’s complexity level trouble them in the middle of their workout. The list of steps is visible and includes a photo, timing and an explanatory title. A short video demonstrating the exercise help users figure out an exercise they don’t understand before starting their workout — this avoids surprises which could lead to losing momentum during the workout. Once they start their desired workout, users don’t need to touch their phones until the end of their workout.

Step 2 : ‘Crazy 8’ sketches

When I understood the pros and cons of the above mentioned apps , I completed several rounds of brainstorm-sketching by using the ‘Crazy 8’ method which ultimately led to a series of solution sketches.

Step 3 : Sketching the critical screen

The ‘Crazy 8' activity led me to sketch a solution based on a critical screen, or a primary screen that I thought would be the best solution.

Why did I choose the recipe’s main page (step by step and preparation)?

The step by step of the recipe is the core of any cooking app.This is what allows the user to simply cook what they want.

I also focused on the preparation part of the recipe. Users kept pointing out that the app wasn’t helping them to prepare beforehand. This led to surprises which made for mistakes, feeling rushed and stressed, wasting time and being disappointed with the final result.

Day 3 — Decide

Step 1 : Storyboard

On day 3, I began the storyboard process. I reviewed the research, persona and the problem statement to stay on track. This is sort of a low fidelity wireframe.

To do so, I sketched a series of screens that represented the entire journey a user would experience while using the SAVR application.

The storyboard is the user flow of how the user will complete the recipe by learning in a single flow.

Based on the research I devised several features to improve the end-to-end user experience while also considering specific pain points noted in the user interviews.

Primary observation from the user interviews was that the individuals often felt less than prepared when they were beginning a new recipe, which manifests itself in having kitchen tools, ingredients, or prep items to be ready when it’s time for that particular step. Additionally, users found it important to know (or be reassured) that they are on the right track while making a new recipe.

The new features I introduced to SAVR are:

• By including the essentials for preparing the dishes at every step, I’ve tried to avoid any surprises for the user while preparing the dish.
• As the user proceeds step by step in preparing the dish, the availability of some important features like sharing their end results will help increase their confidence
• I’ve divided the steps in preparing the dishes by different colors to make the user aware about the steps throughout while preparing the dish.
• A “microphone” in the screens has also been provided to help users with hands free instructions.
• And lastly, the inclusion of an info bar to inform users how long the recipe will take to make, how difficult it is to prepare and how many people it will serve.

Day 4 — Prototype

After almost a full week of defining the problem, interviewing experts, lightning demos, sketching sessions, lots of decisions, storyboarding and building, I was finally ready to put my prototype together. Using my storyboard as a guide I began to recreate the screens in Figma Design tool.

When creating the prototype, I decided to implement the best features that would ease users’ current struggles.

• Utilising “step by step” feature to allow guide.
• Steps represented by different colors to enable user awareness about each step throughout the preparation of the dish.
• Make instructions easy to read and comprehend.
• Incorporate timeline elements to keep users aware of where they are in the process of making the meal of their choosing.

Using Figma, I rapidly prototyped the storyboard into a working prototype. Below, you will find an embedded prototype of the SAVR app.

• Considering the rapid nature of this sprint, I chose to use Figma. In my experience, Figma has the best combination of design elements and prototyping features for this specific task.

• Choosing a one-page, scrollable prototype sets the stage for users. It offers a clear path throughout the recipe, clearly defining each step in the order it should be intended to be followed.

• Keeping in mind the goal and the MVP(Minimum Viable Product), the steps of the recipe have been cut to provide enough information needed for accurate results in our next day of the sprint: testing.

https://www.awesomescreenshot.com/video/3673637?key=728c477aa4b6954e46e9bd3cb0537640

Day 5 — Validate

It was finally the time to test the prototype! All tests were done remotely over Zoom. All the participants cooked at home and at one point or another have used a recipe for their cooking.

Main Takeaways from the Usability Test

The tests gave me a great idea of some improvements that I could make to the prototype. These are some of the main takeaways:

1. Increased the font size of the name of the ingredients in the recipes.

2. Many users welcomed the idea of ingredients mentioned at every step in preparing the dish. One user said: “This is exactly what I would want to avoid going back to the ingredients list.”

3. One user summed up saying — ‘this is how a meal prep kit should be set up’.

4. All users wanted to browse through the directions first before proceeding to cook the recipe.

5. One user said: “I liked the idea of the ingredients being mentioned in text as well as in image form.”

6. The most important out of the box idea was the cleverly mentioning the parallel tasks within the steps of preparing the recipe as it would help in saving a lot of time.

Conclusion

Ultimately, I didn’t encounter any major usability issues. Each user was able to complete the tasks in the prototype. As I look back over my assumptions and test questions, I’ve learned the following:

1. High quality images can be just as efficient as video and/or narration.
2. Adding in additional support throughout the recipe when determining timing was critical to improving the cooking experience.
3. Finally, I learned that at-home cooks benefit from simple, straightforward instructions.

After an intense 5 day GV design sprint I feel confident in my new and improved SAVR app. I believe I accomplished all of the HMI questions that I proposed on day 1. The prototype was not actually voice controlled for the user tests. I feel that this feature would have contributed to an even better user experience for my test subjects.

This GV design sprint is a wonderful concept, and really helped me to not get hung up on one or two pain points. It is an intense 5 days, but it really helps you stay focused on the task at hand.