CLIENT PROJECT
TEAM OF 5
Mouse & Grape
Improving the user experience of buying a curated cheese and wine hamper from the Mouse & Grape desktop site by conducting user research, analysing results and prototyping new features
👁️ Overview
Mouse & Grape offers bespoke hampers to purchase directly from the website and is run by a cheese and wine pairing expert. The goal of this project was to create a better user experience, to ultimately improve hamper sales.
🔍 Objectives
-
Identify pain points and usability issues in the browsing and buying processes
-
Learn from what's working well, examining positive aspects to reinforce, providing continued value to users
-
Improve the sales experience, by addressing the above issues to create a more user-friendly and intuitive sales process, improving sales and customer satisfaction
📝 Notes
Our client had their own specific concerns, including:
-
Ensuring the core brand values are being communicated effectively, and the site is reflecting the amount of skill going into the pairings
-
If the ability to add extras to the hamper is clear, as well as the checkout process
🚀 Research
We conducted usability testing with a diverse group of participants, who were selected to represent different demographics within the audience specs provided by the client. Using a task-based approach and structuring the testing around these tasks, we aimed to simulate real-world user scenarios to evaluate the user journey, followed by post-task questions.
The interviews were conducted online and, when permitted, were recorded along with the participant's screen. Their interactions were observed and participants were encouraged to think aloud and talk us through their thought processes.
USABILITY TESTING
TASK-BASED APPROACH
OBSERVATION
NOTE TAKING
DATA ANALYSIS
(Names changed)
Participant Profiles:
Mel, 30s
Digital Marketing
Consultant
Andreas, 40s
CEO
Vasil, 40s
Security Manger
Harvey, 30s
Network Engineer
Sarah, 50s
HR Officer
Kate, 40s
Software Developer
Task 1: You need to buy a thoughtful & memorable gift for a friend who loves wine and cheese. Please visit the Mouse & Grape website and choose a hamper that you think would make a great gift.
Task 2: Purchase the 'Luxury Eliza Hamper' for a client with a personalised gift note.
Task 3: Explore the Mouse & Grape website to gather information about the company and their products.
🏷️ Affinity Mapping
As part of research analysis we highlighted key points and quotes from each interview and collaboratively sorted them into groups so we could visualise the patterns.
This helped us establish clear aspects that could be improved on or altered to enhance the user experience.
(Image blurred for confidentiality)
🔑 Key Findings
We analysed and collated our research and data, revealing findings such as these...
After, we condensed our results into four key findings. Click through them below!
Lack of distinction between each hamper on the browsing hampers page
"It would be nice to arrange products by price"
"I would like to see more about each product that's inside before I click"
-
Participants found it difficult to distinguish between each hamper
-
There was a general desire for categorisation
-
The testing revealed that participants required more guidance through the buying process
🧠 Sketching and Wireframing
With the use of 'How might we?' phrases for each key finding, we collaborated on brainstorming and sketching potential solutions. Click to view some of my early wireframes and sketches.
After ideation we made some design decisions and from the wireframes I created a working prototype of the revised process of browsing and purchasing a hamper.
✅ Prototyping Proposed Solutions
How might we make it easier for users to choose between hampers on the hampers browsing page?
PREVIOUS DESIGN
REVISED DESIGN
Filter menus such as seasonal filters for themed hampers (e.g., Summer and Christmas) and specific cheeses and wines.
HOVER
TO READ!
A quick view pop-up providing short descriptions, imagery, and key facts to help users gain a better understanding of the hamper contents, differences and purpose
Alternative solutions:
-
A brief description of each hamper under the name
-
New images so the hampers are more differentiated, perhaps showing the cheeses unwrapped
Sort-by menu for ordering hampers by price or popularity to make the selection process more efficient
Condensing the writing at the top, allowing users to quickly grasp essential details
ANIMATED PROTOTYPE
How might we improve the experience of the individual hamper pages for the user?
PREVIOUS DESIGN
REVISED DESIGN
Bringing more attention to the mailing list offer by a drop down bar
HOVER
TO READ!
Visible imagery of the products within the hamper as a scroll list, so users can better understand the contents and make informed decisions
Live Google reviews - the company has great Google reviews, so showing these from real customers will give new users re-assurance
HOVER
TO READ!
Sort-by menu for ordering hampers by price or popularity to make the selection process more efficient
Quick links to other sections of the page to guide users efficiently through the content. This provides essential information in the top text whilst not overwhelming the user, and these links can lead users to relevant sections further down the page if they wish to read more
Alternative solutions:
-
A drop down list of the products at the top of the page
-
Use of bullet points to help with structure and being concise
ANIMATED PROTOTYPE
How might we draw the user's attention to upgrades, add-ons and the gift note?
PREVIOUS DESIGN
In the previous design, users click add to basket and nothing visual happens until they click the trolley in the corner
REVISED DESIGN
Pop-up feature after adding to basket to bring user attention to the extra add-ons, bringing clarity of what exactly they are
HOVER
TO READ!
Incorporating visuals such as images or illustrations of upgrades to provide users with a clearer understanding of the available options
A section for gift notes in the confirmation pop-up, so users will be more likely to notice and utilize it
Second pop-up with confirmation indicating that the item has been successfully added, with option to view basket or proceed directly to the checkout for more streamlined process
HOVER
TO READ!
ANIMATED PROTOTYPE
How might we reflect more of the brand in the process of buying a hamper?
PREVIOUS DESIGN
REVISED DESIGN
Utilize links in the text including a link to the 'About' page for users to easily access the brand's story and background
HOVER
TO READ!
Include the pairing booklet in the top text to establish the brand and generate early engagement
Incorporate personal touches in the text and headings to create a stronger connection between users and the brand and personalised nature of the products to add a human element, building on the fact participants were considerably more likely to buy from a small personal business