Jan 1, 2024

The Art of Effective Homepage Design (Part 1)

The Art of Effective Homepage Design (Part 1)

The Art of Effective Homepage Design (Part 1)

A two-part breakdown of the 10 essential components every website homepage needs

Educational

Introduction


Studies have shown that the average conversion rate sits at about 2.4%. When you look at the top 10% of high-performing websites, the conversion rate sits about 11.5%. In other words, if you’re doing £100k of monthly sales, you could increase this to £480k just by revamping your website.


That’s really significant.


What’s even crazier is that these changes are actually really simple. There’s a formula.


Problem is, a lot of business owners are simply unaware of how this formula looks. Their focus is elsewhere and, for whatever reason, they never stumble upon it.


In this article, we’ll be sharing the 10 essential (and proven) components of high-converting landing pages so you can go away, implement them yourself, and perhaps just see an overnight transformation in your company’s sales.

Component 1: A Strong Hero Section




Athletic Greens’ hero section, including problem/solution headline, professional & relevant media (although slightly pixelated it must be said; the downside to using video), well-organised nav bar, and elements of trust (5-star reviews and money back guarantee)



The hero section is the first thing a visitor sees when they land on your website.


When you learn that a 70% bounce rate (the percentage of people who leave a website without navigating beyond the first page) is considered fairly normal, you start to understand the importance of the first impression.


The hero section is the ultimate first impression.


So, how do we get it right? Let’s break it down into the three core elements:


  1. Headline

  2. Key visual

  3. Navigation (nav) bar


The headline is the main piece of text within the hero section that should grab visitors’ attention and communicate the primary message or value proposition. It is your hook, so make sure it’s clear, compelling, and relevant.


They say a picture speaks a thousand words, and nowhere else is this more true than in your hero section. Whether it’s a still image, a video, or even a graphic, the visual element must be high-resolution, must look professional, and should align with your brand offering and identity.


Albeit less prominent, the nav bar nonetheless forms part of that ever-important first impression. Make sure it contains your company logo (in the right colour and size) and a well-organised set of menu items.


If you’re a D2C brand, you may also wish to include a ‘trust bar’, which showcases elements intended to build trust with visitors (e.g. money-back guarantee, X number of 5-star reviews, industry certifications, etc.).

Component 2: Focused Calls to Action (CTAs)




CTAs — albeit more subtle — on Burberry’s website



Websites exist to perform a job. That job may be getting someone to buy a product, downloading a free trial of your software, contacting you for a ‘discovery call’, etc.


Sure, a website also serves other purposes like providing contact details and telling your brand story, but 99% of the time, it has one key purpose that sits above the rest.


The effectiveness of a website can be measured by its ability to convert visitors into performers of the desired action, hence the term ‘conversion rate’. And while there are many things you can do to encourage this, there’s nothing quite as direct as a nice shiny button telling the visitor to perform said action.


This is what’s known as a ‘CTA’, and these should be dotted around your site like pins in a pin cushion. Sixth City Marketing estimates that CTAs can help boost conversions by over 160%, yet just 30% of small (B2B) businesses make proper use of these.


Having said all this, you should always consider your brand positioning when employing CTAs. If you’re a premium brand, for example, you don’t want to appear too pushy in your sales approach. That’s why you don’t see brightly coloured, high-contrast buttons on the likes of burberry.com.

Component 3: Concise, Benefit-Oriented Copy




Customer/benefit-oriented copy on the Oura Ring website



As we’ve already alluded to, people aren’t as interested in your website as you are. Attention is fickle and you need to remember that when putting together your website copy.


So, Rule 1: write less. Generally, people aren’t going to read the text on your website and this is especially true when they see a big chunk of it staring at them in the face. You need to ensure your copy is ruthlessly to-the-point so as to maximise readability and avoid boring your visitor.


Rule 2 is to write in a way that clearly spells out the benefit to the customer. As we’ve learnt at dinner parties, people always appreciate it when the conversation’s about them. This is certainly the case when they’re engaging with your website.


Don’t waffle on about your heritage, values, brand story, etc. on your landing page (you can do this on a separate page). Instead, make it absolutely clear how you product/service (will hereon refer to just as ‘product’) will benefit the customer and always construct your copy with this value proposition in mind.

Component 4: Social Proof




Objection-focused UGC video reviews on The Essence Vault’s website



One of the easiest and most effective ways of boosting conversion is by demonstrating what’s known as ‘social proof’.


Humans are social animals and nothing is quite as convincing to a potential customer as another converted customer demonstrating how happy they are with the product on sale.


The most common form of social proof is the ‘Testimonials’ section, which should include short, engaging quotes highlighting specific results of benefits derived from using the product.


Other forms of social proof include case studies (with quotes from the client) and reviews, with video reviews (or ‘UGC’) responding to specific objections (e.g. “Honestly, I was worried about the quality of these widgets given the price but they’re actually super durable”) being the most effective.

Component 5: FAQs




General FAQs included on the Purdy & Figg homepage



Following on from the objections point above, it’s very important your landing page works to alleviate any common questions or concerns customers may have.


FAQs aren’t there to take the pressure off your customer service team; they’re there to minimise friction in the purchase consideration process. If a customer has a concern, this concern should be responded to immediately so as to avoid abandonment.


One good way of doing this is splitting your FAQs into categories and then placing these smaller, category-oriented lists in the most relevant place on the website.


For example, if you’re highlighting your product’s green credentials in a specific section on the landing page, put all environment-related FAQs within this section. On your product display page (PDP), address any concerns a customer may have around payment and delivery.

Summary





To summarise, the first 5(/10) components of high-converting landing pages are as follows:


  1. A strong hero section

  2. Focused CTAs

  3. Concise, benefit-oriented copy

  4. Social proof

  5. FAQs


Try and review your own website against these 5 points and see what needs changing. If you’d like some help in doing so, please get in touch via our Contact page.