Anatomy of a Successful Landing Page

by in Design on 15th Aug 2012 · Comments

So you have spent loads of time and possibly money driving traffic to your awesome site selling your products or services, but you aren’t getting enough leads. Your website is drop dead cool and your products are definitely worth buying, so what’s the deal? Well, it means that your conversion rate is low, which you already know. This could be a result of a number of things.

Visitors may not know how to buy your product or service, they may not know exactly what you do, or they may simply just need you to tell them what they need to do in order to acquire your services. How do you fix this problem, you ask? You, my friend, need a landing page.

Anatomy of a Successful Landing Page

Anatomy of a Successful Landing Page

Okay, so what is a landing page exactly?

Essentially, it is a spotlight on one specific item that you want to sell. It is a stand-alone page on your website that has one sole purpose of converting visitors into customers. Usually it breaks the mold of your website because it are so self-sufficient. It will also typically contain some sort of navigation, which could be your regular navigation or specific to the landing page. That sounds cool, you say? Alright then, let me show you where to begin.

One page, one purpose

The first thing you want to be sure of before creating your landing page, is what you are creating it for. You must be able to explain the purpose of the entire page within your headline. If you feel that you have more than one point to get across, then you are going to need more than one landing page.

Your page should be totally devoted to selling one item and one item only. Decide what this item is, what your deal might be, then begin writing a headline. It should be clear, concise and to the point. No frills or witty humor (unless it still gets the point across, but usually it won’t). The visitor needs to know exactly what the whole page is about in the first five seconds of viewing the page.

Headline Example

The KISS method: Keep it Simple Stupid

When writing supportive copy for your landing page, keeping it simple and straight to the point is the most important thing you can think about. Don’t overwhelm the visitor with too many points and big long sales-y words. That will scare them off in an instant and then your whole goal has failed. Write what you would like to say and then cut that amount in half. Now keep cutting it in half after that until you feel like it’s the least amount of words you can say to still get your point across.

Ask yourself, “What can my product or service do for my potential customer? What are the benefits for them?

Copy Example

Format your copy in ways that visitors can scan it easily and quickly and grasp the main points. Use bullets, numbered lists, bold, italics, or break it into small sections with titles. Anything that keeps it from being a giant boring block of text that nobody wants to read.

People want to see results

Don’t just tell your customers how happy they will be doing business with you; show them. Include testimonials of happy customers. Keep them brief to guarantee that they will actually be read. You can also include a list (or logos if they are recognizable) of your past clients. This will give the visitor a sense of trust and validation in your business.

Results Example

THE Most important part of a landing page

The CTA (call to action) is a very crucial key to producing results. Everything else on the page supports this one step you want the user to take. Your page can be masterfully designed in all the right ways with all the right copy, but if your visitor is confused as to what they should do next, they will bounce quicker than a kangaroo right off your page, just like that.

Call To Action Example

Your CTA can be a number of things: a form, button, link, payment, etc. What it shouldn’t be is confusing. Make it stand out with a contrasting color. Make your form as easy as humanly possible to fill out and press submit. Keep everything as straightforward and as truthful as you can.

When someone clicks a button, the text on the button should tell him or her exactly what will happen when they do. Spell out what you want them to do very clearly as if giving instructions to a toddler. Don’t be clever and make them have to figure it out. You want them to instantly know exactly what they should do next without having to think about it.

Besides your main CTA, you can also include a backup or safety net CTA for those visitors that aren’t quite ready to pull out their wallet. Ask them to join you on Facebook or follow on Twitter so that you can possibly build that relationship later and keep your business in their thoughts.

Pretty it up

The overall design of your landing page is another thing to consider carefully. Don’t overcrowd it with all the bells and whistles, don’t use too much of one color and try using some interesting content that supports your product creatively.

When using pictures, make sure that the picture is supporting your product well. Include someone who is physically using the product, or happy with their service. Don’t just stick a product shot up there. Show your visitors what it would be like if they take the next step. This is called the ‘hero shot’.

Quick tip: When using images of people, try using photos that have the person or people actually looking in the direction of your call to action. This will help encourage the visitor to follow through and draws their eyes to the most important part of your page.

Eyesight Example

Try using interesting media like animation or video. If done correctly, these help get the visitor excited and interested – possibly enough to take the next step. Don’t however, use images, videos and too many things that will cause the visitor to back away. Keep it to one medium.

When designing your page, also remember that the design should be consistent with that of your ad that attracted the visitor, or any thank you pages to follow.

Location, location, location

Think about positioning above the fold. Make sure that all of the most important things – like the CTA and headline of course – are near the top of the page so that they cannot be missed. If your page requires scrolling, be sure you don’t unintentionally create a ‘false bottom’. Make it obvious that there is more information down further. It also helps to create sections if your page will be scrollable to break up the information so it’s easier to digest, and don’t forget to repeat your CTA at various points throughout.

Scrollable Example

THE MOST important step to success

I know I already said the CTA is the most important, but testing is another step to success that you should not take lightly. Test everything as much as you can. When I say test everything, I mean make slightly different versions of your landing page (maybe two or three) and change things on it one at a time.

Test two different headlines and track your conversion rates to see which one your visitors respond to. Test your CTA, your copy, everything. “Email me” and “Contact me” can have drastically different affects on your audience. This is called ‘A/B testing’. But make sure you are keeping track of what works and what doesn’t; testing doesn’t mean anything without the data that comes out of it.

Now take these techniques, and go makes some kick-butt landing pages

Now that you know the basic anatomy of a landing page, go out there and turn them into successful conversions for your business! There are no magical templates that you can plop your information into and they will be guaranteed to work. You have to build it according to your own business and what exactly you are trying to sell. Then you need to test it until you get it right – and keep testing because your goal is to continue turning out a higher conversion rate with every test you make.

Your conversion rate will never be 100%, so testing is an ongoing area of improvement that will keep your landing page working for you for a long time.

Landing Page Showcase

I have also compiled for you a list of 25 of the most successful landing pages on the internet at this time. Notice that I begin with Google’s homepage. Think about it, Google has the most successful landing page out there. Sure, it’s so successful because well, it’s Google, everyone uses Google. But think about it in comparison to MSN’s homepage, or Yahoo’s. It’s not full of ads and news, just a simple search box with a menu across the top – the makings of a brilliant landing page.

Google
Google

99 Designs
99 Designs

Bundlr
Bundlr

Creative Market
Creative Market

Flavors.Me
Flavors.Me

Journnl
Journnl

Klout
Klout

Moocup
Moocup

Shall I Buy?
Shall I Buy?

Square Up
Square Up

Dribbblr
Dribbblr

Wufoo
Wufoo

Club Divot
Club Divot

Elegant Themes
Elegant Themes

Groupon
Groupon

FireFly
FireFly

Manpacks
Manpacks

Firefox
Firefox

NCover
NCover

Planties
Planties

Traffik
Traffik

Striim
Striim

TapMonkeys
TapMonkeys

The Pink Penguin
The Pink Penguin

Uploadify
Uploadify

Conclusion

So many companies spend ridiculous amounts of money driving traffic to their website, but next to zero money is spent on converting that traffic. So get your landing page out there and convert that hard earned traffic into hard earned cash!

Do you have a successful landing page design? Share you opinions and links with us in the comments section below.

Amy Nokinsky is a graphic designer/motion graphic artist/developer/SEO consultant from Calgary, Alberta, Canada. She likes wearing her many hats, and has worked in quite a few different industries that give those hats a rightful claim on her head! She is also a huge nerd and black coffee lover.