5 Landing page design lessons we learned from analyzing a ton of data

Today's guest post comes from Nick Steeves, Chief Product Officer of Wishpond. Enjoy!

No matter how much experience you have, there's always something new to learn.

Recently I felt due for a refresher on landing page design.

So I spent a few weeks scouring the web and our own test results from Wishpond from the past few years to find out what converts best.

And after analyzing that data, I learned five lessons that I’m going to share with you in this post.

1. Make the call-to-action obvious

You need to make it dead simple for visitors to figure out what to do on your landing page. Here are the rules that we follow when designing our form and CTA buttons:

Add a form title and CTA button that tells visitors what they’ll get

A great CTA will make it obvious what people are going to get. If your landing page has a form for booking an appointment, for example, the button could read “Book Appointment” rather than something more generic (like “Submit”).

Generic CTAs don’t tell your users anything about what will happen next. And clarity leads to conversions.

Conversion optimization consultant Michael Aagaard utilized this rule to increase Betting Expert’s landing page conversion rate by 31.54%.

Keep it above the fold

If users can’t determine what action to take just by quickly looking at the page, they may get confused and leave. Keeping your CTA above the fold is a great way to assure users will immediately know what to do.

This goes for mobile, too. If you’re using a mobile-responsive landing page (which I hope you are!) then make sure your CTA appears above the fold on a mobile devices as well.

Generally speaking, most mobile-responsive landing pages are built on a grid system, in which content stacks on top of each other when viewed on mobile.

The content on the left side of the page will always stack on top of the content of the right side of the page. So if you keep your CTA on the left-side of your page, it will generally show above the fold on a mobile device as well.

Use a ton of white space

If you want to make sure your CTA stands out on the page (and prevent it from blending into the rest of the page content), keep it isolated with a lot of surrounding white space.

Use contrast to make your CTA buttons impossible to miss

An ‘easy win’ to make your CTA button stand out is to give it a unique color—one that contrasts with the background of the page. This will immediately draw attention to it.

At Wishpond, for example, we use orange buttons on a blue background. Notice where your eyes are drawn when you look at our landing page:

2. Use images that show visitors what they’ll achieve

A generic stock photo of a “Smiling Professional Woman” doesn’t give visitors any information to help them better understand your product.

Instead, use photos and video to show a person achieving a goal using your product.

For example, if you’re selling a cleaning service, you could show a person sitting in a freshly-cleaned apartment. Or if you sell a B2B software app, you could show an analytics graph going up over time.

This makes it easier for people to see your product or service as the solution to their problem in their mind.

The image below from Human Touch instantly makes you imagine the relaxed, comfortable feeling that you would expect from a great reclining chair:

But make sure not to skimp on quality. Invest in clean, high-quality images to build trust. Because as conversion optimization expert Peep Laja wrote:

People quickly evaluate a site by visual design alone. Amateur-looking websites kill trust.

3. Use specific customer testimonials

Customer testimonials allow your visitors to get a second opinion of your product right on the page.

And they make it easier for visitors to imagine how your product can solve their problem.

But they work best when they give some context into how they used your product, what they liked about it, and (best of all) what results they achieved by using it.

This will serve the dual purpose of giving your product credibility and answering questions that visitors are likely to have when they are getting ready to buy, such as:

• What are some ways you can use it?
• What makes it better than its competitors?
• What results have other people gotten?

One great example of this is a case study from Buildium, a property management software company.

They wanted to see whether they could increase conversions by displaying testimonials from small, medium, and large property managers that communicated that Buildium works great no matter how many units you manage.

Their hypothesis was correct: showing testimonials from small, medium, and large property managers (and how many properties they manage) led to a 22% lift in their conversion rate.

4. Make it easy to skim

People don’t read online, they skim to find the information they’re looking for.

Jakob Nielson found that “the most common behavior [of website visitors] is to hunt for information and be ruthless in ignoring details. But once the prey has been caught, users will sometimes dive in more deeply. Thus, Web content needs to support both aspects of information access: foraging and consumption. Text needs to be scannable, but it also needs to provide the answers users seek.”

[clickToTweet tweet="Text needs to be scannable, but it also needs to provide the answers users seek. - @nngroup" quote="Text needs to be scannable, but it also needs to provide the answers users seek. - @nngroup"]

This basically means that you want to make it easy for users to skim to find the information they’re looking for, and also provide a decent level of detail.

Sound like an oxymoron, right? Well, you can do this by using an extended benefits list. This is a list in which each chunk of information has:

• A large, bolded title that describes a benefit or feature
• Smaller sub-text below it explaining it in detail

Here’s an example of how this looks in practice:

Remember: you don’t have to sell your offer as the be-all-end-all

When a person clicks on your Facebook or Google Ad and is taken to your landing page, they are just looking for the first solution that meets their needs. You want to convey that your solution meets their requirements as quickly as possible to get them to convert.

The longer it takes for you to explain it, the more likely it is that visitors will leave your page before you are done convincing them.

5. Don’t let sales requirements supercede your conversion rate

Sales teams often require a lot of information about a potential lead. But that doesn't mean you need to ask for all of that information at once.

If your forms are too long, it will deter people from converting on your landing page.

Personally, if I land on a page with more than six fields, I’ll bounce no matter what the offer is. I just get too annoyed by the prospect of doing that much typing.

Don’t ask for everything all at once

It takes seven touch points, on average, for a lead to become qualified for sales. So instead of trying to get all of the information you want up front, spread it out over several different touch points.

• In your first touch point, just ask for name and email address
• In your second, ask for phone number, company name, and industry
• In your third, ask for company size, annual revenue, and so on

You can do this easily by using a technique called progressive profiling. It allows you to change which fields are displayed on your website’s forms depending on what information you have on each visitor.

Check out this article from Lead Lizard to learn more about progressive profiling.

The final word

Have you already tested any of these techniques? If so, how well did they convert? Let us know on Twitter, Facebook, or Linkedin!

And I’d also like share with you this infographic from Wishpond I created. It breaks down 14 actionable techniques for designing your landing page.