Recipe Inspector

Design Sprint in partnership with

View prototype

T E A M

Esther Chee, Mark Eugster, Ray Mirza,
Sarah Innes, Yasmin Chowdhury & Emilie Mazurek (me!)

M Y R O L E

UX/UI Designer, Prototyper

T I M E L I N E

5 Days

S U M M A R Y

We created a digital solution that improves the recipe generation process by verifying that ingredients adhere to the brief parameters.

DESIGN WHAT?

Credit to Jake Knapp, a design sprint is a time-constrained, five-phase process that uses design thinking to reduce the risk when bringing a new product to the market:

D A Y # 1

Map

Research

Define Questions

Goal Setting

Experience Map

D A Y # 2

Sketch

Notes

Ideas

Crazy 8s

Solution Sketch

D A Y # 3

Decide

Art Museum

Heat Map

Speed Critique

Dot Voting

D A Y # 4

Build

Wireframe

Prototype

Trial Run

D A Y # 5

Test

User Testing

Iterate

Present

DAY 1

CLIENT BRIEF

HelloFresh sells the most popular meal kit in the world. They are on a mission to change the way people eat forever. Their core values consist of:

Budget
Health
Taste
Sustainability

HelloFresh prides themselves on providing a diverse set of recipes, ensuring a positive customer experience. However, the recipe creation process is done using several different systems, which can cause delays.

THE CHALLENGE

With only 30 recipes right now, we need more! How do we make this faster while maintaining quality? The goal is to facilitate the recipe creation process and to have recipe developers use less tools.

How might we help recipe developers create more recipes than what they create currently, without hiring in any new resources?

RESEARCH & QUESTIONS

After getting to know our each other we hit the ground running. We pulled information from our client brief, online articles, and a face-to-face interview to answer the following questions:

What is working?

recipe creators are able to find all the information they require

What is not working?

recipe creators have to use multiple tools to gather all of the recipe specs

What could be enhanced?

recipe creators spend too much time looking up technical details when creating new recipes

DAY 2

THE QUESTION

In order to best address the question at hand, we reframed the design question to:

How might we automate the process of creating recipes in order to increase efficiency while developing new meal options?

COMPETITOR ANALYSIS

Now it was time to start gathering inspiration. We looked similar products in the market to gather see what already existed in the space:

extensive library of ingredients with caloric breakdown

nothing to help with recipe creation or budgeting

easily creates new recipe with the addition of a single ingredient

ingredients sorted poorly and limited options available

C O N S

P R O S

quickly generates recipes and sorts by dietary restrictions

many duplicates and links are not hosted internally

SOLUTION SKETCH

Now we each sketched a version of our best idea.

My leading idea was a recipe checker that would automatically update as new ingredients were added or subtracted, including categories such as calories, price per serving and number of ingredients.

DAY 3

AND THE WINNER IS...

After reviewing the sprint goal and voting the team decided on my idea of the recipe checker to move forward with.

To the team’s credit, there were so many great ideas that we decided to implement a few others into our design:

including adding tags to filter recipes
having a shared library for completed recipes

DAY 4

DESIGN & PROTOTYPE

The original design was functional and got the job done, but that’s where the pleasantries end. Full transparency, I detested the UI, but with and a looming deadline I thought better than to reinvent the wheel. Until now.
So, drum roll please, welcome to my redesigned version of Recipe Inspector!

While clicking through the prototype, keep in mind that the goal is for the recipe to not exceed any of the maximum values and tasks are:

Fill in the maximum values and upload a new recipe
Reduce Olive Oil to 2 tbsp
Add Red Pepper to the recipe
Remove Chanterelle Mushroom and replace with White Mushroom
Upload recipe to the library

Explore prototype

USER TESTING

After the build was complete it was time to test our assumptions. We conducted five rounds of user testing, ensuring our design both was functional and intuitive.

While we didn’t have time to implement the majority of the changes before our presentation, I incorporated them into my new design:

C H A N G E 1

The original indicator bar confused testers as the max value wasn’t obvious.
Changing the bars to circles allowed the maximum value stand out.

C H A N G E 2

Search wasn’t prominent enough.
Updating the hierarchy and drawing this feature to the centre of the page allows for improved accessibility.

C H A N G E 3

Testers didn’t understand how they would update the ingredient quantity.
It was intuitive to type in the desired value so I made them editable with a single click.

DAY 5

IMPACT

The more that employees can interact with Recipe Inspector, the more opportunities there will be for automation. Eventually, an AI component will allow for more advanced suggestions.

Recipe Inspector could also be used to modify existing recipes, saving time from tedious manually entering recipe information over and over again.

Looking at the big picture, this will save time, ultimately saving money while also leading to happier employees.

KEY LEARNINGS

Ah yes, I can hear the saying “hindsight is 20/20” now.
Here’s what that looks like for me:

# 1

Pivot

Initially, we were going to create a recipe “randomizer” of sorts. While in theory this could have worked, I don’t believe that substituting pork for chicken and changing a few spices would have been especially groundbreaking for recipe developers.

It was certainly intimidating to feel like we were “starting over” halfway through our sprint, but I think I speak for everyone when I say we are much happier with the final direction.

# 2

Desktop ≠ Mobile

What to do with all that space!

I was excited to design for desktop, even thinking it might be a bit easier considering all the space you get to play with. But that’s just it - there’s a lot of space to play with.

This pushed me outside of my comfort zone and it was great practice learning and implementing grid systems for desktop. Especially after the completed redesign, I can say with certainty that my design ability has grown.

# 3

Out with the old

The original UI for Recipe Inspector, as described by my loving partner, “looked like a high school student finished it during a 3h deadline”
The worst part? He wasn’t wrong.

But this just gave me the opportunity to go back and rework the design–and I did just that.

I’m much more pleased with the final outcome and it’s exciting to see such a transformation.

Splendid right?
We should probably chat about it.

*This was an academic project and Recipe Inspector is a fictional product