Project Overview
The Brief
In this group project, I worked with 3 classmates on the General Assembly UX course. We received a fantastic opportunity to work with FLAVR.
FLAVR is a small start up company, founded in 2018. This company brings the experience of recipe boxes such as Hellofresh and Gousto, to online groceries shopping. The backend technology of FLAVR enables users to choose recipes, while organising a corresponding shopping list.
According to reports from Consultancy.UK, ‘home-cooked meals account for 80% of meals during the UK lockdown’. Our clients saw a great opportunity to create a first-class cooking experience through a destop website.
Project objectives set by FLAVR:
- The post-ordering experience.
- Intuitive end-to-end cooking.
- Engagement with the Explore page.
My Role
Our team worked collaboratively on UX research, design and improving the accessibility of the UI design. I was the lead on developing the recipe video feature, as well as facilitating the warm up activities with stakeholders.
Meeting Client
During the first meeting, we met co-founder Alex and the head of content, Candice. I enjoyed their relaxed demeanour and they seemed to be open to our creative ideas and to constructive criticism.
After the initial meeting with the client, we established that the company is still at its early stage of finding their USP in the market. They want to experiment with exploring different business opportunities. We understood that our clients not only expect to improve the user experience of the current website but also to reimagine what the best digital cooking experience can be.
From the site map and user experience map below, you can identify the pages we are redesigning and the highlighted areas of the general cooking experience.
01 Research Phase
Finding the pain point of people’s cooking experience.
To find out what is people’s pain point in cooking. We began with our quantitive research by sending out surveys online. In addition to this, we conducted 12 interviews and 2 contextual inquiries.
An example of a contextual enquiry is where one classmate hosted a bakery workshop over zoom. This was a great opportunity to observe the classmates behaviour when following a brand new recipe.
The contextual enquiry research method has been incredibly insightful, in comparison to the conversational interview, as we soon realised many users misunderstood their own behaviour in their kitchen. Contextual enquiry gave us an opportunity to record pain points and then insight directly.
Key takeaways from our survey from 27 responses:
- 70% of people frequently saved recipes.
- 70% of people chose recipes depending on the timescale.
- 55% of people chose recipes depending on the images.
- 56% of people used a mobile phone to follow a recipe.
- 77% of people preferred a simplified recipe.
Key takeaways from the interviews are that participants:
- Liked recipe videos, but were often too fast to follow.
- Kept pausing, playing and rewinding while they follow a recipe video.
- Liked to listen to music while they were cooking.
- Preferred simple and quick recipes.
- Found many recipes were text heavy, making them hard to read and digest, especially for beginners.
- Did not like excessive scrolling.
Key takeaways from the contextual inquiry:
- Already owning the ingredients before cooking helped.
- Professional tips were helpful.
- Visual demonstrations are essential for technical steps.
- Everyone has a different speed while cooking.
- Kept having to touch the device with dirty hands.
02 Define Phase
Which pain point should be prioritised?
Apart from the key takeaways above, there are further insights we gathered from the research phase. We used an Affinity Map to put all insights into groups.
We ended up with 8 different categories of pain points. However, due to the limitation of resources and time, we were not able to tackle all the pain points in this project. So which ones should be prioritised?
As a team we decided to refer back to the brief, reminding us of our focus area. This helped us to remove the pain points which we felt are out of scope.
Key Pain Points:
- Having to scroll while cooking.
- Overly complicated recipes.
- Struggling to follow a fast video.
- Missing one essential ingredient.
Persona
The 12 interviewees we encountered were not all likely to be potential FLAVR users. As a team, we discussed what kind of conditions would make an individual likely to use the FLAVR service. We asked questions such as what is their age range, marital status, lifestyle, and cooking level?
Eventually, we came out with 32 year old Robyn as our persona, who represents FLAVR primary customer and needs help on key pain points we concluded previously. The persona humanised the user which help us to think more creatively in the design phase.
We condensed our focus pain points into a problem statement for Robyn. These statements were used as a guideline for the design studio workshop later on.
• Robyn needs an effortless way to cook new recipes, because she is often busy and doesn’t have time to learn new longwinded methods.
• Robyn needs to be able to cook a recipe without having to keep touching her device during the process.
• Robyn needs a way to use her time effectively during the cooking process.
03 Development Phase
Facilitating Design Studio workshop with stakeholders.
We invited Alex and Candice to a remote Design Studio workshop, where we rapidly brain stormed design solutions, while focusing on our target problems. This exercise was very helpful to see how other people in the company viewed these issues. This task also helped the team develop a valuable relationship with our clients. During the workshop, Alex brought up some bold ideas which inspired me to be more creative with solutions further down the design development.
In this workshop, I was the facilitator of the warm up session, ensuring the clients were comfortable and understood what they would be doing.
As a result, we came up with many solutions from some basic ideas, such as reducing recipe steps, adding a progress bar, to something more high tech like screen gesture control, Siri technology and voice control.
04 Iterative Design Process
Following users feedback to shape our design.
Following the iterative design process, we made changes based on the users feedback. In total we did 5 iterations, 20 usability tests and received a lots of feedback. To work effectively as a group, we agreed one person would take on one feature each. I was in charge of the recipe video feature. Below I will walk you through some of the details of the recipe video iteration.
Recipe Video Iteration
From our research we could see the video method was the one of the most popular choices, especially when it came to following a complex recipe.
The major pain point of recipe videos were:
- Videos are too fast to follow.
- Individuals did not want to continually pause, play and rewind.
- Individuals want to listen to music while cooking.
- Videos did not have text alongside the video.
To tackle these problems, my solution was that instead of one long video, I would break it down to short looping videos for each step. The user can then have more control in navigating each step. This allows the user to cook at their own pace. This would also include short written instructions alongside the video, so that the user can listen to their playlist without missing any spoken information.
What was users feedback?
Problem: The majority of users found this useful and intuitive. However, individuals criticised that it required too many clicks to go through the recipes.
“Do I have to click every time to go to the next step?”
Solution: To solve this issue, I brought back some handsfree ideas from the Design Studio, such as voice control and gesture control. The team members supported me with articles that helped me understand such technologies. I also implemented a new idea of auto play, where each step is played during an estimated time and will automatically move onto the next step when this time ends.
I proposed to the team to incorporate these features in a prototype to test with users.
The results were:
- Voice control and auto play were equally popular, depending on the users preferences and needs
- Gesture control was the feature that users were less likely to try or use. Due to camera privacy issues and individuals believing that this technology is not refined enough as no one has had positive experiences with using it yet
These insights were valuable when shared with the clients, which also made our design decisions even more convincing.
Problem: When we started incorporating more features into this prototype, we began receiving feedback that the users were feeling confused.
“ Where is the voice control icon?”
“How does auto play work?”
I released most individuals had a short memory span in regards to reading right before they start cooking, as they often forget the information straight away.
The challenge which became apparent to me, was how can I explain each feature in the best way as possible, without forcing the user go through the rigid on boarding process?
Solution: To conquer this challenge, I spent more time with users to understand how and why they use particular features. This helped me decide on a better design for each feature. For example, users were confused about wether the ‘auto play’ feature was on or not. To resolve this I added a countdown timer on the side to indicate that the feature had been turned on. I researched into other platforms to analyse how they design the on boarding process. Consistent feedback from the team was also helpful in my forward progression.
Eventually, I changed the on boarding from pop up windows to a learn on the way strategy, utilising the hover stage to provide a signifier to guide the user to use certain features.
UI Accessibility Issue
When we started to move up to the hi-fidelity prototype, meaning including colours and design, we found there is major issue of accessibility of UI throughout the site. Based on their style guide, we made some minimal changes to improve the accessibility to AAA standard.
05 Deliver Phase
We delivered a hi-fidelity prototype with features below:
Improved the engagement on the explore page:
- Filter side bar providing a custom search.
- Favorite page to save and categorising recipes.
Created an intuitive end-to-end cooking experience:
- Recipe summary with clearer content hierarchy.
- Added professional and food waste tips.
- Increasing spacing, making it easier to read.
- Added short looping recipe videos for each, with additional hands-free settings.
- Added “I made it” feature, allowing users to leave reviews.
- Added ‘Notes’ feature, allowing users to add notes after cooking.
Improved the post-ordering experience:
- Added notifications to remind users to cook recipes soon.
What’s the feedback?
“The way you work is really inspiring, and we have learnt many things by working with you. The insights you have found through your research are very interesting and eye-opening. For instance, you mentioned that the gesture control feature didn’t work for reasons which I would not have even considered. The recipe video feature seemed like a great solution, it was very intuitive.”
What’s next?
As shown in our survey, 56% users are using mobile phones to follow a recipe. A developed viewing port for a phone would be essential. In addition, we suggest arranging a contextual enquiry to test recipe video features for further development.
What I learned from this project?
I learnt that to achieve great results, a team has to have trust and communication to allow for individuals to contribute their strengths into the project.
This project was the first time I met with clients as a UX designer. This enforced how important it is to frequently revisit the brief, to clarify the clients needs, as well as making it clear what you can and cannot do for them.
Hi-Fidelity Prototype
Get in touch!
👉Email: hongxiliwork@gmail.com
👉LinkedIn: https://www.linkedin.com/in/hongxi-li/
👉My Website: https://www.hongxili-design.com
