10 Steps for Designing the Perfect Website Landing Page

Paul Boag

So you have been asked to design a website landing page that encourages users to take action? In this post, I outline the approach I use to ensure results.

Whether you are a digital marketer or a UI designer, sometimes it can feel like people expect miracles from us. They want us to boost conversion through compelling copy or gorgeous design with the wave of some magical wand.

But with over 23 years of experience in the field, I can tell you that I still do not know what makes people take action on a website. But, I do at least have a methodology that will result in a website landing page that will convert. It is this methodology we need to use, and more importantly, introduce our stakeholders to.

So without further ado, let’s jump in.

1. Define What Makes Successful Website Landing Page 

Before I can create a website landing page that is a conversion machine, I first need to define what conversion looks like. You would think this was a straightforward matter and too obvious to mention. However, in my experience, that is rarely the case.

Sure, on face value the call to action for a website landing page may seem obvious. It may be to sign up for a newsletter, complete a contact us form or buy a product. But is that all? All too often stakeholders start adding in other calls to action.

How many Ecommerce sites have you visited which are supposedly trying to persuade you to buy, only to display a newsletter sign up overlay the minute you arrive on the website?

Newsletter signup overlay on a website landing page
Too often we can distract users from primary calls to action like buying, with secondary actions such as signing up for a newsletter.

Or what about those sites who want you to contact them, but then distract you with requests to share content on social media or follow them on Twitter.

To design a website landing page that converts I need to have a laser focus. I need to be one hundred per cent sure what I want users to do and not get distracted by secondary calls to action.

Also, I don’t want just anybody to fill in my contact form or sign up to my newsletter. I need the right type of person. That is another criteria that define what success looks like and that is why identifying my audience is so crucial.

2. Identify Who You Are Trying to Reach

I cannot create an effective website landing page unless I have a crystal clear picture of who I am trying to reach. Too often target audiences are too woolly and too wide. If I decide to appeal to everybody, I will inevitably appeal to nobody.

Different people will be motivated to act by different things, and if I am trying to appeal to a broad, poorly defined audience, I cannot hope to tailor the message sufficiently to be effective.

In short, when it comes to creating a compelling website landing page, the more specific your audience is, the better. That is why one to one sales is so persuasive. It allows the salesperson to tailor what they say to the specific person they are speaking to.

I might not be able to go that far, but the narrower I am in targeting my landing page, the more effective it will be. That is why a large number of website landing pages is always going to be more successful than a single homepage.

Once I have a clearly defined audience, I can look at their journey and tailor the website landing page accordingly.

3. Understand the User’s Journey

When it comes to a successful website landing page context is everything. How the user arrived on a landing page can make an enormous difference to the design of that website landing page.

For example, a user arriving via a Google search will have very little knowledge about your offering compared to a user who has first read one of your blog posts.

Our website landing page should be tailored not just for the specific audience, but also based on what that user’s experience was that led them to end up on the page.

Then there is the question of what happens after the user has left the website landing page. If a salesperson will contact the user, the website landing page only needs to convince the user to hand across contact details. It doesn’t need to work that hard because the salesperson will do most of the work.

However, if the rest of the process is automatic, the website landing page needs to reassure and motivate the user to ensure they do not suffer from buyers remorse.

Only once I have understood this kind of context for the landing page can I start to consider its messaging.

4. Outline the Benefits and Features

With my objectives, audience and their context front and centre in my mind, I can start to think about the messaging for my website landing page.

When I start writing copy for a website landing page I need to start with communicating two things; the offering’s features and benefits.

Example of the newsletter sign up form on this website.
The copy associated with my newsletter signup form outlines what benefits and features the user will get.

Take for example the newsletter I offer on this blog. The benefit of signing up is that it enables you to “become an expert in user experience”. The features of the newsletter, on the other hand, are that:

Every two weeks you will receive advice on improving your digital strategy, evolving your web presence and meeting the needs of connected consumers.

Features focus on what you will get, while benefits are how that thing will help you.

It is important that as I write the copy for my website landing page, it communicates both benefits and features.

However, features and benefits are not the only things my copy needs to address.

5. Address User Objections

People don’t like taking risks. That means when confronted with an offer, we will look for the risks involved in acting and identify objections in our minds.

One of the most important jobs of any website landing page is to address any concerns a user might have systematically. That is an approach salespeople call objection handling.

