1

Copyright © 99designs 2013All 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

InTroDuCTIonA great landing page is engaging. Straightforward. Actionable. Most importantly, it’s high-converting. But how do you tackle all these objectives while creating a design that’s consistent with your brand? That’s 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 page—basically, any web page that a visitor reaches after clicking on a promotional link—is the direct marketer of the modern world, working quickly to convert leads into customers. At 99designs we’ve 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, offers and calls to action.· Collaborate with designers to get a look you love.· Continuously improve conversion through testing.

When you’ve finished reading this ebook (it won’t take long, we promise), you’ll be armed with all the info you need to design a landing page that sells. We can’t wait to see what you come up with.

Patrick LlewellynCeO

Meet our experts 3

Headlines with Jules Lau Lead COntent StrategiSt and COpYwriter, reaCtive

Having spent over five years in the fast-paced advertising and digital communications space, Jules’ definition of a relaxing night involves a good sci-fi book. Connect with her on Twitter, Tumblr, and LinkedIn.

Messaging with Oli GardnerCO-fOunder and Creative direCtOr, unbOunCe

Oli is Unbounce’s resident landing page expert. He’s 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 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 top influencer on the web and Entrepreneur Magazine says he’s one of the top entrepreneurs in the world.

MeeT our exPerTS

Meet our experts 4

Page layouts with Kate LintonuSer 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 YoungdireCtOr Of prOduCt MarKeting, SMartShOOt

At Smartshoot, Steve helps marketers create stunning videos by connecting them with a network of professional filmmakers. Connect with him on Twitter or LinkedIn.

Testing with Ryan LilliswebSite OptiMizatiOn and digitaL MarKeting StrategiSt, OptiMizeLY

Formerly with Adobe/Omniture, Ryan joined Optimizely in August 2012 because he was blown away by the company’s 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 proposition—the benefit your

business provides to its customers—is 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 brand’s 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 benefits 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 flesh out the page, you’ll start getting ideas: ‘Actually,

that could be a headline.’ As ideas occur to you, don’t feel

like you have to choose one right away. Instead, start

creating around five 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 headline’s theme. One of these

headlines will likely be the best natural fit with the copy.

five QuaLitieS Of a great headLine

• Shows off your brand’s point of differentiation

• Clearly states your brand’s benefit, but creatively

• Taps into a user’s 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 page—and your headline—in 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 offer for your campaign can

be a challenge—and 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

first few pages of a book. Your headline sits on the first 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 it’s beneficial 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 final 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.

the message 8

Choose the right formatThe 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 find that words (the right ones, carefully chosen) will do

a better job than images.

If you’re going to use images or video on your landing page, it’s 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

I’ve determined the appropriate medium to deliver my message

PropertyPro Manager’s succinct story

the call to action 9

Chapter 3

The CaLL To aCTIon

A well-crafted call to action (CTA) can make all the difference

when it comes to conversion. Let’s say you’ve built the

perfect offer—one 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. It’s 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 web’s 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 benefit of a generic CTA is that it tells you what you’ll

be doing if you click—but it doesn’t address why you

would want to do that in the first place. In some contexts,

the generic CTA may work fine, 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 Neil’s site

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

or service you are offering. For example, Neil Patel’s 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 benefit 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 designStill not sure what copy will get the most conversions?

There’s one way to find out: test. In A/B testing, you

release two versions of the copy and see which gets more

conversions—but you should run this test many times, using

multiple variations. In a later chapter, we’ll talk you through

all the details of testing.

the call to action 11

Once you’ve developed a landing page design, have the designer complete a modified variation for each test you want to run. You’ll likely get a better rate than if you go back to the designer several times for small tweaks.

One final 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

I’ve set up a way to test my CTAs in design

Neal tested these two versions of Crazy Egg’s CTA

page layouts 12

Chapter 4

Page LayouTS

You’ve probably seen some creative variations of campaign

landing page layouts around the web. There’s incredible

variety in landing page design—yet 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? It’s 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 don’t

capture users really quickly with your proposition and your

call to action then you’ve probably lost them.

In that sense, a landing page needs to be very heavily driven

by its single purpose—its offer, and the call to action around

that offer. For this reason, it can’t and shouldn’t replicate

your website, which has more than one purpose.

Put key information above the fold—the part of the page

that naturally fits within a standard browser window without

scrolling. The call to action, identification 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 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 there’s 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

experimentA typical landing page will have no navigation or sidebar,

be consistent with your site’s 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 benefit 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 impactful—even 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 convertsThe 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 we’ve repeated in earlier chapters: If you know your

users’ pain points, and how your offer meets them, you’ll 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 don’t 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 pageSteve recommends putting your video front and center on

your landing page as the main attraction. Even if people

don’t actually watch it, it builds trust to see that you’ve spent

time making a professional video. And, if people want to

learn more about you, you’re making it very easy.

It’s a good idea to put the CTA right beside the video rather

than farther down the page. Users who’ve just sat through a

video are often prepared to act right away.

But let’s face it, videos are a time commitment, and some

users won’t start a video if they don’t know how long it’s

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 figure

out what people are searching for, you can draw people into

your landing pages.

videO CheCKLiSt

I’ve created a great script around my value proposition

I’ve placed the video centrally, with the length and CTA next to it

I’ve 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 it’s

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 who’s just spent days or weeks working up

a landing page, testing it can seem daunting. But it needn’t

be, if you start by focusing on your users’ motives first.

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 you’re asking users for any data—such as an email

address—check 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 page’s 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 example—but images, like

CTAs, are impactful and easily altered for testing.

Work with your designer to create alternative versions of the page that reflect the items you want to test. And don’t be shy about asking for their advice.

going above and beyondTesting 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 significantly more informative than

the original. Don’t be surprised if the “winner” is dramatically

simpler than the original version—but don’t 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 refine 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 influence future design. If something has

worked well for your target audience in the past, it’s likely to

be a good starting place in the future.

teSting CheCKLiSt

I’ve tested that the page is fully functional on all the devices and

browsers I expect visitors to use

I’ve verified that the user data I’ll collect is being stored safely

I’ve 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 page’S

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 CheCKLISTMake 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 I’ve 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 I’ve 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 I’ve created a great script around my value proposition

c I’ve placed the video centrally, with the length and CTA next to it

c I’ve shared my video

teSting

c I’ve tested that the page is fully functional on all the devices and

browsers I expect visitors to use

c I’ve verified that the user data I’ll collect is being stored safely

c I’ve 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