How to Make a Landing Page That C.O.N.V.E.R.T.S.
So you’ve got your marketing all set. You have paid search ads going, your pages are well optimized and generating good natural search, your Facebook ads are working, and you’re getting lots of traffic. (I know, this probably is a fantasy situation, but let’s go with it.)
People are visiting your site, but for some reason, you’re not seeing your other numbers move at all. Should you throw up your hands and conclude that your marketing doesn’t work?
Not yet. The first thing you might want to look at is what people do after they go through your ads. If you don’t have a good landing page, it’s like going fishing without a net: you might land a big one on your hook, but you won’t be able to drag it into the boat.
You don’t want people to just visit your page. You want them to take action once they are there. So make it as easy and compelling as possible for them by including these elements found in a landing page that CONVERTS:
C = Clear Call to Action
O = Offer
N = Narrow Focus
V = VIA: Very Important Attributes
E = Effective Headline
R = Resolution-Savvy Layout
T = Tidy Visuals
S = Social Proof
CLEAR CALL TO ACTION
In a famous scene from Glengarry Glen Ross, the man sent to train the hapless salesmen sums up his sales mantra – ABC: Always Be Closing. This should be the mantra of your landing page, too. And the way you accomplish ABC is by focusing on your call to action.
The call to action (CTA) is what you want visitors to do: Shop Now. Sign Up. Try It. Contact Us. See Our Video.
Whatever it is you’ve decided will move people further along your conversion funnel. That’s what you should be asking them, clearly and temptingly, to do. Don’t distract them with lots of other requests. The best pages accentuate only one CTA.
Considerations for strategy
This is a very powerful (and easy) area to test. So test color, size, and placement of the button. Test relatively demure copy (“Support Our Cause”) against more demanding copy (“Donate Now”).
Considerations for design
- Make sure the CTA is displayed at least once in a visually distinct, centralized, and obviously buttony-looking button. Don’t make people guess at what they should click on.
- Use visual cues, such as arrows or images of people looking at the button, to draw the eye.
- If you have other CTAs on the page, de-emphasize them visually compared with the primary CTA.
- If you have content below the fold, repeat the CTA. Always make it easy and compelling for the visitor to take the desired action.
The cautionary tale
Forrester Research. It’s really not clear what you’re supposed to do here. Do an advanced search? That’s the only thing that’s visually set apart, and it has a nice arrow pointing to it. Not sure how that helps them sell events.
Doing it right
Pocket. The eye goes right to the CTA. Especially nice is the way the video is miniaturized here, because often the play button on a video can be distracting.
OFFER
An offer is anything you give your visitors in exchange for getting them to do what you want. This can mean offers in the traditional sense of coupons or discounts, but it also can mean a free trial, a free version of the product, a whitepaper, or a matching gift.
Considerations for strategy
The best offers pull users deeper into the conversion funnel:
- A bill pay website might offer users $10 for the first bill they pay, which would require them to sign up for the service and connect their accounts.
- A consulting agency might offer a free 60-minute consultation, which really is a meeting to describe how awesome the agency is.
Whatever you offer, try pairing it with a deadline to create a sense of urgency and spur a response.
Considerations for design
Make sure the offer is conveyed simply and that it doesn’t distract from the CTA.
The cautionary tale
AAA. There’s a lot going on (wrong) here. Most insurance sites offer a free quote with minimal information (mostly just a ZIP code). AAA takes more of a “demanding” rather than “offering” approach, blocking your view of their page until they get what they want. Peeking into the gloom, you can see that even after they get your ZIP, you get zip – just an invitation for someone to call you. Just what everyone wants!
Doing it right
United. Credit cards almost always include an offer – no surprise given the direct mail experience these companies have. Note that the offer requires the cardholder to use the card over several months, by which time, hopefully, its use will have become ingrained. Good visual cues drawing the eye to the CTA, too.
NARROW FOCUS
AKA Keep It Simple, Stupid. Research has shown that the more choices you offer people, the longer they take to make a decision. So the clearer and simpler you make your page, the more likely you are to get someone to take the action you want.
- Do you really need that navigation bar? Take it off or visually minimize it, and otherwise eliminate things that can be clicked on that aren’t your CTA.
- Do you really need to talk about your company philosophy? Move it to the “About” section and limit content that doesn’t serve the purpose of moving people down the funnel.
- Do you really need to collect all that information? If you’ve got a form on your page, keep it short. Study after study has shown that more fields = lower response, so ask your visitors for the bare minimum.
All this advice is particularly hard for marketers to follow when it comes to the most important landing page on their site: their home page. No matter what kind of marketing you’re doing, a huge chunk of your traffic is going to hit your home page first, so it should be treated like any other landing page. (It should be stripped of extraneous links, actions, and content.)
Focus on the CTA and leave links about your job listings and office Chihuahua for well below the fold (meaning out of the region that people see when they first get to the page).
Considerations for strategy
- Keep copy brief and make sure everything you place on the page is relevant to its purpose.
- Although many people will flow through your home page, you don’t have to send all of them there. Creating dedicated landing pages for your marketing programs will help you stay focused.
- Form length is another great area for testing!
Considerations for design
- Use visuals to keep the focus on the most important features of the page.
- Set off the core space of the page with white space and move administrative links to a visually down-played footer.
- Make sure any header or side links don’t distract from the core mission of the page.
The cautionary tale
Oracle. How many things are there for you to click on just in this portion of the landing page? Thirty nine. That’s 39 opportunities for whoever visits the page to wander off before completing what the page owner would like the visitor to do. And this is where you ended up after clicking on a paid search ad, so they are paying a lot to distract people. (Sorry, Oracle, I owe you $10.) It’s a perfect example of where using a dedicated page would help them cut out unimportant content and focus on what they want to achieve.
Doing it right
Salesforce. This is by no means the prettiest landing page. But for enterprise software, it is admirably restrained. There’s no navigation bar up top, the few administrative links are tucked away at the bottom, and social links are small and discreetly grayed out. The form asks for just a few fields and follows up with a nice, bright, benefit-offering CTA.
VIA: VERY IMPORTANT ATTRIBUTES
We’ve all heard stories of companies that reserved a catchy URL, put up zero information about what the site was for, and harvested 1 million email addresses before they even launched.
You should assume that’s not going to happen to your company.
Instead, you’re going to have to give visitors some good reasons they should do what you want. Those reasons are the VIA: Very Important Attributes.
The reason for the “V” and the “I” is that this shouldn’t be a laundry list. The visitor is giving your site a quick once over, and they don’t want to read your product manual on the first page. Identify the two to five things about your product or service that you think will be most important to your visitors, and showcase those.
Considerations for strategy
It’s generally believed that you should describe what you’re selling from the customer’s viewpoint. In other words, explain what problems your product or service can help solve. That may be true for your site, or it may not; this is a rich area for testing. In general, you can describe your VIA as:
- Features – a list of cool things about your product or service
- Benefits – how the features will help your visitor
- Pain points – how the features will help your visitor avoid misery
Try different approaches to see what works with your audience. It’s important to test which attributes you highlight, how many you show, and how you describe them.
Considerations for design
- Make sure the list of attributes doesn’t distract from the CTA. You might tease attributes above the fold, and then locate fuller descriptions below the fold.
- Setting attributes off with icons or pictures can make a list more visually appealing and friendly.
The cautionary tale
Yammer. So… Now that Microsoft has bought Yammer, are they not actively trying to get people to sign up for it anymore? Because jeez, Yammer, show a little leg. Not only is this the WHOLE sign-up page, but the page you get to for “yammer.com” is just a log-in page. You have to click to find this tempting treat.
Doing it right
Unbounce (below the fold). There is a quick description of three VIA (with links so someone can learn more if they want). At the bottom of the page, there is another visually-distinct CTA for those who are ready to try it out.
EFFECTIVE HEADLINE
Copy written for print or display ads often features a clever, funny, or outrageous headline. It has to because those ads are trying to wave their arms in your face and distract you from whatever it was you were doing so you will look at them instead.
On your webpage, though, you aren’t fighting for attention. You’ve already done something to funnel your visitors there. Now you just need to convince them to pull up their chairs and stay awhile.
People coming to your site are going to decide in a split second if they want to go back to their game of “Words with Friends” or stay and see what you are all about. A key way to keep them is to tell them in plain language what your site is all about.
Selling a blanket with sleeves? “Home of the Slanket, the famous blanket with sleeves.”
Selling a marketing consultancy? “How to market better.”
Selling the latest location app? “Find your friends instantly.”
Considerations for strategy
People who are busy thinking “What the heck do these people do?” are less inclined to read your whitepaper, fork over their address, buy your widget, sign up for your webinar, or download your app. So when you’re writing your headline, go for clear and explanatory over coy and clever.
Considerations for design
Make sure the headline stands out visually, even more so than the logo/name of the site.
The cautionary tale
Workday. Between the two-word headline and the secondary text stuffed full of jargon (a trap most enterprise software has a hard time resisting), you come away not really knowing what Workday does. Of course, this is the third entry on a jQuery slider (and one of the other ones was a little better), but do you really want to assume your visitors are going to stick around for your slide show?
Doing it right
Cloudera. Okay, got it in a split second: it’s a platform for big data. The CTA (which could be better accentuated) tells us it’s for the enterprise.
RESOLUTION-SAVVY LAYOUT
Do you know that there are people out there still surfing the web on 800 x 600 monitors? And that the most popular screen size in the US still is 1024 x 768?
That means the overall visual picture you see on your big HD monitor might be very different from what your customer is seeing. Keep the most essential parts of your message – logo, headline, call to action, a supporting visual – in the center top of the screen, with supporting messaging lower down on the page.
Considerations for strategy
Make sure your designer knows which are the most important elements on your page and puts them front and center.
Considerations for design
If you can adjust your display, check the layout of your page at different resolutions to make sure that even people with older monitors will be able to see your headline and CTA without scrolling. And of course, check it on mobile and tablets.
The cautionary tale
This is Basecamp on a 1024 screen. We’ve got links that look like Google ads, an admittedly solid headline, and a mop of talking blond hair; but, after that, you have to start working for it.
Doing it right
And this is Visual Website Optimizer at 1024. Aah, it’s all there – good headline, bright CTA, social proof, and some VIA. Even on a smaller screen, the most important elements will be visible.
TIDY VISUALS
If you have spent more than 30 minutes on the Internet, you likely have seen one of those ads that has a GIF of a rotting banana with the headline “Lose 50 lbs with this one weird trick.”
Unless you’re actually selling a miracle weight loss cure to suckers, don’t let your landing page be that ad.
As with the headline, distracting elements can work when you’re trying to get attention. But when people are on your site, you don’t want to sidetrack them with a bunch of visual junk.
- A clean, simple design with plenty of white space keeps people trained on your call to action.
- Big font makes it easy and compelling for them to read and understand what your site is all about.
- Bullets make big blocks of copy easy to scan.
- Videos pack a big impact into a small space and can increase conversions 80%.
Images and graphics that are relevant to your product and related to your audience support your message instead of diverting attention.
Considerations for strategy
This is another good area to test. Does your audience react better to photos or illustrations? People or objects? Does it help to show the product in action?
Considerations for design
- Less is more. It’s tempting to add dramatic swirls, jQuery sliders, exploding graphs, and stock photos of people looking deliriously happy with their computers. But as with everything else, make sure it is in service of, and not distracting from, getting visitors to take action.
- Speed matters. A landing page that loads quickly gets better response. Make sure your design doesn’t slow down load time.
The cautionary tale
My Health Insurance. To quote Whitney Houston: Hell to the no. Among other horrors, we have here the cheesiest of cheesy stock photos, one of which is distorted; an extremely unsubtle arrow pointing at a button that isn’t even a button; pixelated text; something that says “Choose your plan” and yet doesn’t give you anything to choose; and of course the clownishly huge “Click Here” button, which doesn’t tell you what will happen when you do. I suspect your computer will blow up.
Doing it right
Ribbon. The use of color here draws your eye to the call to action. Navigation items are muted. The design is clean and simple, and the product is shown in action with a video.
SOCIAL PROOF
I once had a summer job at a nonprofit where I collected money door to door. One day I got on a bit of a roll and signed up several people in the same neighborhood. After a while, I didn’t even need to go into my pitch; I just held up my sheet, showed people that all their neighbors had donated, and they ponied right up.
As social creatures, humans tend to place greater value on things that other people have already approved. That is why most sites will tend to display evidence of such social validation:
- A list of customers
- Press mentions
- Usage statistics
- Testimonials
If you are just starting out, you probably don’t have a lot of this. But even one or two quotes from beta users, alpha users – heck, your mom – can show site visitors that someone else has derived value from what you’re offering.
Considerations for strategy
Gather up some good evidence of social proof for your page. And if your page is long-lasting (like a home page), keep it updated. Include new press attention, updated user numbers, great customer quotes, etc.
Considerations for design
Even if you’re displaying client or press logos, it’s important to keep the design clean and focused. Make sure the logos are of uniform size, and display them in gray scale if possible to minimize clashing colors and keep the focus on you.
The cautionary tale
Evernote. This is a very clean, pretty page, and the VIA are beautifully displayed. But the CTA is literally fading into the background, and there’s no social proof. I think everyone in the world uses Evernote based on the number of other apps I see that connect to it. Maybe they’re shy. Don’t be shy, Evernote!
Doing it right
Optimizely. Four pieces of social proof on one screen: the note about being featured on CNN up top, the “#1” statement in the header, “3,000 happy customers,” and the visually uncluttered presentation of notable logos.
CONCLUSION
All of these recommendations can be summed up pretty simply: be clear about what action you want the visitor to take and make it as easy and compelling as possible for them to take it. You, too, will soon have a landing page that CONVERTS!
Oh and P.S. – Don’t forget to test!
About the Author: Beth Morgan is marketing consultant and early-stage startup advisor. You can find more of her writing at her website, Marketing Nerdistry, or follow her on Twitter.
Excellent post. I think that if you make landing pages for human being and consider yourself as a visitor and see how a user would like to convert then you can make your landing pages awesome. :)
Thanks
Yes, always design for the end user. Decide what action you want them to take, and then guide them along in a persuasive and convincing manner. Many people, especially those surfing the net, will do what you tell them to do. Just make it clear.
Also, make sure to put yourself in the shoes of not just a customer, but your client’s customer! Does this make sense to me? Yes. Does this make sense if I’m {insert your client’s audience}? Yes.
I am on the verge of launching a new premium membership so users access some exclusive celebrity photos but I am not sure which is the best landing page to use, all the web sites here that you complimented have good landing pages but different styles…
I guess the A and B testing strategy is what I have to do, sigh!
What, a sigh for testing? Testing is luuuurvely. Yes, the caveat to my post is that all of this might be wrong for your site– try things out and see what works!
How to make a landing page that Convertsps ;)
Fantastic article. The landing page for Pocket is very lovely indeed. I’m busy redesigning my entire website at the moment and reading this has just given me even more options to consider! I thought I had it sussed, do I show my work, or show my services? Decisions decisions.
Thanks, Tony! Of course the key is in the PS– test! Try both and see what works?
Great post, Beth. I think you hit each topic very well. Though, I would argue that the 37signals design resolution is intentional to encourage the scroll. Scroll mostly equates to engagement. And 37signals is famous for their long form landing pages.
You’re right, I usually love their landing pages. I was surprised when I went to visit them to pull a good example and found this one, which I really didn’t like. But if they’ve tested it and it works for them, then hooray! The great thing about being numbers driven is that there are no sacred cows– these guidelines are more like a starting place that each company should test around.
Thank you Beth for a great article! I am actually struggling with this issue right now and your article gave me some ideas. I do have a question based on your article. How do you make such a simple homepage if your company does more that one thing? My website pearlclasp offers a few things for my customers and I am not sure how to simplify it all. We focus on pearl restringing for people who want to add/upgrade with a new clasp. However we also offer bridal jewelry, plain clasps for those people who can restring themselves, pearl jewelry, design your own pearl jewelry services and restringing services. I am having a really hard time simplifying this for my homepage because I want my visitors to know that I can do all of these things. Right now we have a slider of a few images but I do not think it is working well. Our conversion rate is pretty low and I am trying to improve it but I am not having much luck so far. How would you recommend making a simple home page that converts for a company that offers different products/services?
Thanks
Tara
You know, this is a very interesting challenge, and one that I think a lot of retailers have. When I was looking for sites to represent visual clutter, the first ones I scanned through were all retail– Walmart, Amazon, Target. They all stuff their home pages (most of their pages, really). Even Fab.com, which used to have a pretty restrained front page, has gotten way more busy. But it seems that your offerings can be pretty well summarized as pearls, clasps, and restringing, right? Do you have a designer, or are you doing it yourself? I wonder if you could challenge your designer to represent those concepts as minimally as possible. Calvin Klein is a good example of someone offering retail with a more restrained visual look (no surprise, as that matches the brand): http://www.calvinklein.com/home/index.jsp.
And as for the image carousel, see this recent KISSMetrics post: https://blog.kissmetrics.com/following-design-trends/ for a good discussion. Personally, I haaaaaate them. But as with anything, worth testing. =)
Tara, I thought I replied to this earlier, but now I don’t see it. Sorry if this is a double.
Anyway, retail is an interesting case. When I was looking for sites to represent visual clutter, I went straight for retail: Amazon, Walmart, Target. They all seem to want to stuff as much stuff in front of people as possible. And if you have a very broad offering maybe this is advantageous; Fab.com used to have a pretty restrained front page, but they get busier and busier all the time.
Your offerings aren’t necessarily that broad, though; it can pretty much be summed up as pearls, clasps, and restringing. Don’t know if you have a designer or are doing it yourself, but it seems worth trying to come up with a design that can simply and elegantly represent those categories– especially because simplicity and elegance are also stylistically a good fit with the product. Here are a couple of retail sites that are pretty elegant:
http://www.godiva.com/
http://www.brilliantearth.com/
Funnily enough, when I wrote my first reply I put in Calvin Klein’s site as a good example, and between then and now they changed the site completely and I don’t like the new one.
But who cares about my opinion? That’s why testing is so powerful. Try out a completely different, simple design and see if it works. Might not.
As for image carousels, see this earlier KISSMetrics post about those: https://blog.kissmetrics.com/following-design-trends/
Tara– I responded to this twice already, but it keeps getting hung up in moderation, maybe because there were links in the answer? Anyway, here is my second answer without the links. Email me at beth (at) marketingnerdistry (dot) com if you want them. =)
Anyway, retail is an interesting case. When I was looking for sites to represent visual clutter, I went straight for retail: Amazon, Walmart, Target. They all seem to want to stuff as much stuff in front of people as possible. And if you have a very broad offering maybe this is advantageous; Fab.com used to have a pretty restrained front page, but they get busier and busier all the time.
Your offerings aren’t necessarily that broad, though; it can pretty much be summed up as pearls, clasps, and restringing. Don’t know if you have a designer or are doing it yourself, but it seems worth trying to come up with a design that can simply and elegantly represent those categories– especially because simplicity and elegance are also stylistically a good fit with the product.
Funnily enough, when I wrote my first reply I put in Calvin Klein’s site as a good example, and between then and now they changed the site completely and I don’t like the new one.
But who cares about my opinion? That’s why testing is so powerful. Try out a completely different, simple design and see if it works. Might not.
As for image carousels, see the earlier KISSMetrics post by Bnonn Tenant about that. Summary: Not a fan. With research!
Thank for the acronym for our A/B testing tool
C = Clear Call to Action
O = Offer
N = Narrow Focus
V = VIA: Very Important Attributes
E = Effective Headline
R = Resolution-Savvy Layout
T = Tidy Visuals
mmm how will I delete this one…
S = Social Proof
Nice page, Dennis! A very good example. For those out there looking for testing tools, how is your service different from Optimizely?
If your an agency it makes sense to use our ecommerce integration and historical behavioral targeting. “show test when person visited X page + using this keyword in last 6 months”
I really enjoyed this article. I’m surprised though that in the “resolution savvy” section, mobile wasn’t covered. (And the examples throughout are mostly taken from widescreen monitors it seems.)
I’m working on landing pages, and use a responsive design on my site. I’m finding I need to strike a balance because what would be good practice on a monitor, does not work out well on a small screen. And mobile visitors can’t be neglected!
I had mentioned mobile in an earlier draft, I think it got edited out! That section does say that checking the design on mobile and tablets should be part of the process. You’re right that it would have been interesting to include some mobile shots in that section. Analytics will tell you how many of your visitors are coming from mobile and thus how important this is for your particular case– but it will get more and more important for everyone!
Hey Beth,
This is my second time reading this post and just wanted to say “thanks” for all the value.
I am not in favor of asking for social sharing on landing pages, but I do LOVE the concept of social sharing on confirmation pages. I’m going to give it a go.
In fact, I’m very interested in testing a landing page which truly gives the lead magnet for free, and then asks for a social share after the visitor has had a chance to enjoy the value from the lead magnet.
Never tried it. But I would like to see what the results are!
Thanks for the ideas. I love your posts.
Great, glad you liked it!
As a first-time visitor here, I have to thank you for getting directly to the point. So fed up with the run-around searching for useful advice on creating effective landing pages.
Entering new territory as I look for ways to boost online blog traffic and make a real living doing what I love _ writing and photography. Must admit, it is a bit overwhelming but this is a brave new world!
Definitely will put these tips to good use and look forward to more updates from KISSmetrics.
I understand the importance of landing pages for PPC or any specific campaigns but I haven’t been successful on convincing the rest of the Marketing team that landing pages are the way to go instead of using one of our existing product pages (within our site).
I’ve used all the main points: visitors don’t need to be distracted with our extra navigation or links, we need a clear and simple messaging, we need to include a clear form within the page, and so on. However, the response I received is we don’t have time to write more, the product page has everything we need to tell our prospects, we already have a ‘contact us’ or ‘request a demo’ link, cannot we still track conversion if visitors decide to go to another page from here?
How can you deal with this? Thanks in advance.
Maybe you can take things into your own hands by setting up Optimizely or Unbounce and making some changes yourself? Then if you get better results you can make a better case for fuller involvement.
Good tips. Thank you. We have got also some experiences in designing landing pages. Would be best if you include also some info about the Gutenberg Principle, F-Pattern and AIDA, which migh be useful to implement in converting landing pages.
I truly appreciate this blog post.Thanks Again. Really Great.
I totally agree about using visuals to keep the focus on the most important features of the page. It is a element of CTA and road to convertion.
Cheers!
How do you use emotional intelligence when trying to use landing pages for services like adoption or education? Landing pages seem to be factual and cut and dry. Customers looking for adoption agencies aren’t looking for facts. The cut and dry landing pages would be viewed as gimmicky in these human services areas. “Download our free white paper about foster adoption” doesn’t seem to tug at my heart strings and tell me that this agency knows what they’re doing. It tells me they know their process and how to get widgets on the other end. How should I feed my customer pipeline using landing pages in this industry? @ryan_avery_24
Ryan Avery
Well written with clear examples and direction, and concise analysis to boot.
With a good dose of humor thrown in!
Thanks for the great article