The ecommerce mistakes that Austin Reed should have avoided

in Experience   —  

On 26 April, 116-year-old, British tailoring brand Austin Reed collapsed into administration. According to the BBC, retail analysts have commented that the upmarket company had ‘failed to keep pace with competitors’.

Consultancy RSM singled out Austin Reed’s ecommerce presence as one of the company’s major downfalls, commenting that “the website is not good enough by today’s standards”. This point is especially surprising considering that the management team had just invested £6 million in 2015, to ‘improve online operations’.

In response to the news, our user experience team reviewed Austin Reed’s website against ecommerce best practices and the results that we achieved for our ecommerce clients. We found 10 critical ecommerce mistakes that will have resulted in a poor customer experience and lower conversion rates. These are common issues that ecommerce brands should take care to avoid.

#1. Poorly designed header

An ecommerce site should always have a clear, well thought out header. This should orientate the user and provide easy access to all key functionality. This is essential in helping the user get to the information they need as quickly as possible.

Key elements in the header should have been clearly separated by importance and function
Key elements in the header should have been clearly separated by importance and function.

In order of importance, the user should primarily be able to:

  • Select their country or currency
  • See the number of basket items, the basket value and contents
  • Quickly navigate to collection and product pages
  • Quickly search across all products, collections and content.

These functions should be reinforced with a number of secondary elements:

  • Information about shipping and delivery
  • Information and contacts for customer services
  • Store locator (if relevant).

The problem with the Austin Reed site is that all the elements in the header are displayed in the same font, the same colour and at the same size. There is no clear distinction between primary navigation elements and what should be supporting information.

Making matters worse, some of these elements appear to have been bunched together. For example, the preferred currency and store locator appear to be displayed as a single button, when these should be clearly separated.

A much clearer header can be presented with a few simple design tweaks

Example shows how the key elements should have been positioned
Example shows how the key elements should have been positioned.

With a few design tweaks, this example shows how key elements should have been positioned:

  • The country and store locator are separate elements
  • A flag indicator is shown next to the country selector
  • The basket displays the number of items and value, and can be expanded to display basket contents
  • The search is a separate element from the basket
  • The primary navigation is larger and bolder

#2. Missed homepage opportunities

To entice and inspire prospective customers, the homepage should showcase your most important collections, current promotions and trends and captialise on valuable merchandising opportunities.

In contrast to this, Austin Reed’s homepage is mostly comprised of a set of uninspiring blocks. A vibrant banner advertising half price suits (with a yellow call to action) is followed by misaligned tiles advertising sales on shirts (with a blue call to action), ties (also blue), trousers (red) and jackets (also red). This is followed by a promotional block, advertising a specific menswear range (this time with a black call to action button).

Austin Reed's homepage
Austin Reed's homepage shows low quality imagery and inconsistent calls to action.

The overall effect of the homepage is rather uninspiring. To make it more engaging, much stronger imagery should be used to feature promotions, new seasons and new collections. Along with this, inspiring content about trends and tips, and information on how to piece different outfits together would really transform the homepage. Brands that are doing this well include Selfridges and GQ magazine.

Selfridges' homepage
Selfridges' homepage uses vibrant imagery to feature promotions, new seasons and new collections.

#3. Slow and unresponsive search

A recent study showed that conversion rates suffer on sites that respond slowly, with each 1 second delay in page response causing in a 7% reduction in conversions.

With Austin Reed, the search function is extremely slow. On a good internet connection, it takes nearly 6 seconds for the web server to respond with the search results.

Austinreed search vs grahambrown
Austin Reed's website takes nearly 6 seconds to respond with search results.

As well as this being frustrating for users, it is also likely to cause performance problems on the server infrastructure, which could cause an overall site slowdown across all pages during times of peak traffic.

In our experience, a powerful and high performance search function is an essential element in driving product discovery. For ecommerce clients Graham & Brown, we introduced a predictive search that was built using specialist search technologies, Lucene & SOLR. This returns all search results in less than 50 milliseconds, with results immediately presented and updated as you type. It combines product suggestions (along with prices and images) with product collections, designers and inspirational blog content.

Predictive search functionality on Austin Reed and Graham & Brown
Predictive search functionality on Austin Reed (left) and Graham & Brown (right).

#4. Inconsistent calls to action

One of the key elements for a successful ecommerce site is providing consistent calls to action everywhere.

However, this best practice isn’t followed by Austin Reed as users are presented with call to action buttons that are in many different colours and different styles. On the homepage alone, buttons are shown in yellow, blue, red and black.

austinreed homepage buttons
Inconsistent calls to action

While this might not seem to be a key issue, consider what happens when a user gets to an individual product page. The user no longer knows if yellow, blue, red or black buttons represent the primary call to action.

Unfortunately, this is then made worse as the buttons on the product page no longer match the style or colours from earlier pages. Instead, customers are presented with a different blue button, this time with a gradient background.

Austin Reed’s sign up to newsletter element is also rather unconventional, with two call to actions (men and women). This does nothing other than create confusion; users expect to see a single sign up button, but instead are shown what appears to be primary navigation. The site’s newsletter sign up should have a single call to action. The content and offers that are then sent to a user, should then be automatically determined based on what products the user views and what emails or offers they subsequently respond to.

#5. Low quality imagery

The images across the Austin Reed site are often low quality and sometimes blurry. This reduces the quality of the product pages, and cheapens the overall impression of the brand. This is in significant contrast with the messaging that a premium brand should deliver.

Austinreed products images
Low quality imagery cheapens the impression of the brand

In addition, an increasing number of users are likely to be accessing the site via mobile and tablet devices. With higher screen resolutions, and faster internet connections, there is no reason why high quality product images could not be served to all users. In fact, many 'adaptive' techniques now exist to provide mobile and desktop users with optimised images that are tailored to their device and internet connection.

