Improving users’ in-kitchen experience

James Green
8 min readMar 14, 2021

A design sprint looking at grocery site Flavr’s recipe usability

Screenshot from ‘My Orders’ Page, on a prototype for Flavr’s website
Flavr Prototype Screenshot

Context

A 3-week sprint with a group of 4, for our final project as part of GA’s immersive course, designing for a live client.

The Challenge

The client for this project was Flavr, a start-up that aims to take the stress out of cooking while saving money when ordering groceries online.

Our focus was fairly specific:

  • Everything that happens after the user has ordered their groceries from Flavr — such as where their recipes are stored.
  • Making an intuitive end-to-end cooking experience.
  • Increasing engagement on the Explore page, where users find their recipes.
  • The long term goal of these activities was to increase metrics including number of items added to basket, and increases in signups and conversions.

Tools used: Figma, Miro, Zoom, Pen, Paper

My Role In The Group

I was working with a team of 4 — I provided strong copy-writing skills, design-driven thought processes and an ability to mediate when opinions were divided. In the development stage I took ownership of prototyping the ‘My Orders’ and ‘Favourites’ pages.

A PHD Researcher offered strong analytical skills, a super-organised photographer facilitated the group and had a keen eye, and a conceptual artist provided the creative polish on the final UI.

After the project, the team told me that they highly valued my writing skills, calm and empathic manner and balance of energy I brought to the table — while helping keep the team on track and stay focused on the important tasks.

Competitor Analysis

We looked at how direct and indirect competitors to Flavr were currently serving users, with a particular look at how they displayed their recipes and helped during the cooking process.

A group of logos from competitors such as Hello Fresh and Mindful Chef
Direct & Indirect competitors to Flavr

Key findings were:

  • Most of the competitors lack enough indication for Dairy/Gluten-free diets.
  • ‘Planty’ And ‘Allplants’ provide excellent visual summary of the recipes.
  • ‘Blue Apron’ has an exciting feature where you can ‘play’ the recipe and cook along.
  • Only one of the competitors we looked at had a video recipe function.

Survey Findings

To begin tackling our brief, we began with a survey of 27 people to identify common behaviours and pain points when grocery shopping and cooking.

Key takeaways were that:

  • 70% of respondents like to save recipes they have enjoyed.
  • Main factors in recipe choice were the time it takes (70%) and it’s accompanying images / video (56%)
  • 78% of respondents who buy groceries online do so because it’s convenient.

User Interviews

To further our understanding of users’ needs we conducted 12 interviews and 1 contextual inquiry with participants aged 24–37.

These were mostly young professionals living with at least one other person.

We affinity mapped the results to look for patterns. Key trends included:

  • Many users watched YouTube videos to cook along with, but also sometimes found them hard to follow and have to pause & backtrack.
  • Across the board users disliked too much text on the recipe page — information overload caused problems while cooking.
  • A common pain point was being missing one key ingredient — a meal planning issue.
  • A major pain point was having to scroll down a page while mid-cooking — messy hands being a factor here.
  • Overall having dirty hands meant that users wanted to touch their device as few times as possible.

Quotes:

“I use recipes on my phone and it’s frustrating! Have to go wash hands, come back, dry them, scroll again to where I was… time wasting and annoying”

“It’s a pain to forget one item, or not be able to find an ingredient”

“If there’s quite a few steps which are frustrating on a phone — so if possible I use my laptop”

Persona

We put this research together into a persona have a clear idea of who we were designing for. Meet Robyn:

A persona for Robyn, a typical user of Flavr
Robyn, a typical Flavr user

With Robyn in mind we formed typical pain points into problem statements and thought about how we might solve them.

Problem Statements & HMWs

Robyn needs…

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

…a way to cook a recipe without having to keep touching her device during the process.

…a way to use her time effectively during the cooking process.

How might we…

…make Robyn’s cooking process faster and more efficient?

…reduce the number of times Robyn needs to scroll down or touch her device?

…help Robyn remember her favourite recipes?

Design Studio

We took these ‘How Might We’ statements into a design studio workshop with the client — involve them in the process and generate feature ideas.

Screenshot from Design Studio session with Flavr
Screenshot from Design Studio session with Flavr

