Improving the Cooking Experience for FLAVR

Scope: 4 People • Live Client • 2 Weeks • Remote

Is it possible to make cooking easier and more enjoyable?

About the client

FLAVR is a UK-based ingredient-and-recipe meal service. They provide an intelligent user experience that enables users to choose recipes while FLAVR sorts out the shopping list.

THE BRIEF

Make the best possible user experience from receiving the groceries, managing recipes, and the cooking experience.

My Responsibilities and the Team

As a team of 4, we were tasked with focusing on the desktop viewport and improving the UX on "My Recipes Page" and "Recipe Methods Page." Our main goal was to develop solutions to improve the cooking experience and FLAVR's user experience.

I was the facilitator and helped to keep the team on target with deadlines. My responsibilities included: research, user testing, user interviews, and group and design studio facilitation. I was the lead designer on the text recipe and PDF page.

Hongxi designed the video feature, James designed the favorite recipes pages, and Bo designed the explore page.

The process - what we did

FLAVR site audit - to discover accessibility issues
Researched 13 direct competitors - to find inspiration and solutions
Surveyed 27 potential users - to help identify our users
Interviewed 12 potential users - to understand cooking experiences
Experience map, Empathy map, and Persona to define our user
Pain point matrix to determine which problems should be a priority
Problem Statement and How Might We - define the problem to solve
2 Design Studio sessions with the client to find solutions
Contextual Research - 9 Participants cooked with an instructor
Technology research - What is possible? 11 solutions researched
Recipe Research - 13 recipe display methods looked at
Tested 5 different iterations of the digital wireframes
Tested our wireframes 20 times in total

Tools

Pen and paper
Figma
Notion
Slack
Zoom
Google Forms, Analytics
Photoshop
Miro
Hotjar
Mixpanel

Key Deliverables

Research insight & findings
Personas and scenarios
Experience map/User journeys
Information Architecture
Design & usability recommendations
User flows and Screen flows
Product Sketches and wireframes
High fidelity mock-up
Prototype of designs
User Stories
A final presentation to the client

The Result

We made it easier to search for new recipes with improved icons and filters to help users find what they like faster.

We made ways for the users to save recipes and create categories to make it easier for meal planning, previously unavailable.

The traditional text recipe has been supercharged, and we created an all-new video feature to help make cooking hands-free and more enjoyable.

Keep scrolling to read how it happened.

DISCOVER

Surveys, user interviews, and a lot of research

Competitor Research and FLAVR Site Audit

We researched 9 direct competitors.
We looked at the favorites page, recipe search, and display methods.
We analyzed the accessibility of FLAVR.

This is the original FLAVR website, and we are responsible for improving these pages and creating a favorite recipes page.

Key Findings

Only one competitor had a video recipe.
Many of the colors on FLAVR's website are inaccessible.
Blue Apron has an exciting feature where you can "play" the recipe and cook along.

To understand and identify our users, we sent out a survey, 27 people responded.

52% look up cooking tutorials, and another 22% sometimes do.

Too many steps, an unfamiliar method, or it takes too long are the most common reasons why not to try a new recipe.

People suggested that short bullet points, pictures, and videos were helpful to follow along with instructions.

We interviewed 12 potential users for further understanding

Many people complained about preparation, measuring, washing up, or complicated instructions.

Specific to digital devices, people complained about hard-to-follow videos, excessive scrolling, and touching the device too often.

Multi-tasking is something that users didn't always mention specifically, but it often came up as a pain point.

So many pain points!

There were so many pain points that we plotted them on a matrix to help determine which ones we should prioritize.

How much is it going to ruin your day by how many were hurt?

Contextual Research — Jon's Cooking Show

As part of our weekly GA classroom activities, Jon presented us with a short cooking tutorial over zoom and gave Team FLAVR an opportunity for contextual research.

We observed users trying to cook something for the first time with interactive video instructions.

What happened?

Jon prepared the class for his cooking tutorial a few days before.
People could ask questions since it was happening live.
Many participants struggled to keep up. They didn't know which type of ingredient to use or missed an instruction.
People asked Jon to stop and wait or to repeat something many times.

There were mixed results.

What did we learn?

Jon did not make the process faster.
Having text instructions or ingredients available alongside could be helpful.
Jon's pro tips gave the user confidence their cooking is going well.
Experience helps a lot, and so does being prepared with the right ingredients.

The best result.

Key research takeaways and reflections

We learned about many pain points and identified user problems.
From Jon's cooking show, we learned having an instructor doesn't solve all of the users' cooking problems.
I enjoy the research process and find a lot of it fascinating, but it isn't easy to condense all of the findings.

DEFINE

Persona, Problem Statements, HMW's and Design Studio

Identifying our user, based on research

Our user isn't too young — meal planning comes with maturity.
Our user is someone who cooks for more than one— more savings with more servings.
They have a busy or structured lifestyle — not enough time to shop or be spontaneous.
They have an average cooking ability— they need some guidance or inspiration, but they aren't professionals.

From these conclusions, we made a persona, meet Robyn

The persona helps us empathize with the user and understand their motivations, goals, and frustrations better.

We had a good understanding of our users and could form a problem statement.

Problem Statements

