10 Essential Elements of Website Homepages

The homepage is your first chance to make a good impression on users who visit your website. It’s the first chance to convince users that your product/services are worth their investment. But if you’re not careful, the homepage could turn them away before they ever get the chance to learn about what you can offer them.

The homepage is usually the page of your website that internal stakeholders take the most interest in, and because of this it’s common to see cluttered home pages that try to be all things to everybody, have no obvious purpose, and forget about the needs of the users you're hoping will visit.

It’s vital to educate anyone that feeds into your homepage design about these dangers and explain its true purpose.

The purpose of a homepage

The goal of a homepage is to establish your brand whilst at the same time compelling visitors to dig deeper into your website. To achieve this a homepage should have several key elements. Below we have summarised the 10 elements that we feel are most vital in effective homepage design and development.

The elements of a good homepage:

1) Clear site identity and purpose

The homepage has to tell users the purpose of your site. Users shouldn’t have to click through to your about page to find out who you are and what you do, nor are they likely to. If users can’t understand who you are within a couple of seconds, they will leave your website and go elsewhere.  Craft a strong, snappy headline for your homepage and a sub-heading offering a brief description of what you do/offer.

Airbnb is a great example of this, with a powerful user-centric slogan and descriptive sub-heading.

2) Shows users what they’re looking for

The homepage needs to make it obvious how users can get to the information they need. This is achieved through a clear site structure and highlighting with calls to action the areas of your site where they should go next to find the answers they need.

When we recently worked with GAP Group on a new website design, we made the product catalogue very much the focus of the homepage showing users the purpose of the website, with the type of hire solutions catered for, evidence as you scan down the page.

3) Primary Calls to Action

Focus on a small number of primary actions to take users to the next practical step. Having primary calls to action involves prioritising the multiple actions users could potentially take on your website.

So decide if a user downloading a resource is more important than their registering to receive your newsletter and then focus on only that ask and making it as valuable as possible to the user so they complete that action. It’s also important to keep in mind the order in which users are likely to complete actions e.g. They may download a resource before signing up for a newsletter or they may make a one-off donation before becoming a regular donor.

Charity Water currently focus their homepage on the action for users to start a fundraising campaign, with the majority of the page designed to show how easy it is to start a campaign, give users fun campaign ideas and show why this is an important action to take. Through its design Start a Campaign very much stands out above the lesser priority action of making a donation but again they show this so that users not ready to commit to a full fundraising campaign can easily give their support.

4) Addresses users who aren't ready to commit

Most people don’t land on a homepage ready to commit. Whatever your offer, you need to provide a next step for users to learn more, for example, more in-depth features of your product, helpful resources, or for a charity, how you spend donations.

This approach also means you don’t have to try and tell users everything at once, just hook them in and then provide a clear next step for them to learn more.

Despite Nike’s trusted brand authority, they still understand the importance of this, ensuring any products featured on their homepage include a link to learn more, or as shown in the example below, a link for users to compare different boots. Whilst scanning the homepage some benefits of shopping with Nike also stand out such as free returns & delivery.

5) Communicates your USPs

The homepage should tell users what makes your brand unique from other similarly related brands, they also may have come across in their search. It’s important to not only tell users what you do but the benefits of this. Freshbooks do this well including an element of social proof with the quote from Forbes Magazine and incorporate the hook of a free trial to gain new sales leads.

6) Uses Social Proof

Social proof is the positive influence created when a person finds out that others are doing something. When a user lands on your website they’re unsure of how good your offer really is, you need to sway them, using social proof.

There are various forms of social proof you can use such as influencer testimonials like that of the Forbes testimonial on the Freshbooks website, quotes from your customers, case studies, showing the number of downloads of a particular resource/offer (think Groupon) and reviews.

7) Tells a Story

All of the information on your homepage should be crafted into a story, rather than being fragmented parts. Rather than dumping content on your homepage, communicating your sites, identity, mission and USPs should flow together in a way that tells an engaging story.

Storytelling from the homepage onwards was vital in our work with Edinburgh Festival City in order to build the brand, with the story of why Edinburgh is the world’s leading festival city, running down the homepage and carrying through to all pages and the navigation. The strong images Edinburgh Festivals have brings the story visually to life.

8) Is Memorable

The best way to grab your user’s attention is to stand out from the crowd. Users will remember a homepage that is different, so think about creative ways to achieve this without losing sight of what's relevant for your brand and website usability.

Lighthouse Brewing Company balances its striking design with clear navigation and strong brand identity.

9) Uses visual assets

As most people can understand information more quickly when it’s visual, a good homepage should have a combination of text, images and/or video. Images and video are a good way of bringing your story to life, showcasing your products/services and making users remember you. Avoid generic imagery that doesn’t support what you’re saying.

Short videos allow you to convey information quickly and show your products/services in action.

Dadaab Stories add visual context to their stories of life in the Dadaab Refugee camp through using a video that loops in the background of camp life and its people.

10) Responds to change

Your homepage brand messaging should always be updated in line with changes to your brand’s positioning and goals. If you want to change any specific element of the homepage only do so in response to evidence that the existing element is not working well and ideally perform A/B testing to test a specific change such as the wording or placement of your calls to action.

Conclusion

As the elements outlined above show, there is much more to consider when designing a homepage than simply how it looks. To effectively engage users when they land on your homepage and get the best return from your homepage requires careful consideration of your business goals, your audience needs and user experience. As the most viewed page on the majority of websites, your approach should be strategic rather than reactive or internally focused.

If you would like help ensuring your homepage is the best it can be, we would love to hear from you.