ASDA - improving the online shopping experience for millions of users
Overview
The Challenge
Outcome
Role & Timeline
One of the projects I worked on at Asda was redesigning the store locator website. Collaborating with a content designer, I conducted research to identify user pain points, developed potential solutions, tested them with users, and incorporated the insights into responsive web and mobile designs.
We addressed issues around poor accessibility and usability, outdated content, misalignment with the design system, and dated UI.
The result was a brand consistent, accessible, and significantly improved user experience across all viewports. The new site is scheduled to launch in late 2024.
Product Designer - September to December 2023
Process
Original Experience
View the original experience in the video below or on the live site
Goals & Approach
The goal of this project was to update and improve the store locator user experience. The site had not been updated in several years and was inconsistent with our design system and accessibility requirements.
We knew this was an opportunity to not just update the site, but improve the experience for all customers.
We followed a user-centred approach; starting with research, moving on to exploration, testing several solutions, before refining and handing off the final designs to development partners.
Research
To identify customer issues, we set up unmoderated usability tests in UserZoom. Tests included completing tasks while doing a think-aloud, followed by difficulty ratings and general feedback. Some of these tasks were:
1. Imagine you are going to Asda near you for the first time. You want to check whether they have wheelchairs or mobility scooters for customers to use. How would you do this?
2. Imagine you have a regular prescription. You would like to pick this up when doing your food shopping. Where is your nearest Asda with a pharmacy? When is it open?
Small section of usability findings Figjam
Findings
Store Detail Page
We identified several usability issues that are likely contributing to the poor user experience. These findings - described below - were the basis of our redesign.
Content layout and language is not optimised for users. The site uses non-specific language, such as “main services” and “services” to mean different things. Services that are not available at the store are displayed next to available services.
Goals & Approach
Information is getting lost in the "noise." Users are presented with an overwhelming amount of information, such as hours for all services, making it difficult to find the information they need.
Search & Results Pages
Search results UI makes it difficult for users to skim and quickly find relevant info. Icons are not meaningful to users, skimming is difficult because each store starts with "ASDA" and the primary action - clicking to learn more information - lacks a CTA.
Search & Results Pages
Uncategorized filters are overwhelming and not useful for users, making it difficult to search for stores with specific facilities or services.
Accessibility
Our accessibility evaluation identified several issues to address:
-
Multiple screen reader issues (non-descriptive links, links within links, incorrect DOM order)
-
Instances of insufficient colour contrast
-
Incomplete keyboard access
Design
We started by wireframing potential layouts before moving onto high-fidelity explorations with a mobile-first approach.
Explorations focused on our biggest challenge - showing services and facilities in a way that made sense to users, allowed for consistency across store types, and aligned with the business need to clearly display vendors.
Exploration 1 - We initially separated the unavailable services from main services. We kept the facilities section but added grouping and descriptive headings.
This version was preferred by the business but tested poorly with users, who were still confused and distracted by the prominence of unavailable services.
Exploration 2 - Instead of relying on the existing services and facilities labels, we ran card sort tests to understand how our users grouped and labeled them.
Based on this, we created groupings and headings that better aligned with users' mental models. In final iterations, we got stakeholder buy-in to replace services available nearby with a filter search CTA.
