How Can We Improve the Usability of an Online Grocery Store?

Challenges
Users experienced search results to have low credibility by offering a wide range of irrelevant products. Additionally, the interface led to mistakes when adding products to the shopping cart due to the confusing placement of the primary buttons, causing users to add unintended items.
Solution
Increased product spacing, added hover effects, and an animated cart icon for clarity and instant feedback. Improved filtering, intuitive sorting, and a new replace button in the cart reduce errors. Relevant recommendations, expanded navigation categories, and clear headings enhance user experience.

Research

Interviews

Four semi-structured interviews were conducted, transcribed, and coded, generating four main themes. A questionnaire was created to supplement the interviews.
Eco-awareness
'I like when there are plenty of vegetarian options, such as good vegetables, and the store doesn't only focus on meat.'
Structure
'I consider the basic staples needed at home and ensure they are stocked. Then, I plan for a few large meals and buy everything required.'
Lifestyle
'I see myself as an active person. I enjoy going out and doing things, preferably with friends.'
Economy
'Bulk cooking is cheaper and reduces the need to cook often, making it more likely to eat homemade meals instead of eating out.'
Created a persona based on the interview data to gain insights into user pain points, goals, needs, and motivations.

Persona

Daniel Thorsson, 25 years old
IT student at Chalmers
Location: Johanneberg, Gothenburg
Daniel values close relationships and enjoys weekends with family and gym meetups with friends. In the evenings, he relaxes with thrilling series alongside his partner.

Though cooking daily feels like a chore, Daniel finds joy in creating new dishes, prioritizing tasty, affordable, and varied meals. He and his partner usually shop at local supermarkets but sometimes order online for convenience. The pandemic increased his online shopping, despite disliking high delivery costs.
Frustrations
Expensive delivery cost when shopping online.
Expectations that are not met.
Poor search functions when shopping online.
Motivations
To live healthy and feel good.
To spend his life with those he loves most.
To be inspired and discover new dishes.
User Needs
A wide variety of products.
Eating healthy.
Value for money.
User Goal
Daniel's goal regarding food and cooking is to eat as deliciously as possible at a good price while valuing efficiency and convenience in food shopping and preparation.

Usability Testing

Daniel's needs and goals were used to design targeted tasks for the usability test. The test aimed to identify user problems, uncover new website opportunities, and gain user insights. It was recorded via audio, video, and screen captures using the think-aloud method. Users performed the tasks one by one. Post-test, transcripts documented notable observations and usability issues. The analysis used a qualitative rainbow analysis and quantitative metrics like task time, success rate, and SEQ score. Customer journey maps detailed where problems and pain points arose in each scenario.

Tasks

Designed eight tasks based on the user’s needs and goals, aligned with willys.se’s existing functionality. Each task included a scenario and a specific requirement to effectively address the usability goals.
Goal: To find a varied selection of products.
Scenario 1
You need to prepare a dish containing locally grown potatoes and locally produced beef. Add these items to the shopping cart.
Requirement
The user should smoothly navigate from the homepage and identify locally produced items, and add them to the cart within 1 minute.
Goal: To save time
Scenario 5
For breakfast you eat toasted bread with butter, cheese, and bell peppers, but you have run out of toppings at home. Use Willys.se to restock.
Requirement
The user should add 3 items to the cart within 1.5 minutes from the Willys homepage and rate the task 6 or 7 on the SEQ question.
Goal: To buy affordable products
Scenario 7
You are out of meat at home and feel particularly hungry for a meat dish. You want to find the cheapest meat available on the site.
Requirement
The user should, without making any errors, locate meat products and then sort them from cheapest to most expensive.
A rainbow analysis was conducted to indicate the severity of each problem detected during testing. Metrics such as task time, success rate, and SEQ score helped assess efficiency, effectiveness, and user satisfaction.

Analysis

Crucial problem
Pressing the quick add button above the correct product and got the wrong product in the cart.
Crucial problem
The user has trouble using the filtering function in a meaningful way, struggling to find the appropriate filters.
Serious problem
User was not sure if the product was added to the cart when adding it from the product view.
Serious problem
Broad search results create confusion and make it difficult for the user to find the right item.
Serious problem
The user cannot directly replace items in the checkout and receives poor recommendations for similar items.
Future enhancements
Uncertainty about what the terms 'Allow replacement items for all products' and 'Manage replacement items' mean.
Future enhancements
The user is uncertain if they see all the offers after clicking on a promotional banner.

Customer Journeys

Created customer journey maps for all scenarios to clearly illustrate where various problems and pain points emerged during each scenario.

Prototyping

Five high-fidelity design proposals were created to address the identified usability issues. Each proposal was developed using the 'How might we' method and low-fidelity sketching.
How Might We

Clarify Which Button Belongs to Each Product?

How Might We

Ensure Users Know When an Item Is Added?

How Might We

Increase Confidence in the Search Results?

How Might We

Make Filtering More Useful?

How Might We

Facilitate the Replacement of Items in the Cart?

Se all work

Think I’d fit your project?

Get in touch

→

Linkedin
Instagram
© Gustav Karlsson 2024