Overview

Savr is a startup that helps users to discover recipes and cook meals with ease.

• Role: UX / UI

• Timeline: 5 days

I used a modified Google Ventures Design Sprint process to complete this project.

I followed the provided schedule below:

The Problem

Users of Savr have reported difficulty following the steps to cook their meal. This has resulted in dissatisfaction with their cooking experience and meal results.

Preview the Prototype:

Define

Based on user research that Savr shared with me, I summarized what users said were important factors in their cooking experience.

Based on these insights, I then defined the problem with the following HMW statements:

•How might we ensure users know how to incorporate unfamiliar ingredients?

•How might we help users to understand new techniques?

•How might we inform users of everything they need to know for each recipe without them feeling overwhelmed?

User Map

Users of Savr want to cook a meal that is stress-free and delicious. To plan out a solution, I constructed the user map below to represent a possible end-to-end experience.

Lightning Demos

I compared existing recipe apps to gain understanding of necessary features within each product. I was especially interested to observe how the user would access steps, ingredients, and guidance for each app.

From the lightening demos, I noted what features would work best to help users follow recipes.

•Videos were used in multiple recipe apps, and would be a way for users to fully understand each step through visuals and audio.

•Step by step mode was used in the majority of recipe apps and would be helpful for users to achieve their end goal.

Critical Screens

I followed Google Venture's Crazy 8s exercise to generate ideas quickly. I then narrowed my sketches down to the most critical screen. I created a 3-panel storyboard around the critical screen.

The Solution

Once I knew my most critical screen, I was able to sketch out possible storyboards that would guide my start to end experience for the user. I translated these sketches into wireframes.

My wireframes guided me into developing high fidelity screens. I then input those high fidelity screens into a prototype. My focus was on designing the necessary screens that the user would need in order to interact with the app.

Watch the prototype below:

Using my original prototype consisting of wireframes, I conducted 5 usability tests. Participants were people who cook regularly and use either recipe apps or recipes from websites.

All 5 participants were able to complete the task at hand with ease.
Based off of user testing, I made the following iterations:

Iterations

Viewing list of ingredients

Before, ingredients were in a pop-out box that could be accessed at any time. However, during user testing, users reported they liked ingredients to be one of the first things they see. Now, with the segmented controls, ingredients are the first thing the user sees, while still being able to easily access while viewing steps and helpful hints.

Finding Step by Step Mode Button

Before, the user had to scroll down to find the "Step by Step Mode" button. Now, the final screen has "Ingredients, Steps, and Helpful Hints" organized where the user can find the "Step by Step Mode" button with one tap.

Key Learnings

•There are multiple ways to approach research and find answers. Design sprints are quick. This sprint gave me just enough information to be able to find a solution to improve my original design in order to make Savr easier to follow along.

•I was able to find what works best with my users by focusing on the most simple and necessary screens. Due to the limited time a design sprint provides, I was able to focus on the screens that would be most important for my users to complete the main task and cook a recipe with ease.