USER TESTING CASE STUDY
Well Known High Street Fashion Retailer with a £1.5 Billion Turnover eCommerce Website
User testing a radical new navigation design and the end-to-end experience on the current live website.
To test a new and fundamentally different navigational buying experience using a high-fidelity clickable prototype.
Identify where friction, confusion or doubt arises during the end-to-end buying experience on the live website.
We reflected the spilt of device visits to the client's website and tested on both laptops and mobiles.
These were remote, moderated user tests over Zoom. Each session lasted about 1 hour.
Six adults and six teenage customers who shopped for themselves. Six parents who shopped for their teenage children.
The Research Plan
Participants were encouraged to talk about their experience shopping for certain types of clothing, their current go-to websites, essential factors, and any existing pain points.
Participants made a list of clothing they wanted to buy in the coming weeks.
Clickable Figma Prototype
We tested the new navigation by asking participants to find a pair of bottoms, such as shorts, leggings or joggers, they could use for exercising, warming up or training. We asked parents to find a pair of bottoms suitable for one of their teenage children.
We asked participants to browse for a general outfit they could wear to an upcoming event such as a party, school trip, non-uniform day or summer BBQ.
The Live Client Website
We asked participants to use the live website to find a pair of bottoms, such as shorts, leggings, tracksuit bottoms or joggers, suitable for exercising, warming up or training.
We asked participants to browse for a general outfit they could wear to a party, school trip, non-uniform day or summer BBQ.
Participants were shown a photo and a description of footwear and asked to imagine they had seen this product in-store and wanted to buy it in their size on the website.
Participants completed the purchase so we could test for any friction in the checkout process, which could cause cart abandonment and loss of revenue.
Naturalised Online Behaviour and Main Competitor
We asked participants to find and buy a suitable product from their shopping list just as they would at home, allowing us to watch a natural shopping journey from its beginning. It also allowed us to observe the navigation and refining processes on competitor websites and to compare these with the client website experience.
We asked participants to summarise their experience using the live websites and prototypes, suggest improvements and mention anything else we had not covered.
Based on the research findings, our client decided that making such a dramatic change to the primary navigation was too big a risk at this stage.
We made specific recommendations on how our client could improve their buying experience for high-performance sports clothing and footwear.
We found numerous other UX optimisation opportunities.
The New Navigation
New navigation: The new navigation caused confusion for participants, who were unaware that making specific prior selections significantly narrowed the products shown moving forward. Keep the navigation used on the live site.
New gender selection: Participants were more comfortable with the traditional way clothing gender selections worked. The new navigation worked differently, causing uncertainty and friction. Keep the way clothing gender selections are made on the live site.
Confusing delivery costs: Provide clear and concise information about delivery costs and the refund policy in a prominent location on the website. Ensure that delivery options are clearly differentiated and explained.
Hidden delivery charges on mobile: Make delivery charges visible and easily accessible on mobile devices, preferably on the product pages.
Requiring address details before showing delivery options: Display delivery options and the associated costs on the product page, so customers can compare delivery methods without entering their address details first. This will help customers make informed decisions and prevent frustration.
Product Information: The more specialised and expensive the item, the more participants looked for detail in the product description. However, missing, incomplete or hard-to-find product information regularly frustrated participants, reducing their faith in the website and the likelihood of purchasing.
- Provide more detailed and complete product information for high-spec products to meet the needs of participants who are looking for features and technical specifications.
- Use bullet points to make product information more scannable and easier to understand.
- Ensure that product information is easily accessible on all devices without opening a link or navigating through long paragraphs.
- Improve the search function by offering suggestions or correcting minor errors when a search returns zero results.
- Ensure product names are displayed consistently to avoid confusion and improve search results.
Product Search: Accurately typing the full product name into the search bar proved the quickest and most reliable way for participants to find specific high-spec products. However, many of the names for high-spec products are lengthy and complicated. Minor errors when typing the name (such as an incorrect space between words) can return zero results. No help or suggestions are displayed when a search returns zero results. Searching partial product names returned long lists of products. Several participants undertook lengthy and unsuccessful navigation-led searches for specific high-spec products.
- Simplify the navigation and make it easier for participants to find high-spec products without undertaking lengthy navigation-led searches.
- Use clear and concise product names to make it easier for participants to find what they want.
- Provide a clear and accessible search bar that can be used to find specific high-spec products quickly and efficiently.
Multiple high-quality product images: Provide multiple high-quality images of each product, including various angles and an inside view for sport-focused participants. Also, ensure that the product images are easily zoomable, allowing participants to examine the material and details closely.
Model images and videos: Include images and videos of models wearing the products, as this helps participants visualise how the product will look and fit on them. Additionally, prominently display links to other clothing items worn by models to encourage further purchases. Consider incorporating videos that show how the fabric reacts when the model moves to serve sport-focused participants better.
360-degree product view: Make the 360-degree product view link more prominent on the Product Description Pages (PDPs), as several participants found it helpful but missed the link.
Product information: Ensure that all product information is complete, accurate, and easily accessible, including information about material, size, and features.
Recommended For You
Give higher prominence: The "Recommended For You" content should be moved higher on PDP pages, as participants are unlikely to scroll down far enough to see it.
Improve relevance: The algorithm that drives the "Recommended For You" content should be improved to ensure that the suggestions are similar to the product being viewed in terms of style, size and function. Consider adding a feature that shows suggestions that complement the product featured on the PDP, which would help participants build an outfit.
Offer more suggestions: Consider adding a button or link that expands the "Recommended For You" content to show more suggestions.
Provide an explanation: Tell users how the "Recommended For You" feature works to increase confidence in the suggestions.
Missing Product Reviews: Participants valued product reviews highly and they significantly influenced their purchasing decision. Participants were surprised to find that the client's website had no product reviews. Participants expected to see product reviews on PDPs but also suggested the inclusion of a "review star score" for each product on the PLP. Participants relied heavily on reviews, particularly when unsure about a purchasing decision. The absence of reviews on the website may result in participants leaving the site to search for reviews elsewhere, potentially losing the sale.
- Introduce a product review system on the website, where customers can provide purchase feedback. Ensure the review section is clearly visible and easily accessible on the PDP. It is also recommended to include a "review star score" on the PLP to help customers quickly identify products with high ratings.
Refine and Sort
Participants missed the feature on mobile: Emphasise the "Refine and Sort" link on mobile devices and place it at the top of the page to make it easier for participants to find.
Terminology: Consider using the term "Filter" instead of "Refine" to ensure clarity and understanding across all user groups.
Filter links: Place the text links at the top of the PLPs in a more prominent position so that participants can easily notice them and narrow their results.
Predictability: Allow filters to be combined without removing any previously applied filters.
Add information: Explain why selecting a greyed-out filter option displays zero items.
Additional filters: Consider adding an option to select an item's style or intended purpose in the filter menu. Consider adding additional filters for trainers, such as neutral, structured/support, road, or trail shoes.
Recommended filter: Provide clearer information about what "Sort by: Recommended" means, and consider changing the default sort-by option to "Best Selling".
Price (Low to High) filter: Ensure that "Price (Low to High)" remains a visible and easily accessible sort-by option, as it was the most commonly used option during testing.
Product Listing Page (PLP) General
Summary paragraph: Remove the summary paragraph at the top of many PLPs since it takes up valuable screen space, and most participants didn't notice it.
Essential criteria: Ensure that essential criteria such as material and style are prominently displayed on PLPs.
Important information: Display relevant information, such as the length of shorts, on PLPs to help participants find the right products and avoid frustration.
Available sizes: Make available sizes more noticeable on PLPs to prevent users from clicking on unavailable products and causing frustration.
Colour variants: Show colour variants as options under one product rather than separate PLP listings to improve user experience and prevent confusion.
Grid display options: Make the grid display options more prominent.
Magnifying glass icon: Improve the magnifying glass icon and the quality of images shown on PLPs to encourage users to engage with the feature.
"Brilliant Value" term: Revise using the "Brilliant Value" term to ensure that it accurately reflects the item's value and does not confuse or mislead users.
Delivery options page: Show delivery costs on the delivery options page of the checkout process on mobile to prevent user frustration and ensure transparency in the purchasing process.
Address details: Allow users to view home delivery options before requiring them to fill in their address details, making it easier to compare delivery methods and reducing confusion and annoyance.
Order summary photos: Include photos in the order summary throughout the checkout process.
Scan credit or debit card: Add the ability to scan credit or debit cards as a payment option, as this feature is becoming increasingly common in mobile-friendly e-commerce websites. This will speed up payment and reduce friction during the checkout process.
Other Selected Issues
Text and spacing: Use larger text and better spacing, particularly in the navigation menus, to make the website easier to scan and improve user experience.
"Shop all" link: Ensure that the "Shop all" link is more visible and easier to spot, improving search functionality.
Clickable category headings: Make it clearer that category headings in the dropdown navigation are clickable and can support user search.
"Find similar items here" links: Increase the visibility of the "Find similar items here" links on PDP pages to encourage engagement.
Navigation menu: Avoid pairing words together in the navigation menu, making it easier for users to scan and find the links they want.
"Running Shoes Finder" tool: Introduce a product finder tool, such as the "Running Shoes Finder," to help customers find the right product for them in other categories, improving the user experience and engagement.
ASOS Fit Assistant: Implement a sizing feature, such as ASOS Fit Assistant, that learns user sizes based on their orders to reduce purchase friction.
Clear CTA button: Ensure that the sale pop-up has a clear CTA button, making it more apparent as a link and encouraging engagement rather than accidental closure.
Payment page functionality: Allow the cursor to skip between the DD/YY expiry date field on the payment page automatically, improving the user experience and reducing friction during the purchasing process.
Full session recordings uploaded for you to view immediately after each session.
A findings and recommendations report including selected video examples.
A video call to answer any questions.
Ongoing support and advice where required.