Don’st judge an eCommerce by its cover. I mean homepage, and yes, you should judge it. It’s often the the most visited page of an eCommerce store, the welcome screen your new clients see for the first time, the passageway to conversions and profit. Most businesses don’t pay enough attention to their homepage but they should. In this article I will talk about 10-ish points that can make or break the user journey. Keep reading and you’ll learn how to improve them.
An UX eCommerce audit can have many faces. There is no one, universal and correct way to do it. For example, to make an impressive but not too overwhelming start we can go with a cognitive walkthough.
You may ask, why? Because it can be done by as little as one person and as thousands (ok, maybe a few sounds more reasonable) . It also very liberal in terms of what can you evaluate and which framework to you use. A popular choice is using Nielsen Heuristics, or Baymard Institute UX Audit, but you don’t have to limit yourself to these two.
Another way to approach it, is to have a checklist you can get from this post. It’s an easy 10-point start to evaluating your home page.
Let’s dive it.
The navigation you present your user with upon entry is extremely important. There are several approaches to presenting it. Best practices suggest to include not only you main categories, but also some of the most popular categories or subcategories.
For example asos the clothing retailer presents the 3 first items in the navigation that could easily be presented as subcategories.
- Offers -> Could be attached to every main category to present offers from the specific group of products
- New In -> Similar, we can either display all New Products or we can add the “new in” as a filter to all subcategories
- Topshop -> is a brand that should be included in Brands, but asos decided to create a separate menu item for them. This might suggest this category is popular among their users.
Questions to be asked here:
- Is the navigation visible above the fold?
- Are popular sub-categories added to the navigation menu?
- Are there any obvious redundancy in the navigation menu?
Main Slider
A lot of companies are obsessed with stuffing as much information as soon as possible in the form of sliders. Below is an example from Sephora Mexico, where they have as much as 8 items in the carousel. As Master Yoda might say: The way, this is not.
The same goes for their Mobile website. Okay, on desktop I have a probably a stable connection, a mouse to click on the small tiles if I want to select a specific slide, but on mobile? Come on Sephora Mexico, take a look at your sister beyond your north border.
It warms my CRO heart when companies are retiring sliders and are adopting static images that are easier to navigate. First of all here we can see there are three section on one slide which is a smarter use of the space.
Questions to be asked here:
- Are there moving slides on the homepage?
- Are there more than 3 slides in the slider?
- Does the mobile view also include a slider?
Include a search bar
When people know what they want, make it easy for them to purchase a product. Let’s stick with the cosmetic market. If you were to buy “Kiehl’s ultra facial oil-free gel cream” where would you search? In Face Masks? Face Oils? Face Serums? or Facial Toners? I wouldn’t know and probably they would loose my purchase (by the way these are the real categories from their website). Fortunately, there is another way. On the main page they have a search box which helps me find the product of my desire. **slow clap**
Questions to be asked here:
- Is there a search box present on the homepage?
- Is the search box easily identifiable?
- Does the search box have a auto-complete feature?
- Are products displayed while typing or upon pressing enter?
Include USP bar
This is an element I particularly like. A bar with your Unique Selling Proposition on the homepage. It can be difficult to include your values on the Product page, on the other hand, if you write it down on the About Us page only a few per cent of your users will read it. For this reason I think it’s a great idea to give your USPs on the welcome page. The screen below presents two bars.
- TopBar / HelloBar / Promotion Bar – which usually communicates promotions but can also announce your values
- The USP bar that can say things like
- Free shipping on all orders
- 30-day Free Returns
- Buy Now Pay Later
- etc…
Questions to be asked here:
- Is there a USP bar?
- Is there a Top Bar?
Feature Different products and/or categories
Your Homepage is the gateway to discover the wonders of you e-store. Since users are there already it would be really nice of you to offer them relevant content. A few things that you might be including are:
- New Arrivals
- Best Sellers
- Products You Want To Unload
- Product Bundles or Kits
- Top Selling Categories
- Least Selling Categories
- Seasonal Categories
- Promotions
- Outlet
By including these links you can facilitate the discovery of new products and at the same time bring traffic to where it’s needed.
For example, lets analyze The North Face’s homePage from top to bottom.
- Category Flight Series
- Category Vectiv Shoes
- Category BackPacks
- Category Rain Jackets
- Loyalty program
- User generated Content
- Recommended Products
- Links to Content
What we can see here is that TNF puts a lot of emphasis on categories and not products. In contrast REI – a retailer from the same category has the proportions reversed. More focus on products than categories.
Questions to be asked here:
- Is there a search box present on the homepage?
- Is the search box easily identifiable?
- Does the search box have a auto-complete feature?
- Are products displayed while typing or upon pressing enter?
Use High Quality Images
Users need only 50 milliseconds to make a decision whether they find you website visually appealing or not. It’s the speed of a blink of the eye.
This guideline is in particular important for eCommerce that are in the visually-driven category like apparel, design, furniture etc. For beauty products it can be both.
A great example below. Dior uses high quality images to convey high standard of their products. You should too.
Questions to be asked here:
- Does the homepage have bespoke images?
- Is there a variety of images (products and inspiration images present) ?
Personalize the homepage
It’s highly likely we have different likes. Not every product is perceived by every person the same. For this reason, brands can bring a lot of relevance by personalizing the homepage.
An great example of this is Amazon. Below you can see a generic home for anonymous users.
And in the next screenshot you can see the example of a more personalized homepage. Amazon does not change the slider, but it does put some products and categories they think I am interested in.
There are tons of additional examples of personalization on the homepage. Below is an example from DynamicYield.
Questions to be asked here:
- Is the homepage the same for guests and users with an account?
- If it changes, what is different?
Let’s bring this home
I really enjoy analyzing websites because there are so many details that can make or break user experience. Small issue can have huge implications and big changes might not move the needle at all.
With this checklist I wanted to give you a baseline for what to look out for when analyzing the homepage. However, the checklist is not complete. It’s but a starting point. What I do, is I constantly add observations to my list when I shop online. This results in tons of ideas that will pay off during your next UX Audit.