Landing Page Design That Sells

8/11/2019 Landing Page Design That Sells

1/23

1

Copyright 99designs 2013All rights reserved

Landing

Page DesignThat Sells

Your 6-step guide to maximize conversion

Landing

Page DesignThat Sells

Your 6-step guide to maximize conversion


2/23

CONTENTS

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

Meet our experts . . . . . . . . . . . . . . . . . . . . . . . .3

CHAPTER 1

The headline . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

CHAPTER 2

The message . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

CHAPTER 3

The call to action . . . . . . . . . . . . . . . . . . . . . . . .9CHAPTER 4

Page layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

CHAPTER 5

Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

CHAPTER 6

Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21


3/23

3

INTRODUCTIONA great landing page is engaging. Straightforward.Actionable. Most importantly, its high-converting. But howdo you tackle all these objectives while creating a designthats consistent with your brand? Thats where we comein. 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 visitorreaches after clicking on a promotional linkis the directmarketer of the modern world, working quickly to convertleads into customers. At 99designs weve seen a variety ofdesigns succeed in this crucial role. We decided it was time

to share our insights with the world and called up some ofour favorite industry experts for their perspectives, too.

Inside, we provide tips to help you: Craft compelling headlines, offers 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 todesign a landing page that sells. We cant wait to see whatyou come up with.

Patrick LlewellynCEO


4/23

Meet our experts 3

Headlines with Jules LauLEAD CONTENT STRATEGIST AND COPYWRITER,REACTIVE

Having spent over ve years in thefast-paced advertising and digital

communications space, Jules denitionof a relaxing night involves a good sci-book. Connect with her on Twitter , Tumblr ,and LinkedIn .

Messaging with Oli GardnerCO FOUNDER AND CREATIVE DIRECTOR, UNBOUNCE

Oli is Unbounces resident landing pageexpert. Hes looked at over 20,000 landingpages, and writes on the subjects ofConversion Centered Design, landingpages and conversion rate optimization.Follow him on Twitter .

Calls to action with Neil PatelCO FOUNDER, CRAZYEGG AND KISSMETRICS

Neil helps companies like Amazon, NBC,GM, HP and Viacom grow their revenue.The Wall Street Journal calls him a topinuencer on the web and EntrepreneurMagazine says hes one of the topentrepreneurs in the world.

MEET OUR EXPERTS
https://twitter.com/omgwtfjuleshttp://omgwtfjules.tumblr.com/http://omgwtfjules.tumblr.com/http://au.linkedin.com/in/omgwtfjuleshttps://twitter.com/oligardnerhttps://twitter.com/oligardnerhttps://twitter.com/oligardnerhttp://au.linkedin.com/in/omgwtfjuleshttp://omgwtfjules.tumblr.com/https://twitter.com/omgwtfjules


5/23

Meet our experts 4

Page layouts with Kate LintonUSER EXPERIENCE PRINCIPLE, THOUGHTWORKS

Kate is a designer with over 20 yearsexperience in visual communications,interaction design, user experience,prototyping, branding, informationarchitecture, customer research, digitalstrategy and user testing.

Video with Steve YoungDIRECTOR OF PRODUCT MARKETING, SMARTSHOOT

At Smartshoot, Steve helps marketerscreate stunning videos by connectingthem with a network of professionallmmakers. Connect with him on Twitter or LinkedIn .

Testing with Ryan LillisWEBSITE OPTIMIZATION AND DIGITAL MARKETINGSTRATEGIST, OPTIMIZELY

Formerly with Adobe/Omniture, Ryan joined Optimizely in August 2012 becausehe was blown away by the companystesting platform and believes it representsthe future of website optimization.
https://twitter.com/stevepyounghttp://www.linkedin.com/in/stevepyounghttp://www.linkedin.com/in/stevepyounghttps://twitter.com/stevepyoung


6/23

The headline 5

CHAPTER 1

THE HEADLINEHeadlines 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 differenceA compelling headline starts with a solid understanding

of your offering. 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 difference in a single sentence.

A process for crafting great headlinesYou can use your brands point of difference 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


7/23

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 eachone 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 cancollaborate to hone the pageand your headlineintandem.

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


8/23

The message 7

CHAPTER 2

THE MESSAGEComing up with a truly great offer for your campaign can

be a challengeand communicating it effectively 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 storyPeople 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 offering a way to solve it.


9/23

The message 8

Choose the right format The medium you choose should depend on the kind and

complexity of your offering. 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 orservice in action, and looking good. Your designer may beable 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


10/23

The call to action 9

CHAPTER 3

THE CALL TO ACTIONA well-crafted call to action (CTA) can make all the difference

when it comes to conversion. Lets say youve built the

perfect offerone that resonates well with your audience

and provides relevant value. Unfortunately, unless the

