How-To's

How to Design a Landing Page that Converts

Landing pages have a single goal: convert user from curiosity to an actual sale.
Google+ Pinterest LinkedIn Tumblr

Every experienced marketer know’s that the most important part of your website is your landing page.

However, just because they’re important doesn’t mean that that marketers understand how to design landing pages that convert prospects (leads) into real customers.

So what’s the secret? There isn’t one. But there is a process that includes several different elements that can take your landing pages to the next level.

Let’s dive into the keys to designing landing pages that convert from start to finish.

What Is a Landing Page?

Simply put, a landing page can be defined as a standalone web page created specifically for a marketing/advertising campaign.  Unlike other pages on your site, this one has a single purpose and focus. Essentially, it’s a page built apart from your normal website, and it uses the right offer and persuasive elements for the sole purpose of directing the user to perform a specific action or task.

Landing pages have a single purpose and focus that directs the customer to single CTA (call-to-action)

 

geico landing page

A great example is this Geico landing page. Its simple call to action stays on brand and gives the reader only one choice: “Begin a Quote”. The logo is not hyperlinked, so the user really has no exit points. They either follow the simple and catchy CTA or they leave the page.

Your landing page will have just a few elements:

  • A headline that speaks to the offer
  • Some persuasive language explaining the value of the offer
  • And a clear CTA that allows the user to get the offer

Important to take note there are no links to your homepage, blog or other navigation (menu) options that are usually on your other website pages. Any images will be relevant and, ideally, show your product in action.

The Moz landing page is another great example. It contains a relevant image that shows what using the product will be like, a CTA button that stands out, and social proof at the bottom that encourages the user to follow through.

moz landing page

A landing page is designed to be simple and to the point, leading the reader who landed on it to take one specific action – in this case, to provide their email address in exchange for Moz’ e-book.

Other variations of landing pages can also lead a person to make a direct purchase or even just a call to your business.

How to Create and Design Landing Pages

Here are a few things you should consider before building a landing page:

  • Great Templates: Templates should be easy to use and edit, and visually appealing, so if a landing page builder does not have these, move on.
    Some great landing page quick start builders: Instapage, UnBounce, landingi and obviously WordPress themes and templates.
  • Mobile Optimized: This should go without saying. Depending on who you ask and your customer base, about 50% of searches are done on mobile devices. A landing page that is not optimized for every device is useless.
  • Integrations: What good is a lead if you can’t do anything with it? Your landing page builder needs to integrate with lead nurturing software and your CRM tool; MailChimp, Salesforce.
  • Testing Ability: Where you will spend most of your time is testing your landing pages.  We will get into more detail below on A/B testing, but without the ability to edit your site on the fly and test out different designs, you’ll never be able to squeeze the most juice out of your landing page.

Before you design anything, remove all navigation!

You may be scratching your head and asking: Why remove the navigation elements from your landing pages? Don’t you want users to explore your website? Well, no. In fact, leaving navigation elements on your landing page will kill your conversion rates.

A landing page has one purpose, and that is to get the user to take a single action –the reason you created both the campaign and the landing page itself. By giving users other choices, you are reducing the likelihood that they will convert. People are easily distracted.

Two simple reasons for removing the website menu from your landing page:

  • Every page on your website has a different purpose, and that purpose may have nothing to do with the campaign you are running.
  • PPC (Paid Per Click) ads cost you money. If someone clicks away from your landing page using your navigation elements, that click actually costs you money.

Links are a potential distraction. The user has come to your landing page for a reason. The only options they need are to either perform the action you want them to or to close the page. If you’ve done everything right, the user will not even be tempted to take the second route.

Write a Spectacular Headline

Now that we’ve covered what you need to remove, let’s see what a good landing page includes. Think about the ads and headlines you see every day. Which ones compel you to click on them? Most of the time, they have the same elements.

  • They are specific. They describe a single product or service, not a brand.
  • They are brief. Think short, sweet and to the point.
  • They offer a solution. The product/service described is desirable to the target audience, and because the headline outlined their want or need well, the prospect clicked.

Example:

Square keeps it simple also includes customer paint points outside of the company; mobile payment system and access to free hardware to accept credit cards on the go.

squareup 1