#6. Poor messaging on product pages

While the layout of product pages on Austin Reed follows most current practices, the implementation of the ‘add to basket’ button is rather poor. If the user forgets to select a colour or choose their size, they see a warning message that says:

“Your selection is either incomplete or not in stock. Please be sure to supply a value for each attribute or consider a different combination of values.”

austinreed product details page
Confusing validation messages deter users.

This is not helpful to the user for several reasons. Firstly, the product page needs to present the user with clear information about whether an item is in stock or not. It is reasonable to expect that this information be accurately updated as the user changes their combination of colour and size.

Secondly, if the user has forgotten to choose one of the required options, the corresponding validation message should be shown alongside that specific field.

On the current site, these issues, coupled with confusing 'developer jargon' in the warning message, leaves the user alienated and confused at a stage where it should be extremely simple to place an item into their basket. We would expect to see poor 'add to basket' conversion rates until these improvements are implemented.

#7. Broken layout in the mini basket

Once a user adds an item to their basket, the site presents a 'mini basket' overlay, indicating to the user that they can access their basket at any time.

The mini basket has a poor quality layout
A poor quality layout which lowers consumer trust.

While the approach follows standard practice, the execution is poor:

  • The colour, size and length text is misaligned.
  • The price overlaps with other text.
  • The basket shows ‘1 items’ has been added, should not be be plural.
  • The basket also shows ‘savings’ of £0, leaving the user to wonder why they haven’t saved anything. This row should only been shown once a discount has actually been applied.
  • The call to action button is a restrained navy blue, this should be something more vibrant. Most ecommerce sites use red or yellow as these create a sense of urgency, inspiring the user to take action.

While each of these may sound like minor issues, the overall effect is create uncertainty and doubt in the mind of the potential customer. This results in customers being less likely to proceed through to the checkout, leading to a lower conversion rate.

#8. Confusing checkout process

When a customer proceeds to Austin Reed’s checkout, they are presented with the following screen. In our experience, we would anticipate a significant dropout rate occurring on this one page alone.

The website has a confusing checkout form
The checkout process is confusing and will result in high dropout rates.

The issue with this layout is that it acts as a barrier to the checkout process. Customers should not have to stop and decide whether they want to use the guest checkout or register as a new customer. Even worse is when an existing customer starts on either of these routes, a validation rule then fires to say the email address is already in use and that the user should sign in instead.

In our experience, the checkout process should be completely streamlined, to only show the guest checkout flow. Then, once the user enters their email address, the site can gently remind the user that they have previously shopped here, and only then provide the option to login. For new email addresses, the option to register would be best placed at the end of the checkout flow.

These approaches mean that the checkout can then be streamlined to the point where it is presented as a single page. The best practices are:

  • To simplify the header to remove potential distraction.
  • To clearly display customer service contact information.
  • To display basket contents at all times throughout the checkout.
  • To clearly show and label the steps the user needs to complete (there should be no more than three).
  • To validate all user input as they type.
  • To clearly display which payment cards are accepted.
  • To clearly show information about delivery, returns and data security.

For clients Graham & Brown, we recently improved the checkout to incorporate a single page process with inline validation. This one change alone accounted for an increase in revenue by over £44,923 per month.

Our streamlined checkout for Graham & Brown increased revenue by £44,923 per month
Our streamlined checkout for Graham & Brown increased revenue by £44,923 per month.

#9. Security

A key indicator used by consumers to determine whether a website is secure, is to look for the padlock sign in the browser. This is automatically shown by the browser when accessing a web page that is served over an encrypted HTTPS connection. The best practice is to apply HTTPS across the entire site so all pages are served across an encrypted connection.

In contrast, most of the pages on the Austin Reed site, and even key pages within the checkout remain unencrypted. Only the payment screen is encrypted, but all other data is entered by consumers over an unencrypted connection.

This leads to a lack of trust from the user, as potential customers expect to be reassured, throughout their shopping journey, that all information is being processed and stored securely.

#10. Overall build quality

As a technology company, we have high expectations for technical build quality. Examining the Austin Reed site, we found a number of technical issues with the build quality. The easiest way to illustrate some of these is to run the site through Google’s PageSpeed Insights:

Poor technical build quality as shown by the Google Insights tool
Poor technical build quality as shown by the Google Insights tool.

The site loads 35 separate JavaScript files and 10 separate CSS files, with the majority served from the Austin Reed website. While these files are small, it is important to realise that for mobile users, the overhead of each additional HTTP request on a 3G or 4G connection is more important than the size of the files themselves. One larger file will load much faster than 30 smaller files.

Bundling and minimising the size of the JavaScript and CSS assets is a best practice for development teams and should have been done here. This would be especially beneficial for users accessing the site via a mobile internet connection.

In addition, the images and other static content should be served with long-term cache expiration dates. This is also best practice, and has not been done here. This would provide returning visitors with a much faster site, as product images would not need to be downloaded on each visit.

Takeaways

Admittedly, these changes would’t have solved all of Austin Reed’s problems, but they do highlight how the company should have paid more attention to key aspects of their ecommerce website. Improving both the customer experience and the technical build quality would have led to increased conversion and increased revenue, helping the company to thrive in today’s global marketplace.

Read next

ArticleRetail

How retailers can boost conversion, part 2: predictive search

How to extend your search function to ensure your customers can get to relevant products as quickly as possible.

ArticleRetail

How retailers can boost conversion, part 1: landing pages

How landing pages can improve the shopping experience and drive sales.

ArticleStrategy

How to build a digital roadmap

A digital roadmap helps to balance customer and business priorities and align all stakeholders with a simple view of the route ahead.