customer is persuaded to access that offer, 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 effective 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 CTAWhile 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.


11/23


The main CTA on Neils site

How? Create a CTA that is closely related to the product

or service you are offering. 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.


12/23


Once youve developed a landing page design, have thedesigner complete a modied variation for each test you

want to run. Youll likely get a better rate than if you go backto 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 youcreate 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 clickingIve set up a way to test my CTAs in design

Neal tested these two versions of Crazy Eggs CTA


13/23

Page layouts 12

CHAPTER 4

PAGE LAYOUTSYouve 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 offering.

Starting pointsHave 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 drivenby its single purposeits offer, and the call to action around

that offer. 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.


14/23

Page layouts 13

Consistency and congruenceWith its single purpose, a landing page will look different

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 visitorsthe 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 mobiledevices? If so, be sure to include that detail in your designbrief

Key information appears above the fold


15/23

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 responserate 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 theirbuying decision appears above the fold: logo, headline with valueproposition, 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


16/23

Video 15

CHAPTER 5

VIDEOFor 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 offer 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. Ifthe 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.


17/23

Video 16

Using animated or branded elements in your video? Thinkabout if, and how, these might be referenced in yourlanding page design.

Getting it onto the pageSteve 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 tolearn 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


18/23

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 thenumber 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


19/23

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 basicsFor 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 fruitIn looking at the testable factors that contribute to reaching

your pages goal, you have some very obvious candidates.


20/23

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 productvideo. This is an exceptional examplebut images, like

CTAs, are impactful and easily altered for testing.

Work with your designer to create alternative versions ofthe page that reect the items you want to test. And dontbe 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


21/23

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 CHECKLISTIve tested that the page is fully functional on all the devices andbrowsers 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 versionsof this page, and hooked it up to an A/B testing service so I can track myresults and improve my design


22/23

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
http://unbounce.com/landing-pages/landing-page-rehab/http://unbounce.com/landing-pages/landing-page-rehab/http://unbounce.com/ppc-landing-pages/http://unbounce.com/ppc-landing-pages/http://webinar.unbounce.com/multiply-conversion-rates-resources/http://webinar.unbounce.com/multiply-conversion-rates-resources/http://unbounce.com/landing-page-articles/what-is-ab-testing/http://unbounce.com/landing-page-articles/what-is-ab-testing/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://www.marketo.com/worksheets/landing-page-split-test-calculator/http://www.marketo.com/worksheets/landing-page-split-test-calculator/http://www.marketo.com/worksheets/landing-page-split-test-calculator/http://www.marketo.com/cheat-sheets/landing-page-optimization/http://www.marketo.com/cheat-sheets/landing-page-optimization/http://www.formstack.com/the-anatomy-of-a-perfect-landing-pagehttp://www.formstack.com/the-anatomy-of-a-perfect-landing-pagehttp://www.formstack.com/the-anatomy-of-a-perfect-landing-pagehttp://www.formstack.com/the-anatomy-of-a-perfect-landing-pagehttp://www.marketo.com/cheat-sheets/landing-page-optimization/http://www.marketo.com/cheat-sheets/landing-page-optimization/http://www.marketo.com/worksheets/landing-page-split-test-calculator/http://www.marketo.com/worksheets/landing-page-split-test-calculator/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://www.marketo.com/marketing-glossary/landing-page-optimization/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/http://unbounce.com/landing-page-articles/what-is-ab-testing/http://unbounce.com/landing-page-articles/what-is-ab-testing/http://webinar.unbounce.com/multiply-conversion-rates-resources/http://webinar.unbounce.com/multiply-conversion-rates-resources/http://unbounce.com/ppc-landing-pages/http://unbounce.com/ppc-landing-pages/http://unbounce.com/landing-pages/landing-page-rehab/http://unbounce.com/landing-pages/landing-page-rehab/


23/23

LANDING PAGE CHECKLISTMake sure your landing pages are on track for high conversion

THE HEADLINE

c The headline states my value propositionc My headline entices users to read morec The headline and body copy convey a single message

THE MESSAGE

c My message is focused on a single objectivec The copy explains the benefit of my offerc Ive determined the appropriate medium to deliver my message

THE CALL TO ACTION

c The page presents one consistent call to actionc The CTA makes it clear what a user will get by clickingc Ive set up a way to test my CTAs in design

PAGE LAYOUTS

c The essential information the visitor needs to know to make theirbuying decision appears above the fold: logo, headline with valueproposition, and CTA

c The page has no main navigation or sidebarc 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 propositionc Ive placed the video centrally, with the length and CTA next to itc Ive shared my video

TESTING

c Ive tested that the page is fully functional on all the devices andbrowsers I expect visitors to use

c Ive verified that the user data Ill collect is being stored safelyc 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 myresults and improve my design

Documents

Landing Page Design That Sells