One of the first things we at Endless Gain do when we start work with a client is conduct heuristics and usability reviews of their pages. This helps us identify existing friction points on the site and gives us context before we start user research.
Heuristics and usability reviews are also something many of you have said you want to see more of.
In this blogpost, we’ve put together our views on the product detail pages (PDPs) of leading online women’s fashion retailers in the UK.
Across sectors, PDPs are among the most important pages for an eCommerce business in terms of revenue-generating conversions. However, they are also the pages that see the highest drop-offs—around 75% to 85% across different sectors.
Therefore, it’s highly likely that when you start optimising your site, the PDP will be a key area of focus.
We’ve chosen to analyse the product pages of 5 of the most popular women’s fashion websites in the UK:
The methodology is simple—we chose a dress product page from each website and conducted heuristic analysis and usability walkthrough of each page. Based on the insights derived from these, we’ve compiled a comparative study of the key elements of PDPs that are important in conversions and user experience.
Pages reviewed:
Liquorish A-line lace detail midi dress on ASOS
Crepe Ruffle Wrap Midi Skater Dress on Boohoo
Sosandar Denim Knee Length Shirt Dress on Marks & Spencer
Black Ribbed Ring Front Long Sleeve Midi Dress on New Look
Animal Print Mini Dress on Zara
Disclaimer: All the above companies are constantly optimising their pages, so the above pages could have changed from the time this review was published.
For fashion, product images are of great importance. So let’s start by looking at how the 5 brands have handled product images.
All the brands we reviewed have used models to showcase their dresses. However, Zara, Boohoo, and New Look have also included pictures of the product without a model.
Only ASOS has used video. We’ve found that videos help users visualise the product better, see it from different angles, understand the fit, and make people feel more attracted to the product.
On a scale of 1 to 5, we would rate the images on Boohoo at 2, Marks & Spencer at 3, ASOS and New Look at 4, and Zara at 5.
The higher rating for Zara is because they have covered the product from all angles and included more images (8). Notably, only M&S has used lifestyle imagery—the model in an out-of-studio setting.
Except M&S and Boohoo, all brands have used thumbnails to showcase the number of images in the gallery. M&S has simply laid out all images either one after the other or next to each other. Boohoo has presented two images at a time with left-and-right scrolling revealing more images. Interestingly, Zara’s image thumbnails are not visible—they appear only when you hover over the main image.
Boohoo is the only brand that allows a close-up view on hovering over the image. On both Boohoo and M&S, the photo gallery expands to a full-page view on click, and single zoom is available when clicking on the image.
New Look and Zara images expand to full-page view on click but there is no static image on the full-page view—the images move around according to mouse movements.
ASOS does not have a full-page view; instead, it allows you to zoom in on images using mouse clicks as well as scroll.
Boohoo and Marks and Spencer do not allow scrolling through the image gallery on normal PDP view, but in full-page view, you can do that using mouse or keyboard arrows. Both ASOS and New Look allow you to move back and forth on the PDP, but the ASOS video is not part of the scroll-through.
You can scroll through Zara images on the PDP using mouse scroll only. In full-page view, both New Look and Zara allow movements using mouse but not keyboard arrows.
The Add to Bag CTA stands out on the page and has a clear visual hierarchy on ASOS and New Look because of the bright colour. New Look has a secondary CTA of Find in Store, but it does not clash with the main CTA.
Zara has a single, clear CTA on the page: Add to Bag. The Check In-store Availability option is not a CTA but a text link. These ensure a distraction-free purchase journey for the user.
On Marks & Spencer, the Free Delivery Messaging stands out, and looks like a CTA button even though it is not a call to action. Clicking on the information icon opens a right-side panel that doesn’t contain any new information, and the terms & conditions link under it is not clickable. The main Add to Bag CTA is lower in the visual hierarchy because of its paler green colour.
On Boohoo, there are 3 CTAs, and the visual hierarchy is determined partly by colour and partly by the size of the button. The action area has two CTAs—Add to Cart and Save for Later; the primary CTA is in black and is larger than the Save for Later CTA that is in white. Below this is another CTA to see similar products: Show Similar.
Surprisingly, Boohoo, New Look, and Zara do not use any ratings or reviews on their product pages. Is this the new trend in eCommerce, or are these brands losing out by not showing the basic social proof of crowd endorsement?
ASOS and Marks & Spencer, on the other hand, have done their ratings and reviews elements very well.
We loved how ASOS has done this:
M&S displays average rating and the total number of reviews prominently under the product name. It also uses a right-side panel overlay to display detailed ratings and reviews. The reviews can be sorted by useful parameters: Most Helpful, Most Recent, Highest Rating, and Lowest Rating.
Each review has further ratings on fit, quality, comfort, value for money, style, and material. Interestingly, the reviews also contain the size profile of the reviewer and what size they purchased, which can help people understand the product’s fit better.
Of the 5 brands, all except Zara show sizes in UK size (8, 10, 12, etc.). Zara uses S, M, L, etc.
ASOS and New Look show their size selector in a dropdown. None of the ASOS dress pages we saw had colour choices.
Marks & Spencer and Boohoo show both sizes and colours in boxes, with out-of-stock (OOS) sizes and colours crossed out. New Look also shows colours in boxes, with OOS colours struck through.
Zara shows all its sizes in an open accordion underneath the product price. Once you choose a size, the accordion closes and only the selected size is highlighted.
On ASOS, if you click on Add to Bag without selecting a size, the size selector is highlighted in red and a prompt to select a size appears below. Marks & Spencer, Boohoo, and New Look prompt the user with a ‘please choose size’ message; M&S shows the message above the size boxes, Boohoo shows it under the add to cart button, and New Look shows it under the size dropdown.
Zara gives a warning pop-up with the ‘You Must Select a Size’ message.
ASOS shows OOS notification within the dropdown next to the size. Low stock messaging appears after you select a size. New Look shows both OOS and low stock messaging within the dropdown.
On Marks & Spencer, low stock messaging appears above the size boxes. On Boohoo, when a size is selected, availability messaging appears underneath the size, above the Add to Cart button.
M&S also allows you to add quantity on the PDP, while others allow you to do so on the Basket page. Marks & Spencer does this with a dropdown of numbers (the number of items changes as per availability).
Zara’s OOS and low stock messaging are displayed alongside the size and the message is unique—Similar products and Coming soon.
ASOS, Boohoo, M&S, and Zara have a tool for users to find their size. All these tools are powered by Fit Analytics. Boohoo and Marks & Spencer both use the generic Fit Finder, while ASOS and Zara have customised it to align with their brand. The ASOS tool is called Find Your Fit Assistant and the Zara one, Find Your Size.
This common tool asks initial questions regarding height, weight, tummy shape, and hip shape. After an initial size suggestion, for further refinement you can input your bra size (different country options available), age, and fit preference.
The ASOS and M&S tools also offers size comparison with popular brands.
All these tools recommend two sizes, and highlight the size with the higher probability, in percentage, of being a better fit for you.
On ASOS, there’s a nice touch of privacy and security messaging on the results page: “Don’t worry, no one else will see this!”.
Marks & Spencer also has conventional size charts provided by the brand, which means both new and brand-loyal shoppers have a higher chance of getting their size right on the site. These charts open as an overlay on the page.
On the other hand, Zara’s tool asks for minimal information: age, height, weight, and fit preference. It doesn’t have different measurement metric options (centimetre and inch, stone and kilogram, etc.) either.
Zara too has a size guide in addition to the Find Your Size tool. Its size guide is in a visual Small-Medium-Large format on a right-side panel. You see a model, and when you pick a size from the dropdown, the measurements corresponding to the size appear on the model’s bust, hip, and waist. It only shows values in centimetres, though.
All 4 tools save the size suggestion, and returning users are recognised even if they are not signed in, which is a nice touch of personalisation.
New Look only has conventional size charts, which open up in a left-side panel. It has detailed womenswear measurements, including for different body sizes such as petite, tall, and curvy.
Unlike with the other brands, the M&S size chart and fit rating are below the fold, under the Add to Bag. This could be positioned better—for example, moving the free delivery messaging to below the Add to Bag and moving the size information up.
Except Zara, all other brands show product descriptions below the fold.
Boohoo, New Look, and Zara use very small fonts for the product descriptions.
Marks & Spencer uses the accordion menu to talk about the product, details & care, and delivery/returns/collection information. Boohoo has a tabular accordion. On ASOS, New Look, and Zara, part of the details is visible, and users have to interact with ‘show/view more’ buttons to read more details.
Zara’s product description also contains extensive information about Join Life, the brand’s core value of reduced environmental impact of their products.
None of these companies have tried to optimise what the users can see without clicking on ‘show more’. Users might get a better experience if details such as fabric type, material, and model size are immediately visible.
All brands display product recommendations, recently viewed items, and cross-sell/upsell products in one way or the other on the PDPs.
ASOS’s You Might Also Like panel shows 4 rows of similar dresses, making the page longer and giving an overall impression of there being too many product recommendations. In addition, there’s a tab next to this with 4 rows of cross-sell items from the same brand.
Marks & Spencer’s and Zara’s product recommendation carousels are called You May Also Like, New Look has a We think you’ll love carousel, and Boohoo has two carousels—We think you’ll love and Similar products.
In M&S and New Look, there are category recommendations under the main product area. However, these recommendations are text buttons that you could easily miss.
Zara’s Match With cross-sell panel contains products the model on the current PDP is sporting.
ASOS’s Buy the Look carousel, New Look’s Shop the Look panel, and Marks & Spencer’s Why Not Try/Style It With carousels do not always show what the model is wearing in current PDP images. They show other matching or related accessories. This can get confusing to visitors who might actually want to buy the “look” the model is sporting.
Interestingly, New Look’s Shop the Look panel is dynamic and we’ve seen more items being added on the same PDP if a user browses through more pages on the site.
Boohoo has a baffling Complete the Look accordion next to the product details. It contains link to the PLPs of New Season and Shoes & Accessories, which adds a path to user journey instead of simplifying it. To make matters more confusing, the PLP titles New Season and Shoes & Accessories are not clickable—instead, there are Shop Now links next to these titles, which are clickable.
New Look and Zara allow you to add recommended products to bag without opening another page. New Look even has colour and size selectors within the carousel and users can add an item to bag right away. When you add to bag from product recommendations on Zara, it prompts you to select a size.
In ASOS and M&S, recently viewed products can be removed from search history right on the carousel, which is a great choice to have.
New Look’s recently viewed section contains just image thumbnails and the price of the product, with 8 products in a row. This could be a clever strategy—more items can be shown and since users have already seen the products, they don’t need further information.
Boohoo and Zara don’t have a recently viewed panel.
ASOS uses product badges such as ‘selling fast’ to create a sense of urgency.
On New Look, several types of social proof messaging/badges appear on the product image at different times.
Marks & Spencer has an ‘Online only’ badge that conveys that the product is not available in stores. Trust messaging on top of the page highlights store opening information, free delivery messaging, and paperless online returns. These are quite in line with a High Street brand like Marks & Spencer, who want to assure the user of the ease of shopping through their online portal.
Boohoo shows 4 deferred payment options—Klarna, Clearpay, Laybuy and Zip—but these are below the fold. New Look has Klarna messaging positioned under the primary and secondary CTAs. We know from experience that these often work as a great trust message and are best positioned as close to the Add to Cart CTA as possible. The other 3 brands do not show any deferred payment messaging.
Zara has no visible social proof or trust messaging on the page.
On ASOS and Boohoo, once a product is added to the bag, the mini cart pops down from the top for a few seconds. The item is highlighted as reserved for one hour on ASOS.
On M&S, a pop-up appears with assurance messages such as ‘great choice’ and ‘it’s in the bag’. Below it, there are product recommendations. New Look shows a confirmation message underneath the CTAs, but this message is not immediately visible—you have to scroll down to see it.
Zara shows the mini cart as a right-side panel, but the product image on the mini cart is too big for a quick cart view. It disappears only if the user manually closes it.
A few other things of note are:
Overall, Zara PDPs stand out as unique and unconventional, while ASOS, Marks & Spencer, and New Look have neat and clutter-free pages.
.svg)
.svg)
.svg)
.webp)
.svg)