We use cookies to improve your experience. Please read our cookies policy here.

×

How to design a winning website homepage

7 minute read

Graham Charlton

Homepages on websites have a number of functions to carry out and often act as the first point of contact for potential customers, and a gateway to the rest of your site’s content.

A good homepage is a combination of good design and clear content. The content is there to communicate key brand messages, products and services, and good design is about making this content appealing and easy to digest.

In this article I’ll look at why thinking about the design of a website homepage matters, the key features and functionality to include and some inspiration from other websites.

Why does the design of a homepage matter?

Traffic can arrive at a website in various ways, from email marketing and social campaigns which send traffic to specific landing pages to visitors from search engines who arrive directly at product or content pages.

However, a website homepage is often the most popular page. It’s the one visitors are most likely to find when they search for your brand name or come across when looking at your business through listings such as Google My Business results.

The purpose of a homepage will vary according to the type of website. For retailers with multiple products, it might be about helping people to start their product search, but for businesses with one main product or purpose, it might be more about selling this from the point visitors land on the homepage.

In many cases, it’s the first impression visitors will have of your website, so this impression needs to be good. The website needs to convey trust, get across your brand message and help users find what they want easily.

While a good website homepage design and quality content will help you to make a strong first impression, a site which looks like it was designed to function back in the 1990s will deter potential customers.

Homepages also need to perform lots of tasks which may be secondary to the main roles of the page, such as helping people find contact details, locate local stores or review previous orders.

With a variety of roles to fill, a good homepage matters a great deal. It can attract new customers and help them to find what they want without hassle.

Key homepage content and design features

Here are some of the different features and functions that make up a good website homepage design, from key features to extras to consider when designing your own homepage.

1. Professional site design

It’s hard to describe how a site should look and feel, but people make snap judgements when they arrive on a website.

How a site should look (or rather, what customers expect) will depend on the sector, but if it looks professional, then people will be more inclined to trust it. If the design is messy, or perhaps looks out of date, then this can be a warning sign which deters visitors.

It’s also important that content is given room to breathe within the website layout. Space between elements on the homepage avoids clutter and visual confusion for site visitors, enabling you to get key messages across. It’s important for homepages to adapt to different devices, so testing any design across mobile devices, tablets and desktops is a must.

2. Explain what your business does

The difficulty of this task will, of course, depend on the type of business. If you’re a retailer, the style of your website and imagery will communicate this to visitors. Some may not need to work too hard to explain the business and can concentrate on impressing visitors.

Gousto, for example, which sells recipe boxes, uses a lot of its homepage to explain how the service works and to emphasise key selling points.

For businesses like this, explaining the value proposition is key. Visitors need to know how a service works and how it will help them.

3. Great imagery

Imagery can be used to help convey the purpose of a website, or simply to highlight products.

This can be done in a number of ways. For example, large ‘hero’ images can be used to showcase products.

This works well for a site like The Posh Shed Company. Its name tells visitors what it does, and it can then use great imagery to showcase the products it makes and how good they look.

Other sites, often those with more varied product ranges, may choose to use multiple images to show product ranges. In either case, good quality imagery helps to convey the purpose and make a good first impression.  

The Posh Shed Company website homepage

4. Navigation options 

Since the homepage works as a hub for many visitors, the point where they begin to look for products or find information, then clear navigation is essential.

Clear navigation options should help them to find what they want without hassle so there’s no need to be too bold here. A simple navigation bar at the top of the page is what most shoppers will expect.

Over time, categories can be adjusted, or given greater or lesser prominence depending on how popular they are, and how often people use them.

It also helps to think about how many categories you need, as this can affect design choices.

For example, if you have a large and varied product range, then drop-down menus are an elegant design solution which saves space on the page while allowing customers to be more specific as they navigate from the homepage, which you can see Graham and Green utilising below. 

These are available on several e-commerce themes from Shopify for example, and can be tailored according to the number of products sold.

Graham and Green website homepage

Site search is another navigation option, and almost essential if you have a large product range. Most people will use links to navigate but site search users are often more likely to convert. Essentially, by searching for a specific product, people are indicating an interest in buying it. Make it easy to find and you can drive sales from these users.

5. Clear call to actions

A homepage may contain several calls to action, depending on the range of products, or the key goals of the page. Some may be higher priority than others, but the common theme is that they should be clear and easy to find for users.

6. Contact details and help options