Here is another great one from Contently: “Make Content that Matters.” This might be an easy sell because every brand wants content that matters, but they include social proof that Fortune 500 brands use it and provide a demo.

contently

Finally, here is another great headline from Evernote: “Remember Everything”. We all live in a fast-paced world where it is easy to forget things and this meaningful headline and simple solution grabs the reader’s attention.

evernote

On the flip side, look at this awful headline from the post office: “Still Relevant: A Look at How Millennials Respond to Direct Mail“. It reads more like a newspaper article or blog post title:

worst landing page designs ever 6png

Be sure that the words you use encourage positive action. Rather than “Stop Wasting Money and Missing Tax Deductions,” Quickbooks used “Get Organized, Save Time, and Find Tax Savings,” which creates greater conversion rates through words that inspire action rather than stopping action.

Headlines that generate highest conversion rates use words that inspire action rather than stopping action

The only purpose of the Headline is encourage the user to stay on the page and click on you call to action (CTA).

Presentation of Your Headline

How you present your headline also matters.

Contrast

White text on a dark background or dark colour text on a white background help the headline pop and draw the eye to it. Different colours promote different emotional reactions from users, and you can use that to your advantage when designing your landing page.

Color Psychology

Red means danger, strength, power and passion, and can “stimulate quick decision making” in a user. On the other hand, blue symbolizes trust, loyalty, confidence and truth, and is thus better for enticing that same user to take a yoga class or a vacation in Mexico. Orange, which is popular with the younger generation, is associated with creativity, determination, encouragement and stimulation, and is suitable for marketing children’s toys.

There are other elements that go into headlines as well, such as the font you use: “Don’t underestimate the power of picking the right font design and it’s deep psychological impact it has on your visitors. Experienced designers understand this and pick their fonts very carefully and deliberately.”

Like colours, the typography (font) of your landing site also has an emotional/psychological effect on the reader:

Psychology Behind Typeface

Punctuation and grammar is also important, as one small mistake can alter the entire meaning of your words (and save people’s lives!):

daily picdump 550 640 09

This also raises the need for proofreading. Have people who are not in your marketing department go over your headlines and copy, looking for errors. This can save you some potential embarrassment and the cost of recreating those pages.

Persuasive Subheads

Every headline should have a persuasive subhead. These need to have the same positive message as your headline, but they can be longer. They should also be in more of a sentence format so they can offer additional information.

Basically, the subheadline is designed to do two simple things:

  • Expand on the main headline
  • Offer more details or more incentive for the user to take action

Let’s use the Quickbooks example above. Following “Get Organized, Save Time, and Find Tax Savings,” the landing page subhead is as follows: “Customers find on average $3,534 in tax savings per year.” This sentence expands on the last half of the headline and offers something of value to the user.

Note that the headline and subheadline are always above the fold (the first thing that the user sees), and both help justify the user’s click on your CTA, like this Mediumpage:

Medium

Persuasive and well-written subheads inspire users to keep scrolling to the other parts of your landing page — the place where they take action.

Social Proof

One of the other essential elements of a landing page is social proof, which is designed to prove through testimony that the claims in your headline and subheadline are true. Social proof can consist of one or more of the following elements:

  • Customer testimonials: Direct quotes from customers about their experience with your product or service.
  • Industry awards: Accolades and recognition from various sources, including local business, your industry, and general business awards.
  • Customer reviews and ratings: Can be from various sources from Google and Yelp reviews to your own website.
  • Logos of companies you have worked with: These should include name brands and businesses that your audience will recognize.
  • Download or customer counters: The number of times someone has downloaded your offer or the number of customers you have. This should be an active counter, measuring changes as they happen.

Social proof can also be included in other text and rather than set apart in a special area of your page. “Customers find on average $3,534 in tax savings per year” offers social proof in the subheading, and since Quickbooks is well known and used by a lot of businesses, they have some trust built in.

That is what social proof is: Letting your leads know they can trust you, meet their needs and fulfill the promises you have made.

Relevant Pictures

The top section of your landing page is often called the “hero section”, and it’s where the potential lead/customer sees your product meeting their needs or wants. Hero photos need to be relevant and show your product or service in action.

