Nail the Top of Your Landing Page for Surprising Results [VIDEO]

The long-scrolling flat style landing page is all the rage this year. This style of landing page suffers from some problems, however.

  • Large background images slow load time.
  • Information is presented in small bites. Sometimes more copy is needed.
  • Banded sections often look like the bottom of the page, reducing scrolling.

With the right approach, you can make these pages high-converting landing pages. Here’s how.

In my recent CrazyEgg Webinar How to Reverse-Engineer a High-Conversion Landing Page, I reviewed twelve landing pages using my “backward landing page” framework.

One stood out.

Here’s an excerpt of that presentation featuring the Body Language for Entrepreneurs landing page from Udemy.


21 Quick and Easy CRO Copywriting Hacks to Skyrocket Conversions

21 Quick and Easy CRO Copywriting Hacks

Keep these proven copywriting hacks in mind to make your copy convert.

  • 43 Pages with Examples
  • Assumptive Phrasing
  • "We" vs. "You"
  • Pattern Interrupts
  • The Power of Three
  • This field is for validation purposes and should be left unchanged.


Nail the Top of the Landing Page

The purpose of the top of the page is to give the visitor reasons to explore the rest of the page. It’s the headline, the offer and the hook for the page.

Include all Supporting Components

Five components and one contaminant to avoid in a landing page.

Five components and one contaminant to avoid in a landing page.

There are five basic components – Offer, Form, Proof, Trust and Image – and one contaminant to avoid (Abandon) in a landing page, which I outline in the CrazyEgg video.

The Body Language for Entrepreneurs includes all of them at the top, with no opportunities to abandon, such as social media icons, site navigation, or search.

Offer

Your offer is the promise and pricing that this page provides a visitor. A complete offer is perhaps the most critical element of the landing page equation.
image

image

Form

The landing page should quickly make it clear that the visitor can take action to get closer to solving their problem. The form should have a way to act and an effective call to action.

The call to action should answer the question, “What will happen if I complete the form and click the button?”
image

Proof

Support the claims made in your value proposition with proof.
image

Trust

Building trust builds credibility and authority. Your logo plays a role on a landing page: a trust-building role.
Often symbols can be used to borrow trust from other entities. This is what Body Language for Entrepreneurs did.
image
image

Image

A lot of space was dedicated to red buildings in this theme.

A lot of space was dedicated to red buildings in this theme.

If you’re going to slow the load speed of your landing page with a big background image, you better make it count. Designers like to use stylish backgrounds for effect. That’s fine, but not on a landing page.

Images should advance the value proposition. In the Body Language for Entrepreneurs landing page, they show the presenter. That’s relevant. Will I enjoy spending five hours with this person? Do they look credible? It’s all answered with the background image?

Nail the top of the landing page for incredible results.

Furthermore, they use video, which is image at 30 frames per second. Consider video if you don’t have an effective image that explains your value proposition.

Abandon

There is only one link in the upper area of the Body Language for Entrepreneurs page. It lets the visitor see all of the 56 reviews in the Proof section.

It actually doesn’t qualify as Abandon because it opens in a popover window. The visitor never leaves the page. Very smart.
The Udemy logo is NOT linked. Very smart.

Keep the visitors you paid good money to acquire. Don’t send them elsewhere or they will be gone forever.

Does This Design Really Work?

I asked Adam Treister, Growth Marketing Manager at Udemy to tell me how he arrived at this design and how this page was performing for him.

It was no accident.

Adam documents the process in his excellent Udemy course User Experience Design: The Accelerated UX Course.

The original page looked like this:

The original Udemy landing page for ad traffic

The original Udemy landing page for ad traffic.

After several iterations using UserTesting.com, VerifyApp.com, Google Consumer Surveys, and CrazyEgg, they tested the profile photo using PickFu.com. Finally, Adam’s team did a split test using Optimizely.

How did this process work for them? They saw a 246% increase in clicks with the new page. That’s not a typo.

Why This Might Not Work on Your Landing Pages

Every audience is different. They have different goals, needs for information, and are coming on a variety of different platforms. Images and words are powerful

The best way to ensure that your landing page works is to test the components: Offer, Form, Proof, Trust, and Image.

If your landing page is generating at least 150 transactions a month, Conversion Sciences will provide the complete testing team to find the highest-converting combination. Get a complete testing team for the price of a part-time employee.

Request a consultation and we’ll let you know how to make your landing pages surprise you.
Brian Massey

Brian Massey
9 replies
  1. Thomas Lerch says:

    Hey Brian,
    I think this increase of the 246 % in clicks also has to do that the “basic” Udemy course pages weren’t that good. They were really messy and as a customer you were overwhelmed because general content, reviews, it was all over the place and way to little white space in between

    Reply

Trackbacks & Pingbacks

  1. […] Brian Massey’s article, “Nail the Top of Your Landing Page for Surprising Results” covers exactly what makes a high quality landing page just that, and is accompanied by an hour long analysis of a handful of pages both good and bad. This article and video combine into an incredibly valuable resource for any designer and marketer alike. His article breaks down any landing page into five basic components (Offer, Form, Proof, Trust, and Image) and one contaminant (Abandon) which allow the sites to be easily analyzed for optimization. He goes far more in depth into each one in his article, and his video provides multiple examples of using the technique to properly breakdown sites into what does and doesn’t work. If you’re curious how your landing page might measure up against Massey’s analysis, check out his article at this link! […]

  2. […] Udemy did this with one of their landing pages before doing a formal split test and saw a  246-percent increase in clicks. […]

  3. […] Udemy did this with one of their landing pages before doing a formal split test and saw a  246-percent increase in clicks. […]

  4. […] This landing page delivered a strong value proposition in above the fold. See the full case study and video. […]

  5. […] We will prepare a live presentation or webinar on hot topics. These presentations get cast into case studies, blog posts, reports and social media […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *