Студия Турум-бурум

Ecommerce homepage design: 5 practical tips from the head of the UI / UX department

Ecommerce homepage design: 5 practical tips from the head of the UI / UX department
74

If you want to know how to create ecommerce homepage design according to the usability rules, what tasks it should solve and what typical mistakes can be made on it, this article will help you.

You will receive 5 practical tips from Denis Studennikov, head of the UX/UI department at Turum-burum studio, and learn about the correct structure of the main page, its features for mobile, and current ecommerce trends.

What should be on the homepage of an online store?

Homepage of an e-commerce website is the face of the company, its “shop window” and entry point. This is the place where potential customers get acquainted with the store and the products it offers. Remember the 3-second rule? This is exactly how much time a user would normally spend on deciding whether to stay on the site or leave. The main thing here is not to mess things up and properly place accents, arrange blocks and slides.

Define the purpose of your homepage

The main purpose of the ecommerce homepage design is to distribute traffic by sections and offer as many entry points as possible. Thus, the user is sure to move on and take a deeper look at the products faster. Remember: the less time the visitor spends on the homepage of your online store, the better. According to Denis Studennikov, our UX/UI department head, only around 2% of visitors scroll down to the very bottom of the page.    

Once on the homepage, the user either goes to the catalog for further product search and selection or scrolls down. In the latter case, it is essential to arrange and prioritize the blocks properly.

Depending on the marketing goals of the online store, there are 2 main tasks that its homepage should pursue:

  •        Maximum concentration of entry points

If it is a big online store of household and electric appliances, the main task would be to show the widest possible range of products on the homepage. Under the main banner you can place a block with hot offers, promotions, discounts, popular products and other items in the low- or middle-price segment that attract the visitor’s attention.

If the homepage is not the main entry point, then its role is not that significant, and the main task would be to guide the user by categories and facilitate the search.  

Website design homepage of the JomaShop
Website design homepage of the JomaShop
  •      Image component

If the goal of your online store is to build a brand, the homepage primarily plays a representational role and only then addresses the issue of sales.

For example, the Intertop homepage is one of the most visited pages of the site. It is a famous brand, so people use a navigational query to get to the store.

Homepage is the most visited page in the Intertop online store
Homepage is the most visited page in the Intertop online store

In this case, it is important to show the image component of the online store and tell regular users about new arrivals.

Visitors of the Intertop online store always expect to see something new
Vistors of the Intertop online store always expect to see something new

That is why we used a multi-banner concept in this project — to let the business owner have as many opportunities to present new products and promotions as possible.

Use the crucial elements of the homepage

There are generally accepted rules for the homepage design, as well as key elements that need to be taken into account when designing an online store:

  • Header with a logo is a mandatory part of the website design that should contain important information about the store (name, contacts, menu).

Header with a logo on the 6 pm website
Header with a logo on the 6 pm website

Above the header a top banner can be placed for promotions and news, as it is done in the Calvin Klein online store. 

Top banner in the Calvin Klein online store
Top banner in the Calvin Klein online store
  • The main banner is a quick way to show what the store is selling in general, as well as present the current promotions, hot deals, new products and sales.

Main banner in the Carter’s online store
Main banner in the Carter’s online store
  • Product block thumbnails or slides are entry points providing quick access to top deals, new arrivals or promotional products. 

Main banner in the Carter’s online store
Example of product blocks on the Calvin Klein website

Don’t choose just one way of presenting information, diversity is important. For example, you can display new arrivals in blocks, and special promotions — in slides, to avoid the “tunnel effect”, when the interface blocks look so much alike that the user’s eye is focused on just one thing, and the other elements stay overlooked.

  • Unique Selling Proposition. Homepage is the place where you can communicate with your potential customer. Make the design for website homepage clear for the user what your advantages are, what makes you different from your competitors in the market, explain what your unique selling proposition is. Avoid trivial things (fast delivery etc.), make an accent on what really makes you stand out. 

Unique selling proposition in the Yaro online store
Unique selling proposition in the Yaro online store
  • Marketing blocks. It is a good idea to place a contact request on the homepage in the form of a subscription, a loyalty program or a special offer. To make it work, add some value for the user: a discount on the first order, an individual offer or access to closed sales.

Subscription form in the Sunuva online store
Subscription form in the Sunuva online store

  • Footer. The importance of this website element is often underestimated. However, there is a certain pattern of user behavior, when they scroll down to the footer because they are used to seeing useful links there. So place the elements familiar to the visitors in the footer — for example, links to social networks, blogs, news channels, contacts.

Footer in the Asos online store
Footer in the Asos online store

Segment the audience 

Creating several homepages is no longer a new trend in e-commerce. It has been quite effective, in particular, in the fashion niche (Yoox, LaModa, Pratik). In this case, during the first visit to the homepage, the user can be asked to make a selection by key parameters: for example, Women/Men/Kids. In this way, the homepage can be personalized and offer the most relevant products to each target audience. 

Example of the homepage optimization in the Tommy Hilfiger online store
Example of the homepage optimization in the Tommy Hilfiger online store

Take into account specific features of mobile interaction

A mobile version of your online store is no longer a recommendation, it’s a requirement. Not only should the website elements be reduced and rearranged for it, but some blocks and features of the store should also be replaced. For example, in mobile the main banner and other images should be redesigned for portrait viewing.

Example of the main banner in the desktop version
Example of the main banner in the desktop version  

Example of the main banner redesign for the mobile version of the website
Example of the main banner redesign for the mobile version of the website

Avoid common mistakes

Even if you choose the approach, strategy and arrangement of elements correctly, there are still things you can do wrong that will prevent you from reaching your goals. Here are some common mistakes you should beware of when designing the homepage of your online store:

  • Too many slides cause the "tunnel effect” with the user, produce sameness and information overload;
Too many product photos on the website homepage
Too many product photos on the website homepage
  • No description of the company, and/or the logo is not obvious;

Anti-example of the header design on the Allbiz website
Anti-example of the header design on the Allbiz website
  • Irrelevant main banner that provides no understanding of what the store is selling, or even misleads the user;

  • The website structure is defective. For example, right below the main block the Instagram block is placed, which takes the customer away from the official site. If you want to present Instagram content on the homepage, it would be a good solution to display a pop-up with a picture from the social network and a photo of this product on the site when a product image is clicked upon. And then take the user to the next stage of the funnel — the product card.

  • Customer reviews about the products or the store are unnecessary on the homepage, they can be annoying and even decrease the customer loyalty.

The user doesn’t need a dishwasher review if he/she has come to buy a TV. In such a situation reviews cause mistrust
The user doesn’t need a dishwasher review if he/she has come to buy a TV. In such a situation reviews cause mistrust

As a result of such mistakes, some customers leave the website within the first seconds. Now you know what you should do for homepage optimization to avoid it.

Things to remember about homepage

When making ecommerce homepage design for your online store, do all you can to quickly take the users to the necessary section. Save their time on finding the relevant product card. If the majority of visitors scroll down to the middle of the page and then go to other sections of the site, it means you have managed to arrange your entry points properly.

Use the homepage to segment your audience, raise brand awareness and maintain your company’s online image, building on the core business goals.

You can also read about Website conversion rate optimization: Useful tips from 5 world-leading proven experts from Optimizely, Hotjar, CXL, Baymard Institute.




Оставьте номер и мы перезвоним
Thank you!
We will soon get back to you.
Contact us
Please choose a topic below in which you need help with:
    Thank you!
    We will soon get back to you.