A link to a contact page is often shown in the footer of a site, but if you wish to make this more prominent, or perhaps encourage more customer contacts, it can be displayed in the site header.

After all, if customers are looking to get in touch with you, it’s best to make it easy to find you. This can also be a trust issue for new customers. Prominently displayed help and contact options show potential customers that you’re easy to get in touch with if they have any questions, or perhaps any problems post-purchase.

Here, Simply Hike displays a phone number and link to an online chat service on its homepage, repeating this throughout the site. As well as building trust, it means potential buyers can receive advice when they’re on the point of purchase, thereby helping to convert more visitors.

Simply Hike website homepage

Links to FAQs pages in the footer also offer customers a way to find answers to questions without needing to get in touch. 

7. Store locators 

If you have physical stores, it can pay to make these links clear so that shoppers can easily find the details they need.

This is information which can drive store visits so make it easy to find. A link in the top header is common practice as it’s where most visitors will expect to find this, like in this example from Barker and Stonehouse where you can see a prominent store link in the top left-hand corner. 

Barker and Stonehouse website homepage

8. Basket and checkout links 

Having added items to their baskets, some shoppers will browse other products and sometimes head back to the homepage. Or else, they’ll leave the site before returning via the homepage. Permanent links to the basket/checkout provide a quick route back to checkout for shoppers while highlighting the fact that items have been added can act as a useful prompt.

9. Promotional and other key messaging 

The homepage is a key space to highlight promotions, selling points, and important information for customers. This may be a sale promoted through a large hero image, or by using the area above the fold to highlight key offers and selling points.

In the example below, Pretty Little Thing gives prominent space to its payment by installment options to attract shoppers, as well as key propositions such as cheap next day delivery and student discounts.

Pretty Little Thing homepage example

Shipping offers, discounts and flexible payment options can be key sales drivers, so it pays to promote them. The idea here is to ensure that visitors are made aware of these details when they arrive on site, so that it becomes a compelling factor when they’re making a purchase decision.

The space above and underneath the header can also be used for key information which customers need to know. For example, RS highlighted delivery times and store opening hours in the run up to Christmas. This ensures that customers can order with more confidence.

RS website homepage

10. Links to content pages 

How heavily brands promote content from homepages may depend very much on the level of effort they’ve put into creating content.

Often, links to blogs and other content areas are an afterthought for businesses in the retail sector, perhaps placed somewhere in the footer where it won’t interfere with product links and promotions.

Net A Porter, for example, gives more or less equal prominence to content on its homepage, perhaps a measure of how well content works for the brand.

Net a Porter website homepage

Others may not be so bold but will display links to content further down the page, or perhaps add a blog link to the top navigation.

There are arguments for and against this, but a strong content offering can keep visitors on site longer, and in many cases can drive purchases by offering advice or ideas. It also depends on your products, industry and your business strategy. Sites selling DIY products can offer help to fix common issues for example, or food sites can provide recipe ideas.

11. Social proof and tustmarks 

Social proof can help to establish a website’s credibility to new users unfamiliar with the brand, so it can pay to use this on the homepage.

Reviews are a prime example of social proof and show prospective shoppers that other people have shopped on the site and have been happy enough to leave positive ratings. Services such as Feefo can collate reviews from buyers, and this information can be used on the homepage to boost trust in the brand.

Google Customer Reviews is another option which shows average review scores from buyers. It’s something sites can set up and add to their sites relatively easily.

In summary

The features and functions you need on your homepage will depend on the business model and the sector you operate in, but I think there are common key elements for all sites.

These include a professional look, a homepage which communicates key selling points and highlights products effectively while providing a useful starting point for any shoppers. It’s also essential that you think about how all of your homepage features and functions perform across different devices.

You also need to consider and account for the different reasons why people arrive at the homepage. New visitors need to be able to understand the site quickly, while repeat visitors need to be able to find the information they need, such as customer service links for example. 

It’s also important to note that homepages should change as your business grows. Products, promotions and key information will change with the seasons, while it’s important to test and improve as you go on, trying different styles and learning from the way people use your site.

Graham Charlton is Editor in Chief at behavioural marketing company SaleCycle. He has previously worked for Econsultancy and Search Engine Watch, and has written several best practice guides on e-commerce and digital marketing. Follow him on Twitter

Sign up to the UK Domain newsletter

Get all our monthly news and updates direct to your inbox