4 Important UX Features For Ecommerce Sports Shops

The UK sportswear market is on the rise in 2014. According to Verdict Retail:

“The £5.8bn UK sportswear market is forecast to grow by 3.2% in 2014, outperforming the total UK clothing and footwear market by 0.4 percentage points, boosted by retailers developing far more fashionable, affordable sportswear ranges, forcing specialists to fight back.”

Major sporting events like the Football World Cup will heighten interest amongst consumers for general merchandise. Interestingly, some of the big fashion retailers and department stores have been busy expanding their sportswear ranges. A search on “sportswear” reveals Debenhams, Very, Next, H&M and TK Maxx on page 1 amongst the specialist sportswear retailers like Evans Cycles, JD Sports, Runners Need and Nike.

Figure 1 – Google UK search results page 1 for “sportswear”

 

1

This month I’ve been taking a look at the user experience on sport shops, including a couple of Postcode Anywhere customers (Evans Cycles and JD Sports) to see how they compare to the wider market.  I’ve looked at these big multi-channel brands as well as a few niche retailers to compare and contrast how specialists approach ecommerce UX.

I’ve focused on the desktop experience – mobile is important but a lot of the research phase is carried out on desktop/tablets, especially when buying high ticket items like bikes and technical sportswear (and I speak as a customer because I spend a lot of time buying running and hiking kit, too much time!).

The four websites discussed in this blog provide examples for good practice (with opportunities to improve further as no website is perfect). Please note I’m talking about the features/functionality rather than the UI design implementation. I’ve found sites that I don’t like visually actually perform really well when I look at the data, so basing UX opinions on aesthetics alone can be misleading.

