Website Anatomy

How to create a high-converting landing page

Goals of a landing page

Landing pages are specifically designed for a conversion of some kind, whether that's download an ebook, request a demo or sign up for an account.

Keep in mind that these types of pages especially can be the first interaction a prospect has with your brand, so unless it's a retargeting campaign, treat it as if you're explaining to someone completely from scratch and always stay on brand. This means, that even if someone doesn't convert on your landing page you can leave a lasting impression which you can build upon in the future.

Best practices of a landing page

Keep focussed on your goal

You don't want to distract your visitors from the main CTA of your landing page. Focusing on one (maximum two) CTAs with a stripped back nav bar and footer is the best approach.

Simplify nav bars and footers

A simplified nav bar with just your company logo and primary CTA helps boost conversions by keeping visitors on the page without getting distracted by the wider website.

(Example from Contractbook)

You can also opt for a simplified footer for landing pages, again with the aim of keeping people on the page.

Avoid linking out to your main site

This also means resisting including lots of links to case studies and product pages. Instead try to provide a high level overview of headline features and summarise case study impacts on the page.

Secondary calls to action (CTAs)

It's common to have two CTAs on landing pages e.g. 'Sign up now' and 'Book a demo', with one being the preferred path. If you're taking this approach, be sure to make these buttons different colours to draw more attention to your favoured CTA (a popular UI method).

(Example from Xero)

Embrace your brand identity

When it comes to designing your landing page template, be sure that alongside conversions, keep your brand in mind. If someone is coming from a sponsored social post or display ad, it would be a jarring experience to click through a beautifully designed ad to a site that is seems completely unrelated.

Also, even if someone doesn't convert on the page at the time, you'll want to leave them with a lasting impression of your brand. That way, when they might come across ads or content from you in the future, it's familiar, building up your brand recognition.

(Example from Semrush)

Match your CTA to visitor intent

The source of your traffic will indicate the intent of the visitor landing on your site. Compare the intent of someone searching for:

  1. Your brand (e.g. Mailchimp)

  2. A general term (e.g. email marketing tools)

  3. Asking a question (e.g. how to create a great welcome email)

Each will be a different stage of their buying journey. It's important to cater to this so you don't either scare them off or miss an opportunity. You'll need to weigh up whether it's more appropriate to invite to book a demo, offer a resource or encourage or sign up for an account.

There is a similar implication to someone clicking on a retargeting social/ display ad vs. someone who is being targeted fresh. 

This landing page from Mailchimp is a great example of optimising the ask. This is a landing page from a Google Search ad brand term campaign and capitalises on the high intent traffic from brand terms, prompting someone to review pricing and sign up, rather than offer up an asset.  

(Example from Mailchimp)

Don't confuse or overwhelm visitors

Your goal with a landing page is not to lay out absolutely everything you have to say, but to give enough to entice someone to convert. Avoid getting too into the weeds and focus on leading features and benefits.

Being smart with your layout and design will help with this. Your page should be easy to skim so that you leave a lasting impact ad don't overwhelm visitors with information.

Elements like bento grids, FAQs and tabs are a good way to condense information and highlight different aspects of your product/ service.

(Example from Semrush)

Avoid intrusive cookie banners

It's required in almost every case for your website to have a cookie banner, but that doesn't mean it needs to be intrusive and act as a blocker to your lovely landing page.

An intrusive cookie banner can be an off-putting first experience on a landing page and can mean your efforts will be wasted. The only solution for it is to make sure you have a user-friendly cookie banner that doesn't create a disjointed experience.

(Example from Birdie)

Key elements of a landing page

1) Hero

The goal of your hero is to hook the visitor and keep them from bouncing.The best things to include in your hero to achieve this are:

  • Headline centred around your value proposition

  • social proof (ratings, logos, awards)

  • graphics (product mockups, custom photography, not obvious stock imagery)

  • CTA (action orientated)

Your hero is the make or break for your landing page. It's how someone decides whether to stay and learn more or bounce. 

Make the most of the opportunity with a snappy headline that is centred around your value prop, clear and appealing CTAs and trust signals. Ideally include an impactful graphic that demonstrates what the product does (with some animation if you have the budget!)

