Improving users’ in-kitchen experience
--
A design sprint looking at grocery site Flavr’s recipe usability
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.
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:
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.
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:
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.
- An initial concern from users during testing was that they wanted to add their own lists of recipe collections.
- 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:
- 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:
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.
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.
