Springboard

Savr App

Empower women with a better experience on birth control.

Project brief

“Design Sprint” is a 5-day marathon developed by Google Venture for quickly validating critical business decisions through researching, ideation, prototyping, and usability testing. The idea is to generate an idea and test its feasibility in 5 days. In this project, I was given a challenge from BiteSize and conducted my one-person version of a design sprint. 

Savr is a startup that built the Savr app, it is intended to use as a collection of easy-to-follow recipes for people to follow and cook fantastic meals at home. During the Covid-19 pandemic, creating a more engaging experience like this is essential.

Duration: 5 Days
Key Skills: Design Research, Ideation, Sketching, UI Design, Prototyping and Usability Test

Day 1 - Research

Understand the problem through reading exiting researches, and mapping out a users’ flow when using the application to achieve their goals.

Design Constrains:

  • Currently, the recipe is written in texts with step-by-step instructions.
  • The solution should be designed as a feature of the native mobile app.
  • The solution should focus on creating a better experience when users are using the recipes while cooking.

Savr is an app designed for in-home chiefs with growing recipes. Users can either rate and review the recipes, or use those recipes for cooking great meals. However, recently negative reviews about Savr’s recipes have emerged, users were complaining about the hard-to-managed timing, overly complicated steps, and onerous techniques required for some specific meals.

The stakeholder provided with me a full-documented user interview to start with. While I took notes on interviews, I have quickly found some patterns.

Users are often stressed when they have to constantly refer back to their phones to follow the recipe because the steps are too complicated to remember. Moreover, time management is an issue for an “unsuccessful” meal, especially when the recipe involves using various tools and new techniques.

I collected some interview highlights.

Experience Mapping

  • HMW help users improve cooking time management when following the recipes?
  • HMW guide users on using new techniques or tools while following a new recipe?
  • HMW simplify the recipes so that they are both easy to follow and informational?

Persona

The next step I took here is mapping out how Nick would use the recipes he found from Savr to cook. The map reaches “the perfect end” where the app meets users’ needs. At the end of Day-1, I constructed Nick’s problems into the HMW formula.

Problem

Context

Day 2 - Sketch

The second day of the design sprint is to generate ideas and ideating through possibilities. Get inspirations by looking at similar products, and use the “crazy eight” technique to sketch out all the possible paths.

Lightning Demo

BILT

BILT is an intelligent instruction app using 3D instruction for products that require assembling, installing, and maintenance. The takeaway from this app is the 3D instruction feature. It’s so interactive and intuitive that it actually made assembling easier. What’s more about this app is that you can click on each tool that’s required for assembling and get a demo on how to use the tool. This feature is especially useful for the cooking experience since it often requires the usage of unfamiliar tools as well.

As I have got inspirations from the lightning demo. It’s time for execution, the timer is set off to be 8 minutes, in 8 minutes I have to generate 8 different ideas and sketch them out. The principle here is to come up with as many solutions as possible and be wide open.

Crazy 8s

3 Panel Storyboard

Using one idea that I chose from the crazy 8s, I started my 3-panel storyboard where users have landed on the recipe screen that they would use, the screen would show how a “perfectly completed” dish would look. Next is the critical screen in which the GIF instruction, interactive button, and thumbnail list are the focus. Lastly, the end screen would show others’ reviews on this recipe and this dish.

Keep

Keep is a fitness app from which I found many functions are worth learning. The app split each workout into small exercises, and users can preview the next exercise in a thumbnail list. The thumbnail list is composed of repetitive GIFs and a text description, which is a fantastic way for users to build up memory for the exercises. Moreover, each exercise is subdivided into key elements including muscle movements, demo, and timing so that users can better understand the main point of this exercise.

Tasty offers users an option to use a “step by step focus mode” for instructions, which could truly “free” the already-occupied hands while cooking. What I also liked about Tasty is that it has an “I made this” section on which users can check how the completed meal would look like in reality.

Tasty
Whisk