The 4 sites are:

  1. Evans Cycles (page 1 in Google UK for ‘sportswear’)
  2. JD Sports (page 1 in Google UK for ‘sportswear’)
  3. Cotswold Outdoor  (#1 in Google UK for ‘outdoor clothing’)
  4. Runners Need (#1 in Google UK for ‘specialist running shop’)

I’m not saying these sites provide a perfect UX, no site ever does. For example, on Evans Cycles when you search for a specific product, the site doesn’t redirect you to the product page, instead you have to click on the product on the search results page first. I’m sure you could give me more examples of good and bad UX experience from personal experience – please feel free to do so in the comments.

First let’s take a quick peek at what on-site user experience related 3rd party tracking I can find using Ghostery – a good barometer for how they’re using tools to inform UX and website optimisation.

Evans Cycles JD Sports Cotswold Outdoor Runners Need
Google Analytics Coremetrics Certona Crazy Egg
Live Person Ensighten DC Storm IQ Google Analytics
DataXu Google Analytics Google Analytics SLi Systems
Sub2 Monetate New Relic Tealium
BazaarVoice BazaarVoice Web Engage BazaarVoice
Visual Website Optimizer
Crazy Egg

 

GA for web analytics is common across all four sites but there is a no consistency of choice for technology solutions around personalisation and voice-of-customer. I’m a big fan of SLi for intelligent search and navigation and DC Storm IQ for attribution modelling.


1. Segmented navigation

With a large product catalogue, it’s essential to use primary navigation tools to let users drill down quickly into relevant sub-sets of product.

Evans Cycles drop down menu is clean and well structured, offering multiple navigation options to cater for different users, as well as including visual merchandising via banners. For example under Bikes there are options for:

  • Bikes
  • Womens Bikes
  • Top brands
  • 2014 Bikes
  • Best Sellers
  • Customer rated
  • Reduced Bikes

If I were being pedantic, I’d highlight two minor points:

  1. ‘Customer Rated’ isn’t explicit or persuasive – a heading like ‘Top rated’ or ‘Customer favourites’ is in my opinion stronger
  2. ‘Reduced Bikes’ is easily missed below the ‘Womens Bikes’ list.

Cotswold adds a simple visual state change to highlight which top-level option you are viewing – a small arrow appears and the menu heading is underlined.

 

2

 

Something very odd happens when you use the Brands menu option on Runners Need – the content overlay extends off the page, so the user has to scroll across to view all the content. This isn’t great for the brands it sells as their logos get crudely chopped.

 

3


2. Clear and efficient search

This is arguably the most important navigation function for a website – conversion rates for sessions using search can convert at up to x5 better than non-bounce visits without search (based on data I’ve seen with retail clients).

There are a few critical criteria for effective search, including:

  • Clear and prominent site search toolbar in the site wide header
  • Predictive search
  • If there is an exact product match, redirect to the product page
  • Use fuzzy logic to help users e.g. handle misspellings
  • Tailored zero results page to help users and provide an onward journey.

The search filters should enable users to refine their search based on essential criteria e.g. for hotels, ability to select location, star rating, price band, room type, check-in/out dates etc. Evans Cycles provides an excellent set of faceted navigation filters on the left hand side – each time you select an option, the faceted navigation updates so your product selection is sequential.

The UX could be improved if most of these were collapsed to make the headings visible above the fold and then let users decide which filters are relevant to them, as well as using tick boxes so users can quickly select/deselect options without being depending on clicking back in the breadcrumb trail.

4

 

JD Sports provides a more intuitive UI design with the ability collapse/expand each option:

5

Evans Cycles has a few opportunities to improve on-site search:

  1. When there is a small number of matches, the options for ‘View 99 products per page’ is still enabled
  2. The breadcrumb trail shows Home > Detail
  3. It shows zero matches in the text even when there is a product showing below
  4. When there is only 1 exact product match, redirect users to the product page to reduce the click path.

6
Runners Need is using SLi Systems for intelligent search, providing an excellent UI pattern for predictive search that is also used by retailers like Boden:

7

3. User journey continuity

A major bugbear for ecommerce is the disrupted journey, where browsing actions in one session aren’t remembered in the next. This is amplified in multi-device browsing where there is often a disconnect between desktop and mobile sites e.g. the basket isn’t synchronised.

Whilst full data synchronisation across devices is a complex challenge (typically enabled via an API), there are helpful on-site features that can be enabled to improve continuity. These include (but not exhaustively):

  • Wishlist – user can add items to a list that is stored
  • Recently viewed – using cookies to remember which products the user has viewed and displaying in an easy to access content zone in the global navigation.
  • Favourites – users can flag which products in list pages they like the most and the site surfaces these at the top on future visits (ASOS lets you hide brands)
  • Persistent basket – if you create a basket but don’t complete the checkout, the basket contents are remembered on your next visit so you don’t have to add the items again (also used to drive basket abandonment emails)
  • Persistent filters – if you refine the product display on a product list page using faceted navigation or filters (e.g. filter by colour), the site remembers this option when you return to the site.

Persistent filters can be fiddly to implement. For example, if a user is on a product list page for Dresses and uses faceted navigation to select ‘colour=white’ and ‘price=£100-£150’, what happens when they visit the Coats & Jackets product list page? They may not want the same colour and the pricing options may be different, so is the logical assumption that you only store the filter options at page level?

Let’s take a peek to see how the four sites compare for feature coverage:

Feature Evans Cycles JD Sports Cotswold Outdoors Runners Need
Wishlist
Recently Viewed
Favourites
Persistent Basket
Persistent filters

 

All four sites use a persistent basket on desktop, which rolls-out when on mouse-over. It’s interesting to see the difference in CTA and click result. For example, JD Sports uses “Checkout” as it’s only CTA but this redirects users to the basket. However, Evans Cycles gives two options and the “Checkout” button drops users directly into the checkout, which is a better UX in my opinion.

8


4. Specialist advice

Within the sportswear market, there is a lot of technical product detail and some customers have very specific needs e.g. shoe specifications for trail runners is different to road runners. Where a product purchase follows detailed research, ecommerce sites have to communicate product expertise and give users the content they need to make the right decision.

Runners Need provides a knowledge centre via the main menu, clearly labelled ‘Expert Advice’. There is really useful content available but the page navigation isn’t the most intuitive. For example, when I click on ‘Sports bras’ (don’t ask!) under How To Choose, I see the following when the page loads:

9

It would be easy to ensure that users are directed to the most appropriate content, either by using HTML hotlinks or simply modularising the content so what you want is overlaid on the page in context.

Evans Cycles surfaces relevant content on product details pages, such as sizing and buying guides. However, the content and commerce journey isn’t fully integrated, as there are some guides that show in the main drop down navigation but not on all relevant product pages. For example, in the drop down for Clothing there is a buying guide for Specialized Shoes – go to the product page for Specialized Motodiva BG MTB Women’s Shoe and this guide isn’t visible:
10

I like the presentation of content in Cotswold’s ‘The Knowledge’. The page is built around video and has a clean design making it easy to navigate and pick out the content most relevant to you. However, the fact the main video has 0 views isn’t inspiring given that other videos have thousands of views.

11

I was really surprised that only JD Sports uses Live Chat. Given the technical and high-ticket nature of some of the products, I’d expect live chat to be used to provide product guidance and drive conversion. So this is clearly a sensible move from JD Sports, although the site could make it more obvious as currently it’s hidden away in the Contact Us pop-up. It’s possible that Live Chat is hidden only when there are no operators available for chat sessions; if that’s the case, it’s still worth highlighting to people the service is available and giving clear times and days when they can use it.


Comments and questions

What do you think of these sites? Which sportswear sites do you think provide a great UX?

Please drop by and share your comments, questions and experience. Please also share any relevant links you think readers would be interested in.


Follow-up reading

There are many helpful UX blogs out there, here I’ve picked out two of my more recent favourites:

Amy Schade on NNGroup

Ecommerce UX: 3 Design Trends To Follow and 3 To Avoid

Chris Lake on Econsultancy

21 Examples of User Experience Innovation In Ecommerce


  • Thanks for sharing this informative post, Really beneficial for those who are looking for apparel online store. The way of writing is very nice,keep blogging@@@