A great example is PayPal invoicing. Clicking on the advertisement user to a page where you see an invoice on a mobile device and on a tablet. This photo alone supports the text on the page by showing that you can create and send invoices in their app or on your tablet (or smartphone or laptop, presumably).

Screen Shot 2019 05 31 at 10.22.58 AM

The photo is not only relevant, but it shows the product that’s offered in the ad in action.

However, that doesn’t mean that a beautiful photo won’t work as well. If you look at Airbnb Seattle, the photo is of a comfortable home that anyone would be happy to stay in. It’s relevant to the service they offer, but it doesn’t detract from the overall purpose of the landing page: to get you to book a stay in Seattle.

Screen Shot 2019 05 31 at 10.28.34 AM

Forms of Contact

When it comes to adding ways of contact on your landing page, best to keep it simple: contact form, email address or phone number.

Of course, the method of contact you use will depend on your offer and the action you want the user to take. The best practice is to provide only one method of contact per landing page. A/B Testing will help you determine which contact method generates the best results, and is pretty easy to control with the right tools.

A Powerful Call to Action (CTA)

A powerful and simple call to action can make all the difference in your conversion rates.

Below is a page from Hootsuite with two simple CTA’s, the headline and the box at the top right of the page, “Special Offer – Get 60 Days Free.”form Hootsuite 1024x631

This encourages prospects to click on the green “Get Started” CTA button. It’s very clear and will not cost the leads anything. You can also include a sense of urgency simply by adding the words “For a limited time.”

How did they settle on this call to action, and not another one? By testing it.

A/B Test Your Landing Page

You must test your landing pages. How? It’s easy. In your landing page builder, create several final lines and calls to action, and see which ones perform better. Be sure that your A/B test is testing one element, though – a single outcome you want from potential leads when they click on your ad. If you test more than one element, you won’t be sure which element made the difference in better conversions.

The same can be said for headlines, subheadings, and even the format of your pages.

Remember the example of Square. They might test two different headlines and page formats. They might start with this one, which looks simple enough, and the headline is okay, but a little soft and vague:

Square

Using the same image, they could test this landing page with a different headline and CTA and a subhead:

squareup

In the second trial, the headline is much stronger and gives more of a sense of urgency. Running these two landing pages in the same campaign looking for the same result will tell them a lot about what drives conversion.

There are other things that could be tested, too. Changing the colour of the call to action button to make it pop, using a different image, and even playing with colour choices are all options that will determine future campaign landing page designs.

It is actually good to have some pages that fail because they inform your future marketing decisions about what not to do and what does not work for your target audience. A/B testing is essentially gathering information so that you can make data-driven decisions going forward rather than just guessing or putting landing pages out there that you like or that feel right to you. Those feelings do not always coincide with results or conversion.

The key is not to stop there. A/B testing should be constant, refining your ads until you truly have achieved a landing page design that converts.

How It Works

How does all this work together? Let’s look at how a well-designed landing page designed to convert works from ad to action.

  • The lead clicks on your ad – let’s say it’s this GEICO Google ad on the search results page:

Screen Shot 2019 06 07 at 8.22.33 AM

  • The headline on the landing page fulfills the promise of the ad and identifies who you are. Notice that in this case the headline also serves as a call to action on a very simple but effective landing page.

Screen Shot 2019 06 07 at 8.23.05 AM

  • The subheading expands on the headline and offers another incentive to click.
  • Photos are relevant and show the product in action: Happy people driving in a convertible, relaxed and at ease because they know they are protected with good car insurance.
  • An optimized form is easy for prospects to fill out and submit. In this case, the user simply enters a zip code.
  • The call to action, “Get a Quote,” gives them a sense of urgency or is simple to follow.

Conclusion

Landing pages have a single goal: to fulfill the promise of your ad or social media post that the user initially clicked on and get them to convert from curiosity to an actual sale. That’s it.

Easiest way to start is with a spectacular headline and persuasive subheading. Everything else, from social proof to relevant photos to guarantees, support those headings and subheads and bring users to your powerful call to action. The sense of urgency you have created compels them to click on your offer.

Finally, you must A/B test your landing pages to see which design, which format, which headline and which call to action will give you the best results from your campaign.