This example from Hotjar does a great job of hitting on the pain points of their prospects in their copy, uses animation to visualise the product, includes ratings from popular platforms and a clear and direct CTA to sign up for free (even reducing friction with the option to sign up with Google.)

(Example from Hotjar)

2) Form

Odds are, with a landing page, you'll be wanting to collect some emails.

With your lead capture form, it's best to keep things lean and reduce friction as much as possible. Only include the form fields necessary for someone to enter the funnel, and maybe provide a brief explanation of why you need the information if they are a bit more obscure.

Also make sure your CTA is something logical, it can of course be smart but just make sure it's on topic and clear what happens when they submit.

(Example from Prismic)

3) Product/ service overview

It's always best to let people in on the secret and let them get a sneak peek of your product. By highlighting key features and the benefit they hold, you can demystify your product so your prospect has a better idea of what to expect from signing up.

Accompanying product overviews with video or imagery boosts the prospect's understanding of your product because they don't have to imagine it for themselves, so aim to incorporate these assets where possible!

(Example from Hotjar)

4) Social proof

Whether it's someone's first visit to your site or their tenth, you should always still be including social proof at any opportunity.

Social proof can come in the form of customer quote and reviews, scores and ratings, industry awards, logos or even just the number of people or companies using your service!

(Example from Xero)

5) CTAs

What's a landing page without a call to action. It's best to have CTAs dotted throughout your page and maybe have your own dedicated CTA section like Hotjar have done here with a summary of key benefits.

Things like no credit card required and free forever are particularly appealing and help reduce friction, encouraging more people to sign up.

(Example from Hotjar)

6) Comparison table

A common strategy is to bid on competitor keywords on Google. Make sure if you're running these campaigns that you support your strategy with custom landing pages to fit the need. 

Mouseflow has done a great job of this, keeping their landing page hyper focused on the difference between their offering and Hotjar's with comparison table and copy that highlights key benefits of Mouseflow over Hotjar, backing it up with industry recognition badges. 

(Example from Mouseflow)

Comparison tables can also play a valuable role even if it's not connected to one of these competitor campaigns, particularly if you're competing with old-school solutions. It's a great way to present what makes you different and set your offering apart from the rest.

(Example from Pento)

7) FAQs

A landing page is your opportunity to condense your sales pitch into one page and pack a punch. So while it's important to focus on your value proposition and leading features, it's worth considering common concerns and queries people have and address them up front. This can help ease concerns and encourage conversions.

It can help to ask someone independent to the campaign or even the company to look over the page and see if they can pick out any gaps or have any questions. 

You can use handy elements like an FAQ section so your page doesn't get too long, like Xero has done here.

(Example from Xero)

Tracking and measuring the success of your landing page

1) UTMs

When creating your campaigns, UTMs are a handy way to track your traffic. They pass details like the source of the traffic (LinkedIn, Google search, Facebook, Reddit etc.) to your analytics tools alongside additional information like the campaign that brought them there and even the specific link they clicked (e.g. in an email was it the logo or the CTA).

Creating UTMs is simple and works with all types of analytics tools whether you use Google Analytics, Plausible or Fathom. You can also pass this information to your CRM platform to be sure you're capturing which landing pages and campaigns have been performing best!

My personal favourite UTM generator is Fathom's: Fathom UTM generator

2) Conversion rate

Depending on the type of campaign and the ask, you can expect to see different conversion rates (that is the number of people who visit your page who go on to convert). If you're seeing incredible low conversion rates, it could be time to review your page and see how you can improve it.

Tools like Hotjar and FullStory are handy to see how far people are scrolling and if there are any elements of frustration. For example, if your'e seeing that people aren't scrolling far enough to reach the 'a-ha' moment, you should think about bringing it up top. If people are starting your form but not completing it, maybe there's a particular field that people don't want to answer (or is maybe bugging out!).

There's always room for experimentation with landing pages. You could consider A/B testing elements like:

  • Headline

  • Graphics

  • CTAs

  • Features highlighted

There's always room for improvement!

3) Funnel conversion

Equally if you're seeing poor conversion rates down the funnel from those booking a demo or converting to paid customers from your landing page, you might want to add more friction! Although it sounds counter-intuitive, if your sales team are being swamped with demo requests that aren't qualified you might want to assess how you can improve your landing page lead quality, such as asking for more information up front that can help qualify a prospect in or out.