We came up with 6 ideas each for the ‘how might we make the cooking process faster and more efficient’ statement, dot voted on our favourite features and converged them together.

There were lots of ideas to contend with! Including using gesture control, pro tips for specific cooking techniques, a progress bar, and using Siri’s voice control functions to name a few.

Feature prioritisation

It was then time to face reality and measure the feature’s impact vs their effort cost to the business. We grouped them into:

Essential:

  • Ingredients
  • Equipment
  • Text Instructions
  • Pro Tips
  • Progress bar
  • Timer
  • Food waste tips

Nice to have:

  • Video / audio options
  • Options for level of detail in instructions
  • Slide show moving through each step
  • Gifs / short clips of cooking methods
  • Gamification
  • Gesture control

Site Map + User Flow

With these ideas in mind we visualised the journey our user would take and where these features would sit in the site map:

Flavr’s site map with Explore Page, Order History, Cooking Instruction and Favourite Page highlighted
Flavr site map with pages we worked on highlighted
Diagram of a typical user flow of a Flavr customer
User flow for a Flavr customer

Iterations

We produced paper, then a lo-fi digital prototype to begin testing these features with users — taking the wire frames through 5 versions, 4 rounds of testing and 20 total tests.

We made many iterations — one area I particularly focused on was the new Favourites section.

This feature tackled the areas of the brief concerned with post-order experience and engagement with the explore page.

Screenshot of version 1 of a Favourites feature
Version 1 of the Favourites feature
  • An initial concern from users during testing was that they wanted to add their own lists of recipe collections.
A screenshot of version 2 of the Favourites feature
Version 2 of the Favourites feature
  • I experimented with a ‘Hey! You haven’t had this in a while!’ pop-up, however users found this intrusive.
  • Users wanted to be able to make and complete a collection in one action, so I added this functionality when creating a new list:
A screenshot of ‘add to collection’ page
‘Add to collection’ pop up
  • However, they also expressed that they would not want this to feel ‘final’, and be able to add to collections easily on any part of the site. The solution was this overlay:
Overlay to manage collections while exploring the site

In order to increase engagement with the Explore page, as per the brief, I added a ‘Roll The Dice’ feature, to help users choose meals without extensive searching, or if they felt overwhelmed by choice.

Iterations on ‘Roll The Dice’ feature
Iterations on ‘Roll The Dice’ feature

In testing, users were a little confused as to whether filters such as dietary restrictions applied, so I moved the feature to the bottom of the page.

However, overall users were excited by and liked the feature. I’d like to run more testing in future and collect data on whether the feature leads to more recipes added to basket.

Our Solution

Prototype

Our design tackled the brief by providing an intuitive, end to end cooking experience that users in testing found engaging. Most users like the ability to save favourites and collections, and choose between text or video based recipes based on their needs.

The client said:

“Thanks guys — we had loads of fun but also we learn a ton from you all. I really rated the frameworks and simple but rather effective use of framing the ideation with ‘how might we’. Great to get to see the end result.”

Key Learnings

  • How to balance business needs with user needs — it was useful to solidify where things were at in the kickoff meeting, check in at the Design Studio (while ensuring stakeholder buy-in) and discuss the feasibility of implementing our designs after our final client presentation.
  • Working with people of different skill sets — leaving room for creativity and out-of-the-box thinking while staying on track and hitting the brief’s objectives.
  • Being prepared to let fun ideas go, if they’re not clicking with users or out of scope. Things like swiping your hand to control a recipe, or using voice commands to flip through pages seemed like novel solutions to user problems, but in testing did not quite click — perhaps due to unfamiliarity.

Suggestions for the future

  • Accessibility — in our prototype, we have made some suggested changes to make the text more accessible. Using existing brand colours, so only the combinations in the style guide need to change.
  • Phone view ports — in interviews, we found that a large proportion of users look at recipes on their phone while cooking, so this desktop solution needs to be fully responsive.
  • Further contextual inquiry — it would be fascinating to watch people cook while using Flavr, to identify what works and any pain points.
  • In the long term, we wish to view the metrics on items added to basket, signups and conversions to monitor the success of any implemented features.

--

--

James Green

I am a Content Designer at Essex County Council, with a background in the music industry.