Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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