Landing Page Design That Sells

Landing Page Design T   hat Sells  Your 6-step guide to maximize conversion

Copyright © 99designs 2013 All rights reserved

1

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

Introduction A 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 Llewellyn CEO

3

Meet our experts 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 Gardner co-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 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 influencer on the web and Entrepreneur Magazine says he’s one of the top entrepreneurs in the world.

Meet our experts 3

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 filmmakers. 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 company’s testing platform and believes it represents the future of website optimization.

Meet our experts 4

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 difference A 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.

The 99designs homepage headline

A process for crafting great headlines You 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 headline 5

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 headline 6

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

PropertyPro Manager’s succinct story

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

The message 8

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

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.

The main CTA on Neil’s site

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 design Still 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 10

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.

Neal tested these two versions of Crazy Egg’s CTA

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

The call to action 11

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 points Have 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 12

Key information appears above the fold

Consistency and congruence With 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

Page layouts 13

Experiment A 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

Page layouts 14

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 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 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 indepth 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 15

The 99designs video modal

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

Video 16

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.”

The Apple landing page

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

Video 17

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 basics For 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 fruit In looking at the testable factors that contribute to reaching your page’s goal, you have some very obvious candidates.

Testing 18

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

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

Testing 20

Resources

Resources • Infographic: The 12-Step Landing Page Rehab

Program – http://unbounce.com/landing-pages/landingpage-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-landingpage/ • Landing Page Optimization Glossary Terms – http://

www.marketo.com/marketing-glossary/landing-pageoptimization/ • 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 21

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

Resources 22