Why you shouldn't let the brand police near a website
Vivid colours, offers, moving objects and an overwhelmingly large image are increasingly the standard shop window experience in today’s virtual high street. The executions are always very on brand, often reassuring for key suppliers and their contacts in the trading department, but ultimately frustrating to the customer as they struggle to find what they want.
Quite often these executions also offer a carousel that moves slower than a customer's clicking finger: hiding offers, promotions and other potentially alluring messages from those they may entice.
Whilst your 'UX' specialists might justify what you have on their 'expert opinion' our data from tens of thousands of retail customers suggests that there are three key differentiators between effective homepages and those that are less so:
- A retail shop window that doesn't dominate allowing for key sales messages to support the main shopping missions.
- Obvious calls to action that take the customer through to where they want to be in the store or directly to current offers.
- Clarity about how customers find what they are looking for – this covers navigation choices, search box placement and easy to spot access to offers running in the media.
Despite the name, the homepage will rarely be the most visited page on a website. Shoppers on a specific product mission are far more likely to have searched for the product and as a result land on the product page. Category pages too will attract a high level of interest. So whilst your homepage might have the single biggest number of visitors, your product pages combined will attract far more visitors than this.
So the chances are if a customer is on your homepage, they have searched for you by name or you have sent them there in response to their search request. Either way they aren’t looking for a brand experience, they are looking to shop. The page has to help them either find what they are looking for or engage with your retail proposition to discover whether you can turn a browser into a buyer. Presenting them with a huge visual brand statement rarely if ever delivers a sale.
Think function not form
When you analyse data from homepages dominated by a large single image, you discover the following patterns:
- Fewer searches as the search bar execution is often pushed into the background to become almost invisible.
- Fewer clicks on calls to action as those in the image often appeal to a very narrow segment of customers.
- Fewer people moving down below what is initially presented on the screen as there is no clue given to the customer that there is relevant content 'below the fold'.
- Less interaction with the page as it is dominated by the visual.
- Far less engagement on mobile executions as the visual presents a significant barrier to get past for both browsers and buyers.
Getting these pages right needs to start in the mind of a new customer: they don't know you, what you offer or how your online store works. They want to know why they should buy from you, that you have what they are looking for (or at least that they will be looking in the right place), and that you can transact in the way they want.
Disappointing as it may be to your marketing department, they care less about how you present your brand, the tone of voice you want to use or the images you have chosen: some of the most attractive sites we have worked on have been some of the worst performing. To create an outstanding eCommerce experience, you need to work from the customer to the brand, not the other way around.
The confetti map below (figure 1), taken from a retail website demonstrates these patterns well. The brand-heavy image which appears above the fold is driving very few clicks and instead users are choosing to navigate through the site navigation bar. Whilst consistency between in-store and online promotions is important, it is vital to tailor these promotions to suit the needs of both your virtual and physical customers. Whilst the imagery used portrays the promotion well, it doesn't encourage the user to click. The value of this promotion is therefore being lost online.
What lies beneath?
The 'fold line' of a homepage is important. Many retailers fall foul of it and end up approving designs that place significant calls to action, sales messages and products below the fold in favour of filling prime retail space with images. The more you hide from customers, the less engaging your site will be.
Asos is a good example of an online store that utilises the space above the fold well (Figure 2). They have clearly thought their execution through and have provided their users with clear navigation options above the fold as well as using engaging imagery. The execution clearly tells the user what Asos sell and demonstrate why they should be your retailer of choice. By allowing users to differentiate their journeys at this early stage, Asos will be seeing high numbers of users moving through the funnel.
Marks & Spencer here is an example of a less effective eCommerce execution (Figure 3). The carousel shown has three sliding images all of which have a different promotion and none have clear calls-to-action. It is also important to note that this single carousel, of which most users will only see one image, takes up the entirety of the prime retail space above the average fold and as a result there will be small numbers of users engaging with content further down the homepage.
Responsive sites aren't enough
Finally, just because your website is now responsive, doesn't mean the homepage will work for mobile users. Mobile users face connectivity issues, especially when they are on the move, so they want you to help them get to their target quickly without endless swiping.
US retailer GameStop deal with this different execution style well and have stripped down their mobile website (Figures 4 and 5) in order to drive higher engagement from users who are out and about. By doing this, not only does it make the site easier to navigate but the load time will also be decreased leading to a reduction in the frustration caused by an incomplete load of a site.
James Hammersley is the CEO of Good Growth. He is also the co-author of ‘Leading Digital Strategy’, a guide to e-commerce strategy.