Once I have completed steps one to four above, I tend to sit down and write a list of all of the objections I can think of which would stop users from acting. In fact, in some cases, I will even run a survey to find out what they could be.

Website landing page for a masterclass on conversion optimisation.
Sometimes it is worth asking users directly why they are not taking action.

With that knowledge, I then ensure that my website landing page addresses those objections either directly or indirectly.

For example, an outstanding return policy can address a whole range of concerns such as:

  • What if the quality is poor.
  • What if it isn’t a good fit for me.
  • What if I change my mind.

Note that you cannot address all concerns with some clever copy. Sometimes you need to change the way you do business, like offering a better return policy.

Together with benefits and features, a compelling list of counter-objections will ensure that your website landing page is as convincing as possible. But to encourage users to take action, they need to understand what you want them to do.

6. Be Clear About Your Call to Action

I have already flagged the danger of having competing objectives. If the user is being asked to share on social media, sign up for a newsletter and buy a product, they can quickly be overwhelmed and fail to act.

But it is also surprising how often I encounter websites that don’t make it clear to users specifically how they should take action.

Before I start designing a site, I first look in detail at what the call to action is and how it will work. I want to ensure that what I am asking from users is as simple and obvious as possible.

I think carefully about the wording to ensure it is evident not only what people should do, but that I want them to do it now.

I also work hard to simplify what is involved in acting by removing any unnecessary fields and ensuring it is going to be obvious on the page.

Finally, I think about where on the page it will be placed. There is a tendency to push our call to action immediately on users arriving on a website landing page. However, users are rarely ready to act straight away. I need to pick the moment, and that means I need to think about where I will place the call to action in the flow of my messaging.

One method I use to decide on where I will place the call to action in the flow of the page is to think about the design of the mobile experience first.

7. Start with Mobile First

We are always being told to design mobile-first, but why exactly? In my experience, one of the biggest reasons to start with the mobile experience is it gives you an opportunity to consider the mental process a user has when they arrive on a page and how we accommodate that in our design.

For example, when a user first arrives their first question is almost always “is this relevant to me”. That means I have to start at the top of the page by clearly showing what the page is about and how its offering benefits the reader.

If that is enough to keep the user’s attention, the next thing they want to understand is the specifics. That is where I start to talk about features.

After that, it is time to deal with any concerns or objections that spring to the user’s mind. Only after all of that do I ask people to act.

By starting with the mobile design, it helps me to focus on that mental journey and prevents me from getting too distracted with composition and layout.

Once I have that in-page journey clear in my mind, then I can turn my attention to multi-column layout.

8. Adapt for Larger Devices

By the time I come to designing for larger devices, I have already done all of the hard work. Instead, the key is to not undo the good work and simplicity of the mobile version.

Because larger devices such as a desktop provide more screen real estate, it is easy to include more elements and that increases cognitive load and overwhelms the user. The result is that they will miss crucial messaging or even the call to action itself.

When designing for these larger devices, I need to consider composition, imagery and layout, ensuring I draw the eye to the right element at the right time.

Mockup of a website landing page
Composition becomes increasingly important on larger devices to ensure we draw the eye to the right element at the right time.

That can be hard to get right, and is yet another reason why testing is so necessary.

9.Test and Iterate Your Website Landing Page

The truth is I usually suck at designing website landing pages the first time, despite the fact I have been producing them for 23 years. What worked last time I created a website landing page will almost certainly not work next time. The objectives, audience and journey will all be too different.

It is almost impossible to create the highest converting website landing page on your first try. It just doesn’t work like that.

The key to a successful website landing page is constant testing and iteration. I will rigorously test any landing page I produce for both its emotional resonance and usability. Just because something looks compelling to you, does not mean it will appeal to your audience.

Most of my website landing pages go through multiple rounds of iteration before I launch them publicly, and even then the testing does not stop.

10. Launch, Monitor and Iterate Some More

Although you can do some testing before launch, the best opportunity is once you have gone live. Then you have large numbers of real users, making real decisions.

That is a fantastic opportunity to learn how people respond to your design and copy. It is your chance to A/B test, iterate and improve your site. That is where truly exceptional website landing pages are born.

The problem is that many companies still have the launch and walk away mindset. But if you do that, you will never have a website landing page that achieves its potential. It is only by observing user behaviour on your landing page and trialling different approaches will you encourage people to take action.

That is the secret of website landing page design. It is not some design technique or persuasive wording in your copy. It is about continually testing and iterating on what you have, improving its effectiveness little by little.