I like how the Whisk app uses small graphics on the ingredient list to relieve the cognitive load of having to imagine how everything should look like. The app split prep.time with cook time so that users can be mentally prepared for the cooking.

The lightning demo is for getting quick inspiration. Not only was I look at competitors’ products but I also researched solutions that tackle problems from different industries. Spent half of my day, I found 5 apps for inspiration, some of them are recipe apps, some of them are fitness apps or learning apps with amazing functions that I think can be integrated into our Savr app.

Day 3 - Decide

It’s the day to decide, starting from the original idea and exploring more to complete a whole story. I expand my 3-panel into a storyboard. The storyboard is where every detailed idea starts to show up.

Storyboard

  1. I started from the home screen where users start to explore recipes. 
  2. After browsing and deciding on which dish they want to cook, users would land on the dish main screen from where some basic information about this dish shows. In this screen, users can also view the ingredients list and how they should be prepared prior to cooking. At this screen, users can also view a cooking timeline of this dish so that they can be prepared about the timing. 
  3. After users click “Start”, the cooking begins. Each step is cut into small videos with a preview of the next steps on the bottom list. The next steps are shown as text and GIF thumbnails so to better prepare the users. 
  4. Finishing off, users can better learn this recipe by looking at others’ dishes or sharing their own one. In the tools tab, users can save the tools and terminologies that they’ve learned today for future reference.

Day 4 - Prototype

The fourth day is to build a realistic prototype for later user testing. The challenge is to build the prototype within a day and to focus on the most essential function of our product.

I started by referring back to the storyboard I created on Day 3. The focus is to improve users’ experience of using our recipes. I created 16 screens that take the journey of making a traditional Korean dish. I also added features including timeline, list - preview, information card, voice control, and so on.

Prototypes

Day 5 - Validate

The fourth day is to build a realistic prototype for later user testing. The challenge is to build the prototype within a day and to focus on the most essential function of our product.

Rapid Testing

Takeaways:
  • Users liked the way the ingredient list was visualized with actual photo thumbnail, they especially expressed their favor on the “tooltips”/”ingredient tips” feature.
  • Some users failed to recognize that the ingredient list is clickable, suggesting a replacement/reposition of the “eye icon”.
  • The timeline feature isn’t “interesting” enough to be used as a core feature, it was “hidden” behind the unnoticeable timeline label which could be redesigned into a CTA button.
  • All users preferred video recipes over pictures recipes, however, due to technical and time constraints, I can only place a video icon on each instruction screen to show that it’s a video.
  • Some buttons (timeline and tool) are unrecognizable by users.
  • Users liked the way that the next steps are designed in thumbnail with text description, they said it was well thought out.

Begin by screening participants that have experience in cooking with online recipes. I recruited 5 (starting from day1) participants and conducted 1 on 1 remote tests with them, using the online platform Zoom. When conducting the tests, I followed the 5 act process:

  • Introducing the purpose of this testing session
  • A brief interview on participants’ past experience on the problem
  • Introducting of the prototype
  • Tasks:
    a. Select the designed recipe, and find out what are the preparations (ingredients, cooking time, cooking tools) you will need to cook this dish;
    b. Follow the step-by-step instructions to “cook” this dish;
  • Final debrief questions
    a. What do you think of the process?
    b. Was there any step/element that brothered you?
    c. Do you have any final comments?

Final Prototype

Reflections

The design sprint is a highly-efficient process, each step moved at a fast pace which could become a challenge for new designers especially those who are not familiar with design tools.

For myself, I found the most challenging part is the sketching day, during which I only have one minute for each idea. I used this opportunity to practice my brainstorming, sketching, and ideation processes, and I think I learned a lot from this process.

I also improved my time management skill, everyday I have to accomplish daily tasks, and also arrange day 5 testing with participants. Everyday, I wrote down my next day deliverables on Google calendar so that I can be prepared.

The most important lesson I learned from this one-person design sprint is that design is really an iteration process. Sometimes “finish is better than perfect because you can only see the opportunity of great improvement by looking back to time.