We took these problems into the design phase and focused on redesigning the app to solve them.

"Robyn needs an easy and time-efficient way to learn and cook new recipes because she is often busy."

"Robyn needs a way to cook a recipe without having to keep touching her device during the process."

Solution Ideation - Design Studio with FLAVR

We choose two "How Might We" statements.
Then we sketched 6 potential solutions for each.
We presented our ideas to each other.
Then dot voted on the best solutions.

Alex and Candice from FLAVR joined the team for the design studio.

"How might we make the cooking process faster and more efficient?"

Possible solutions to HMW #1

Progress bars
Cooking timers
Pro-tips
Measuring cups

"Pro-tips" was a winner.

"How might we reduce the number of times Robyn needs to scroll down or touch her device?"

Possible solutions to HMW #2

Voice and gesture control
Responsive webpage with it all
Timed videos
Quick icons for faster reading

Quick icons and responsive pages were popular.

Technology Research - What is possible?

Now that we have some ideas, we needed to research what was possible?

We researched and tested tools already available for a website such as Siri and Voice Control, but they were not great solutions.
We found great solutions with Amazon and Google smart displays, even a few exciting mobile apps, but we are designing a website.
We looked at gesture technology (to wave page up, down, etc.) but, users would later express concerns for their privacy with the camera.
Not all users were ready for audio recipes or voice control. As one user said, "I am not the kind of person who likes to talk to computers."

Text Recipe Research

I looked at 12 different recipe websites searching for solutions and additional ideas.

Features I looked at:

Pro-tips
Food waste and storage tips
Recipe display options
PDFs
Notes
Personalization features

We would take all of these findings into our development stage

We have lots of ideas from our design studio and a lot of research to give us an idea of what is possible and popular. Not everyone prefers videos, but we can use pro-tips and other helpful information elsewhere.

DEVELOP

Site Map and lots of testing!

Site Map

Below is the site map to show the website's structure, and highlighted are the pages we will focus on.

We worked on the explore page, favorite, order history, and cooking instructions.

Prototype and test — again and again

We made a mashed-up recipe page in Figma together with features from our design studio. From there, we would start the testing process. We did 20 different user tests on 5 different versions.

A few screen captures of user testing.

Text Recipe page iterations

Most of the changes were to make the recipe more legible and easier to read at a glance while cooking.

Versions 3, 4, and 5 (the final design)

Key Iterations

Too much bold made it hard to read the recipe.
Users don't need to add notes before they are finished.
I used cooking icons to simplify things; they received mixed feedback.
Icons changed to emojis and eventually were removed. There wasn't enough evidence to keep them, unfortunately.
Vertical spacing would help the scannability of the page.

Reflections on testing

It was difficult to determine if audio or gesture technology was good to adopt since few users we tested have experience or interest in it.

Testing at hi-fidelity too soon meant that critical details were overlooked and yielded little feedback.

"What people say, what people do, and what people say they do are entirely different things." We shouldn't gather information just by asking what users might like or prefer. Our contextual research helped us understand the difference.

Users don't always tell us the whole story.

DELIVER

The Solution, Conclusions, and The Prototype

The Solution - Text Recipe Breakdown

There is a printable PDF version of the recipe since users also want to print, share the recipe, or view it on a separate device.

There is a sticky pop-out ingredients list. We know from our research that people often need to see the ingredients again even after they start cooking.

Essential things such as time, temperature, and amount were bolded to find important information when glancing at the recipe quickly.

There are breaks in the page where it would be natural to wash your hands before scrolling to the next task.

Users like pro tips. There are a few extra tips added to help ensure that everything goes to plan.

Users like photos but not every step required one. Several users said essential images were enough.

"Mark as cooked" is a fun way for the users to check off recipes and rate their cooking. It's also helpful for future meal planning.

The original FLAVR and the new FLAVR

Old and the new and improved FLAVR recipe display page.

Conclusions: Did we make cooking faster?

Based on the user feedback from testing the high-fidelity iteration, we believe that we made it easier for those who aren't experts in the kitchen.

The solution needs to be tested in an actual cooking environment to realize the results thoroughly.

What did FLAVR think?

They were impressed by what we achieved in a short amount of time and our attention to detail.
The research we did on all the different ideas was valuable and made sense in our design decisions.
They liked the video feature we developed and the "rate your cooking feature."

Next steps, more testing

Mobile Viewport! A large percentage use mobile instead.
Test the new recipe methods in the kitchen with actual users.
Test the video feature's technology with a fully functioning prototype.
Continue to iterate our designs and include finalized content.
Do more research on audio and gesture technology.
I am super curious to test a smart display!

Personal Development and Reflection

I learned how to be a better interviewer and ask more open questions to get a better response from the user.
I was very wrapped up in this project, and I found myself asking everyone about their cooking experiences throughout; I enjoyed it.
It's easy for me to get caught up in the research and find it difficult to condense my findings. Working with a team helped me consolidate.
I made many decisions based on research; however, not all of them worked so well in testing. Just because someone else does it that way doesn't mean it will work for your users.

The Prototype

CLICK HERE TO VIEW THE PROTOTYPE!

Watch a video run-through.

Click around the prototype.

Thank you for reading!

chadcheverier@gmail.com