1

Copyright 99designs 2013

All rights reserved
Landing
Page Design
That Sells
Your 6-step guide to maximize conversion
Landing
Page Design
That Sells
Your 6-step guide to maximize conversion
CONTENTS
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Meet our experts . . . . . . . . . . . . . . . . . . . . . . . . 3
CHAPTER 1
The headline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPTER 2
The message . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
CHAPTER 3
The call to action . . . . . . . . . . . . . . . . . . . . . . . . 9
CHAPTER 4
Page layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
CHAPTER 5
Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
CHAPTER 6
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3
INTRODUCTION
A great landing page is engaging. Straightforward.
Actionable. Most importantly, its high-converting. But how
do you tackle all these objectives while creating a design
thats consistent with your brand? Thats where we come
in. This copy of Landing Page Design That Sells will help you
master the art of turning clicks into conversions.
A landing pagebasically, any web page that a visitor
reaches after clicking on a promotional linkis the direct
marketer of the modern world, working quickly to convert
leads into customers. At 99designs weve seen a variety of
designs succeed in this crucial role. We decided it was time
to share our insights with the world and called up some of
our favorite industry experts for their perspectives, too.
Inside, we provide tips to help you:
Craft compelling headlines, oers and calls to action.
Collaborate with designers to get a look you love.
Continuously improve conversion through testing.
When youve nished reading this ebook (it wont take long,
we promise), youll be armed with all the info you need to
design a landing page that sells. We cant wait to see what
you come up with.
Patrick Llewellyn
CEO
Meet our experts 3
Headlines with Jules Lau
LEAD CONTENT STRATEGIST AND COPYWRITER,
REACTIVE
Having spent over ve years in the
fast-paced advertising and digital
communications space, Jules denition
of a relaxing night involves a good sci-
book. Connect with her on Twitter, Tumblr,
and LinkedIn.
Messaging with Oli Gardner
CO-FOUNDER AND CREATIVE DIRECTOR, UNBOUNCE
Oli is Unbounces resident landing page
expert. Hes looked at over 20,000 landing
pages, and writes on the subjects of
Conversion Centered Design, landing
pages and conversion rate optimization.
Follow him on Twitter.
Calls to action with Neil Patel
CO-FOUNDER, CRAZYEGG AND KISSMETRICS
Neil helps companies like Amazon, NBC,
GM, HP and Viacom grow their revenue.
The Wall Street Journal calls him a top
inuencer on the web and Entrepreneur
Magazine says hes one of the top
entrepreneurs in the world.
MEET OUR EXPERTS
Meet our experts 4
Page layouts with Kate Linton
USER EXPERIENCE PRINCIPLE, THOUGHTWORKS
Kate is a designer with over 20 years
experience in visual communications,
interaction design, user experience,
prototyping, branding, information
architecture, customer research, digital
strategy and user testing.
Video with Steve Young
DIRECTOR OF PRODUCT MARKETING, SMARTSHOOT
At Smartshoot, Steve helps marketers
create stunning videos by connecting
them with a network of professional
lmmakers. Connect with him on Twitter
or LinkedIn.
Testing with Ryan Lillis
WEBSITE OPTIMIZATION AND DIGITAL MARKETING
STRATEGIST, OPTIMIZELY
Formerly with Adobe/Omniture, Ryan
joined Optimizely in August 2012 because
he was blown away by the companys
testing platform and believes it represents
the future of website optimization.
The headline 5
CHAPTER 1
THE HEADLINE
Headlines spell trouble for many website owners. How do
you captivate and educate users in just a few words? Clearly
communicating your value propositionthe benet your
business provides to its customersis both an art and
a science. For guidance, we turned to Jules Lau, Content
Strategist at leading digital marketing agency Reactive.
Understand your point of difference
A compelling headline starts with a solid understanding
of your oering. Knowing what makes you distinct from
the competition is the only way to cut through the noise in
digital marketing, so before you write a headline, make sure
you can state this point of dierence in a single sentence.
A process for crafting great headlines
You can use your brands point of dierence to generate
both a headline and body copy using a bottom-up
approach. Start by writing a quick outline of all the features
and benets that you want to talk about in the body copy.
Once you have all your thoughts down, add some structure
The 99designs homepage headline
The headline 6
by grouping them into categories or topics. Now add
detail. Start building out the bullet points with all the little
insights about your product that show customers that you
understand their needs.
As you esh out the page, youll start getting ideas: Actually,
that could be a headline. As ideas occur to you, dont feel
like you have to choose one right away. Instead, start
creating around ve headlines to pick from. See how each
one might play out by reworking the body copy a little bit to
make it consistent with each headlines theme. One of these
headlines will likely be the best natural t with the copy.
FIVE QUALITIES OF A GREAT HEADLINE
Shows off your brands point of differentiation
Clearly states your brands benefit, but creatively
Taps into a users pain (the problem your product solves)
Is specific to that pain without excluding potential users
Uses your brand personality to deepen customer loyalty
Engage your designer early in the process, soon after
you have a rough draft of the copy. This way, you can
collaborate to hone the pageand your headlinein
tandem.
THE HEADLINE CHECKLIST
The headline states my value proposition
The headline entices users to read more
The headline and body copy convey a single message
The message 7
CHAPTER 2
THE MESSAGE
Coming up with a truly great oer for your campaign can
be a challengeand communicating it eectively can be
even harder. For tips on crafting an irresistible message we
turned to Oli Gardner, the Co-founder and Creative Director
at Unbounce, a service that helps marketers build high-
converting landing pages.
Tell a succinct story
People need to get your message almost immediately.
When writing copy for your landing page, think of it like the
rst few pages of a book. Your headline sits on the rst page
and needs to be enticing enough for the visitor to want to
read more.
The second page is a section of copy that introduces your
concept in more detail, explaining why its benecial and the
pain that it solves.
Only after that do you present the user with a call to action
that completes your story and inspires a nal click. Note
that all of these areas of copy are telling a single story, much
as a book does. They are explaining to the visitor that you
understand their pain, and are oering a way to solve it.
The message 8
Choose the right format
The medium you choose should depend on the kind and
complexity of your oering. If the page needs to show
how your product works, then images and video have an
advantage over copy. On the other hand, if your page needs
to connect with how your product will make a user feel, you
may nd that words (the right ones, carefully chosen) will do
a better job than images.
If youre going to use images or video on your landing page,
its worth it to hire a pro to truly capture your product or
service in action, and looking good. Your designer may be
able to recommend the perfect contact.
THE MESSAGE CHECKLIST
My message is focused on a single objective
The copy explains the benefit of my offer
Ive determined the appropriate medium to deliver my message
PropertyPro Managers succinct story
The call to action 9
CHAPTER 3
THE CALL TO ACTION
A well-crafted call to action (CTA) can make all the dierence
when it comes to conversion. Lets say youve built the
perfect oerone that resonates well with your audience
and provides relevant value. Unfortunately, unless the
customer is persuaded to access that oer, it may as well not
exist. Its like opening a store full of an incredible product
that everyone wants, but without installing a front door.
To get some insight into creating an eective CTA, we spoke
with one of the webs best-known landing page experts: Neil
Patel, co-founder of the digital analytics services Crazy Egg,
QuickSprout and KISSMetrics.
Elements of a winning CTA
While a CTA is an incitement for the visitor to take action,
what action it demands can be almost anything. The generic
CTA is a button that says something like Inquire now.
The benet of a generic CTA is that it tells you what youll
be doing if you clickbut it doesnt address why you
would want to do that in the rst place. In some contexts,
the generic CTA may work ne, for example if your site has
a single clear proposition from beginning to end. But by
honing the CTA, you may be able to drive more conversions.
The call to action 10
The main CTA on Neils site
How? Create a CTA that is closely related to the product
or service you are oering. For example, Neil Patels site
Crazyegg.com has customers creating something called
a heatmap. His CTA is therefore a yellow button that says,
Show me my heatmap! Instead of just describing what the
user is doing, this CTA tells the customer what the site will
do for them.
Think of the CTA as a response to the headline, describing
how users will benet if they click through. A CTA
constructed with this in mind will be unique to your site and
more memorable, both which can boost conversions.
Test CTAs in design
Still not sure what copy will get the most conversions?
Theres one way to nd out: test. In A/B testing, you
release two versions of the copy and see which gets more
conversionsbut you should run this test many times, using
multiple variations. In a later chapter, well talk you through
all the details of testing.
The call to action 11
Once youve developed a landing page design, have the
designer complete a modied variation for each test you
want to run. Youll likely get a better rate than if you go back
to the designer several times for small tweaks.
One nal tip? Treat each landing page individually. Users
may not see any of your other pages, so every page you
create needs to stand on its own. While CTAs should
maintain a consistent look across the site, each needs to be
optimized for its own purpose.
THE CALL TO ACTION CHECKLIST
The page presents one consistent call to action
The CTA makes it clear what a user will get by clicking
Ive set up a way to test my CTAs in design
Neal tested these two versions of Crazy Eggs CTA
Page layouts 12
CHAPTER 4
PAGE LAYOUTS
Youve probably seen some creative variations of campaign
landing page layouts around the web. Theres incredible
variety in landing page designyet there are some basic
features most successful pages share. We asked Kate
Linton, User Experience Principal at Thoughtworks, an agile
development and user experience agency in San Francisco,
to share how to create the perfect layout for your oering.
Starting points
Have you heard of the eight-second rule? Its a marketing
principle that you have eight seconds (sometimes fewer) to
convince a visitor to stay on your site. With a landing page,
you are operating on that metaphorical clock. If you dont
capture users really quickly with your proposition and your
call to action then youve probably lost them.
In that sense, a landing page needs to be very heavily driven
by its single purposeits oer, and the call to action around
that oer. For this reason, it cant and shouldnt replicate
your website, which has more than one purpose.
Put key information above the foldthe part of the page
that naturally ts within a standard browser window without
scrolling. The call to action, identication of your brand, and
key value proposition all go above the fold. The remaining
real estate can hold secondary information.
Page layouts 13
Consistency and congruence
With its single purpose, a landing page will look dierent
than other pages on your site. Still, brand consistency is key,
as is consistency across all landing pages associated with
your brand. The simplest way to do this is to include your
logo with a link to your home page.
But theres more to it than that. On all your landing pages,
you want to quickly establish trust. You should give visitors
the sense that the brand is one that they know or recognize,
and that the page itself is congruent with their expectations
of you. All pages of your site should look like they relate to a
single brand.
Will you need your landing page layout to work on mobile
devices? If so, be sure to include that detail in your design
brief
Key information appears above the fold
Page layouts 14
Experiment
A typical landing page will have no navigation or sidebar,
be consistent with your sites other landing pages, contain
your logo, have a link to your home page, and include all
essential information above the fold. But with campaign
landing pages, you have the benet of being able to do a bit
of trial and error. Come up with a few pages that seem like
promising designs, and to then test and measure response
rate across all of them to determine which work the best in
practice. You can then optimize based on that.
PAGE LAYOUTS CHECKLIST
The essential information the visitor needs to know to make their
buying decision appears above the fold: logo, headline with value
proposition, and CTA
The page has no main navigation or sidebar
My logo is at the top of the page and links to the home page
Video 15
CHAPTER 5
VIDEO
For the camera-shy, a video can seem like an unnecessary
addition to your landing page. But in some cases a video
is impactfuleven essential. And, as we learned from
Steve Young, Director of Product Marketing at SmartShoot,
creating a video might be simpler than you might think.
Planning a video that converts
The best videos start with a solid plan. To create a strategy,
look at the goals of your landing page and talk to your
audience. Ask, Why are you using us? This comes back to a
theme weve repeated in earlier chapters: If you know your
users pain points, and how your oer meets them, youll be
in a good position to create a page that converts.
Get started on a script as soon as you have a plan. The more
clever you are, the more memorable you tend to be. But
the good news is that you dont have to write very much. If
the goal is just to familiarize the audience with the actual
product, the ideal running time is 30-60 seconds. If users
already know a little bit about the product, consider an in-
depth interview and shoot for two to three minutes.
Once the script is right, you can design the look of the video
to support it.
Video 16
Using animated or branded elements in your video? Think
about if, and how, these might be referenced in your
landing page design.
Getting it onto the page
Steve recommends putting your video front and center on
your landing page as the main attraction. Even if people
dont actually watch it, it builds trust to see that youve spent
time making a professional video. And, if people want to
learn more about you, youre making it very easy.
Its a good idea to put the CTA right beside the video rather
than farther down the page. Users whove just sat through a
video are often prepared to act right away.
But lets face it, videos are a time commitment, and some
users wont start a video if they dont know how long its
going to be. So put the running time of the video up front,
The 99designs video modal
Video 17
either on the thumbnail itself, or nearby on the page. You
could also include language in your copy like, Learn more
about us in 60 seconds.
Finally, publish your video on a sharing site. YouTube is the
number two search engine on the Internet. If you can gure
out what people are searching for, you can draw people into
your landing pages.
VIDEO CHECKLIST
Ive created a great script around my value proposition
Ive placed the video centrally, with the length and CTA next to it
Ive shared my video
The Apple landing page
Testing 18
CHAPTER 6
TESTING
The abundance of online testing tools makes it seem like
testing your landing page design should be a cinch. But its
this critical step that many site owners skip. We asked Ryan
Lillis, Strategic Optimization Consultant with Optimizely, for
some inside advice.
Testing basics
For a site owner whos just spent days or weeks working up
a landing page, testing it can seem daunting. But it neednt
be, if you start by focusing on your users motives rst.
What does that mean? Start by identifying the goal of the
page and put together a list of things to test that should be
contributing to that goal. If you want users to click a button,
test the button. Then think about all the devices your users
will use to interact with your landing page, and test them all.
If youre asking users for any datasuch as an email
addresscheck the backend to make sure this information
is being stored safely and securely.
Targeting the low-hanging fruit
In looking at the testable factors that contribute to reaching
your pages goal, you have some very obvious candidates.
Testing 19
Calls to action (CTAs) are a good place to start, since their
placement, in addition to their wording and imagery, can be
a big factor. You can test that placement fairly easily. You can
also change or add language to the CTA to see whether it
impacts conversion.
Images are also easy to swap and often have a huge impact.
Tech retailer ZAGG saw sales jump by 40% when they tested
a 360-degree product image against a standard product
video. This is an exceptional examplebut images, like
CTAs, are impactful and easily altered for testing.
Work with your designer to create alternative versions of
the page that reect the items you want to test. And dont
be shy about asking for their advice.
Going above and beyond
Testing is helpful in giving you a granular view of your page,
and helping you calibrate exactly how much information
you need to provide.
Start by testing three variations: the original page, a second
variation that is dramatically simpler than the original, and
a third variation that is signicantly more informative than
the original. Dont be surprised if the winner is dramatically
simpler than the original versionbut dont assume that
either.
Once you have the test results, test a change in a single
element between the original and the second-best
Testing 20
performer. You can continue to test and rene in this way
until you hone in on the optimal experience.
You can also continue to test once the page is live and use
those results to inuence future design. If something has
worked well for your target audience in the past, its likely to
be a good starting place in the future.
TESTING CHECKLIST
Ive tested that the page is fully functional on all the devices and
browsers I expect visitors to use
Ive verified that the user data Ill collect is being stored safely
Ive chosen at least one design element to vary between two versions
of this page, and hooked it up to an A/B testing service so I can track my
results and improve my design
Resources 21
RESOURCES
RESOURCES
INFOGRAPHIC: THE 12-STEP LANDING PAGE REHAB
PROGRAM http://unbounce.com/landing-pages/landing-
page-rehab/
INFOGRAPHIC: LANDING PAGES FOR PPC http://unbounce.
com/ppc-landing-pages/
WEBINAR: HOW TO MULTIPLY YOUR LANDING PAGES
CONVERSION RATES http://webinar.unbounce.com/
multiply-conversion-rates-resources/
WHAT IS A/B TESTING? http://unbounce.com/landing-
page-articles/what-is-ab-testing/
THE ANATOMY OF A LANDING PAGE http://unbounce.
com/landing-page-articles/the-anatomy-of-a-landing-
page/
LANDING PAGE OPTIMIZATION GLOSSARY TERMS http://
www.marketo.com/marketing-glossary/landing-page-
optimization/
LANDING PAGE CALCULATOR http://www.marketo.com/
worksheets/landing-page-split-test-calculator/
LANDING PAGE OPTIMIZATION CHEAT SHEET http://www.
marketo.com/cheat-sheets/landing-page-optimization/
ANATOMY OF A PERFECT LANDING PAGE http://www.
formstack.com/the-anatomy-of-a-perfect-landing-page
Resources 22
LANDING PAGE CHECKLIST
Make sure your landing pages are on track for high conversion
THE HEADLINE
c The headline states my value proposition
c My headline entices users to read more
c The headline and body copy convey a single message
THE MESSAGE
c My message is focused on a single objective
c The copy explains the benefit of my offer
c Ive determined the appropriate medium to deliver my message
THE CALL TO ACTION
c The page presents one consistent call to action
c The CTA makes it clear what a user will get by clicking
c Ive set up a way to test my CTAs in design
PAGE LAYOUTS
c The essential information the visitor needs to know to make their
buying decision appears above the fold: logo, headline with value
proposition, and CTA
c The page has no main navigation or sidebar
c My logo is at the top of the page and links to the home page
VIDEO
c Ive created a great script around my value proposition
c Ive placed the video centrally, with the length and CTA next to it
c Ive shared my video
TESTING
c Ive tested that the page is fully functional on all the devices and
browsers I expect visitors to use
c Ive verified that the user data Ill collect is being stored safely
c Ive chosen at least one design element to vary between two versions
of this page, and hooked it up to an A/B testing service so I can track my
results and improve my design