I wanted to share one of my favorite landing page and web
design posts. This
YouMoz post on SEOmoz was written by Oli Gardner (Co-Founder of
Unbounce.com). Oli provides a 12
step infographic detailing how to rehab your landing pages as well
as a great 20 question landing page scorecard.
Study the 12-step infographic to see where each step in the
program should be applied to the conversion funnel.
(Click to image view full
The scorecard below can be used whether you’re using a
standalone landing page for your marketing campaigns or sending
traffic directly to a page on your website (homepage, shopping cart
or registration page) - although it is geared slightly more towards
the standalone variety.
Answer each of the 20 questions as honestly as you can and tally
the number of “Yes” responses to arrive at your score. The goal is
simply to get a ballpark sense of how good your page is. Then take
all of the “No” responses and create a “To Do List” of things to
improve on your page. You’ll find some guidance and tips for making
these improvements as you follow the 12-step program below.
(Click to view or print the full size graphic with the
complete set of 20 questions on it.)
STARTING THE 12-STEP PROGRAM
STEP 1 - Use a Separate Landing Page for each Inbound
The principles of inbound marketing are founded on facilitating
multiple streams of traffic. Examples include PPC, email, banner
ads and social media. There are two key reasons why you should be
using a separate landing page for each source:
- Each inbound medium has it’s only unique style and
limitations. Using separate pages allows you to sync up
the visual and tonal qualities with the source. Email for
instance can contain a lot more information that a tweet, so the
amount of extra information your landing page needs to communicate
is inherently different. Imagine also that one of your inbound
streams suddenly requires a different offer (perhaps a 20% discount
for an affiliate) - with only one page you would have to show this
change to all inbound sources.
- With measurement comes accountability. With
separate funnel flows, you can measure the effectiveness of each
inbound stream and focus your efforts on the one(s) that convert
STEP 2 - A/B Test Your Landing Pages
A/B testing is the process of splitting your traffic between a
series of pages to see which performs the best. Anne Holland’s
WhichTestWon.com is a fun
site that shows examples of A/B tests and lets you pick which
version you think would produce the highest conversion rate.
Some online tools/services for testing:
STEP 3 - Match Your Landing Page Message to the Upstream
If the primary headline of your landing page doesn’t match the copy
on your ad you’ll be getting a lot of action on your browser’s back
button. As an example, consider the following:
Bad message match
Ad: Get 20% off a MacBook Pro
Landing page message: Welcome to Bobby’s Computer Store
Good message match
Ad: Get 20% off a MacBook Pro
Landing page message: Get 20% off a Macbook Pro at Bobby’s Computer
Seems obvious right? The problem is that most inbound traffic gets
sent to company homepages where the messaging is necessarily
generic. Using a targeted standalone landing page is key to
reinforcing the customer’s belief that they made a “good click”.
You will also get a better quality score and thus a lower
cost-per-click from Google AdWords if your message match is strong
(this extends to the entire content on the page which should be
congruent with the headline message).
Bonus tip: If you are driving social media traffic, you can enhance
the “social message match” by including an appropriate social icon
on your landing page to further reinforce the connection between
the source and destination.
STEP 4 - Context of Use
They say a picture is worth a thousand words. A better picture is
one where your product or service is shown being used in context.
Salespeople will tell you to sell the fire, not the fire
extinguisher - the point being that you need to illustrate the need
in order to develop desire for the solution.
Effective landing pages use photography and video to provide
evidence of how your product or service solves a real
A statement like “Our vacuum cleaner is so powerful it can suck up
a bag of nails” beside a stock photo of the product against a white
background is far less likely to convert than a video showing (and
letting you hear) the vacuum cleaner actually doing the job. An
example using photography could show a fold-up ladder in two
states. Being tucked into a small cupboard by it’s owner, and then
extended to show the owner reaching onto high shelves to retrieve
something. Simply showing it in it’s intended context of use will
improve your sales.
Would you really have bought a ShamWow without seeing it in
Doctors Orders: Take your product or service
and actually use it for real (you’d be surprised how many people
haven’t even used the item they’re selling). This will help you to
understand and visualize how it should be presented in your
photography and videos. If it's an online tool, try observing
someone else using it.
STEP 5 - Use Videos to Increase Engagement &
According to a study by eyeviewdigital.com, the use of
video can increase your conversions rates by as much as 80%. By
providing users with a passive engagement mechanism you can keep
them on your page longer allowing your brand message to seep into
Warning: don’t just throw up a poorly animated Powerpoint
presentation - nobody will watch it.
If you are peddling a physical product, show people using it as
mentioned in step 4. If it’s an online tool, provide a demo of the
primary features while narrating the benefits of it’s use (don’t
show every step, make it a highlight reel). If you offer a service,
put yourself front and center and communicate directly with your
viewers. Make eye contact for maximum engagement and make use of
directional cues to guide them to your intended conversion goal.
Great videos do this by having the host look and point outside the
frame towards other elements on the page - bringing the whole page
into the experience.
Usability best practices say to never auto play a video as the
audio shock can make people hit the back button immediately,
especially if they are in a sound sensitive environment - like most
offices. However, this is something you should test on your
visitors. My advice if you want to start the video automatically
would be to at least allow a shot delay before it starts, and make
the controls very obvious in case someone wants to mute or pause
(This is a decent example of a nice pause and transition into video
- http://raw.glow.com/dms1825/ -
warning: the alerts when you try to leave the page aren’t so
STEP 6 - Use Directional Cues to Lead the
Imagine an airport without the expertly placed wayfinding signs
and maps - it would be chaos. If you’ve visited the emergency room
at a hospital, you might be familiar with the colored lines they
paint on the floor to take you to different departments - follow
the yellow brick road. These are examples of directional cues,
which can be broken down into explicit and implicit (both of those
Directional cues are used on landing pages to guide the visitor to
your call to action. Here are some examples of ways to do this:
- Graphical arrows: Take a look at the header
area of the lead gen form on this
landing page template. When you add a lead gen form to your
page, the call to action button is often pushed below the fold.
Here, the arrow lets you know that the point of interaction can be
found directly below that area.
- Whitespace: Don’t cramp the style of your CTA.
Resist the temptation to fill in every pixel of your page, instead
give your buttons plenty of room to breathe.
- Color: Classic colors for buttons include blue
(link color) and orange. At the end of the day, the most important
thing is that it stands out clearly from the rest of the page (e.g.
don’t make your button blue if your page has a blue
- Contrast: This is essentially the same as the
point about color (but thinking in terms of black and white or
- Eye direction: It’s been shown that when using
photos of people (or animals), that you can improve conversion by
having them look at your intended call to action. It makes sense.
If you see someone looking up at the sky while you’re walking down
the street, the chances are you’ll follow their gaze in case you’re
missing something important.
- Interruption: Surprise is an excellent way to
get someone’s attention. Breaking established design boundaries
gives reason to pause and observe. Boo!
- Encapsulation: Think of binoculars or the
viewfinder on a camera and how they focus your vision. You can
construct similar experiences using shapes and contrast. Think
about archways, holes and windows for inspiration.
- Pathways: Roads or the earlier example from
the hospital floor are examples of pathways. You can use background
design elements (lines with arrows generally) to walk someone round
your page in the order you prefer.
For a more exhaustive study of the effects of directional cues,
I wrote a post that uses photography to illustrate each of the
Designing for Conversion – 8 Visual Design Techniques to Focus
Attention on Your Landing Pages.
STEP 7 - Find the Optimal Balance of Data vs. Conversion
Lead generation is about two things - the size of the barrier
(how long, personal or complicated the form is) and the size of the
prize (what you are giving away in return for the data). If these
are out of proportion you risk losing customers.
It’s a delicate balance to achieve: make the form too long and
people walk away from the perceived effort, make the questions
off-topic or too personal and you wind up with false data.
Conversely, if the form is too short you can skew your leads
towards those just seeking a freebie instead of real, determined
and relevant customers. It can also result in you not being able to
qualify your leads accurately.
The other factor that complicates all of this is the giveaway you
are offering. If your eBook, coupon or webinar isn’t good enough to
warrant the information you are asking for folks will bounce. For a
webinar registration keep the info to a bare minimum - name, email
and maybe company and role if it’s B2B. If you’re giving away an
eBook, it needs to be one of two things: significant in size or
significant in it's exclusive data content. Above all, quality is
what counts. You can tease people into completing your form to get
your super awesome whitepaper, but if it turns out to be smoke and
mirrors, you’ll have a lead that’s disappointed and likely to
STEP 8 - Be Honest About Your Writing & Edit
Never publish the first thing you write. Unless you are in the
business of reportage poetry (I may have just made that name up).
Campaigns and their associated messaging need to be refined over
time through testing but also through editing. Steve Krug (author
of the classic usability book “Don’t Make Me Think”) made the best
observation on the subject I’ve heard: delete 50% of your page
content, then throw away half of what’s left.
Try removing 2 sentences from the main body
of copy on your landing page. I bet it won’t hurt as much as you
think. If you have 5 bullet points, try going with the 3 most
important ones. Keep deleting extraneous words and redundant
phrases until your copy is as tight as a Scotsman being asked to
pay a bar tab. Like everything you change on your pages, you should
make your edits on a duplicate page and run an A/B test to verify
if it produces higher conversions.
STEP 9 - Make it Easy to Share
The impulse to share content can be fleeting, so don’t make
people work for it. While not applicable to all landing pages,
those with special offers or special content (perhaps a great
video) - should have a simple way for people to spread the word for
There are two great ways to make this work:
- Use Twitter
@Anywhere to add widgets that allow people to tweet your offer.
Make it part of the contest rules that they follow you and tweet
your message in exchange for entry into the contest (free
- Place sharing widgets such as retweet buttons on your
confirmation pages (see step 12 for more on this)
Design for your audience. If you’re driving Twitter traffic,
retweet buttons are familiar and easy to use. The beauty of Twitter
@Anywhere components is that they utilize Ajax style interaction
and don’t take you away from the page. Similarly if you are
funneling Facebook traffic, add a “Like” button to the page. Most
Facebook’ers are logged in all the time and the button will add
your landing page into their timeline with a single click.
STEP 10 - Leverage Social Proof & Trust
Testimonials work, if they’re real. Avoid stock photos and
scripted hyperbole as most people can spot a fake testimonial a
mile away. Try a mixture of testimonials that describe how your
product or service has benefited someone’s experience, coupled with
the enthusiastic style that say “you guys rule!”. I’d only use the
latter from a well known industry expert or celebrity.
To modernize your landing pages, illustrate social proof by showing
your standing in a relevant social network. There are many widgets
available that can show how many people like or follow you. Social
capital and the herd mentality of network participants can help
convince prospects to become customers.
Ask 10 of your customers for a fresh
testimonial and add the best to your landing page. Remember to
state your usage intentions and ask for a photo if possible. If you
have a decent social network presence, try adding a live feed
widget based on a specific phrase or #hashtag search to show who
and how people are interacting with your brand.
STEP 11 - One Page, One Purpose
Imagine a web page that exhibits the same tendencies as a kid
with ADD. If your content can’t decide on one thing to do at a
time, then your visitors certainly won’t want to take the time to
figure it out.
To maintain focus, don’t talk about other products or services -
you can use a different landing page and ad source for those. An
exception to this is on an ecommerce product page that provides the
ability to add extra products to the cart as add-add-on's to your
main conversion goal.
Try this exercise. Explain the purpose of
your campaign to a colleague. Now read the content of your landing
page out loud and ask her to stop you if you veer away from the
central purpose as previously stated. If this happens, remove the
offending content and start over. You will notice a lot more about
your writing style by saying it out loud. For visual elements, try
writing the goal of your campaign on a piece of paper, then print
and cut out the images from your landing page and place them around
the goal. Remove or replace any that don’t seem to be in total
agreement with this goal.
STEP 12 - Post-Conversion Marketing
Post-conversion marketing is one of the most overlooked stages
of the conversion funnel. The confirmation page from your lead gen
form, ecommerce checkout, or registration form is the perfect place
to start capitalizing on the positive mood of a newly qualified
In the case of lead gen, you achieved the conversion goal of your
lead gen page and you are probably going to start sending your new
lead a series of email messages to encourage them to step up to the
next level. Note that it can take up to 6 or 7 contact incidents to
make this happen (according to email provider Constant
To increase your engagement potential, try to add your leads to
other channels in your sphere of marketing influence (from your
confirmation page). This amplifies the reach of your messages and
can be the difference between being heard and being
Some common examples include:
- Follow us on Twitter (so they see regular updates)
- Like us on Facebook (so they see updates and become part of
- Download our free eBook (to keep your brand in front of them
and increase your “thought leadership” score
- Visit this page (send them to other content they may find
- Share this with your friends/colleagues (leverage their
- Bookmark us on Delicious