A recent thread in the CHI-WEB list prompted these musings on designing an effective landing page. I love creating landing pages! In our attention-deficit culture, they're the bomb.
What's a Landing Page?
Landing pages are the magic behind online advertising. When you click on a banner ad, or a link in an email, you are taken (when the designer knows what she or he is doing) to a specific, focused page that delivers whatever the ad or link promised you.Landing pages have to do the heavy lifting of converting the user from a prospect (someone who was interested enough to click) to a customer. A conversion doesn't have to be an actual product sale, though - it can be any action you want the user to take, like an employee filling out an open enrollment form online, or voting in a survey, or just reading a message or looking at an image or video.
That relentless focus on a specific, desired action by the user distinguishes a landing page from any other web page. By contrast, a home page usually must offer several possible actions or paths for the user, such as Find Contact Information, Log In, Review Services Offered, Shop the Catalog, Make a Comment, and so forth.
Landing Page Design Philosophy
My best advice: Keep landing pages extremely simple - and ruthlessly focused on whatever benefit or offer the user clicked to arrive there. The user in the scenario is already in the marketing funnel - so give them NO reason to jump out. Limit other navigation choices to some very secondary "other options." Sometimes we remove the global navigation altogether to help the user stay in the task we want them to be in.
The design of the landing page is certainly important, but it's vital to approach the landing page as part of a sequence. The tease in a banner ad or email is also critical to success. The sequence for marketing landing pages is often:
eMail -> Landing page -> Confirmation page
For a small business, it might be:
Printed URL (on a billboard, business card or letter) -> Browser -> Landing page -> Confirmation page.
Each link in the chain must do its job to get users to take the desired action. Consider how they'll find the tease in the first place. Make sure the tease is compelling. Test variants to see what drives the most traffic. Optimize for SEO.
Landing Page Examples
Netflix - The Direct, Simple Approach
Here's a sample offer email from Netflix:
And they wisely take me straight to their home page, which is an optimized landing page for prospects.
Sure, existing Netflix customers are important to Netflix too - but not as important on the public home page as what I call the "keystone" user of that page, the prospect. There is a Member Sign-In in the top chrome, but chances are, existing customers will "deep dive" straight to their login and account via a handy customized link in a reminder Netflix email anyway. That's good cross-channel strategy.
MyLife - The Gotcha Approach
MyLife (which used to be Reunion.com) teases registered users who aren't yet customers with emails like this one:
The registered user cared once upon a time about connecting with their past, so MyLife wisely pushes that button again in the email, trying to spark curiosity.
But then the marketing funnel hits a block. Instead of presenting the information they've teased, the user is negatively reinforced for clicking - a Roadblock landing page. In order to help people jump the payment hurdle, they're using time-sensitivity - see the ticking stopwatch, after which presumably the cost goes up or the offer terms sour.
But Wait! The Interminable, Hard Sell Landing Page
You'll be familiar with this type of landing page, it's the online equivalent of a 30-minute infomercial. I know they're effective, but I can't stand them. They smack of snake oil, the foot-in-the-door salesperson jabbering on, and on, overcoming objections by persistence and brute force.
Unfortunately, they work. Extremely well, in fact - as ably demonstrated in a Firecat First Friday coworking brownbag on email marketing given by San Antonio's Chick Whisperer Scot McKay a few months ago. Scot is a driven, intelligent marketer who continually experiments and tests, and repeats what works. This longer, overcome objections approach works beautifully for him. Scot's approach is to give, give, give, ask for a small sale, and continually build relationship.
I'm including as my example of the long scroller a typical landing page from Facebook's "Pied Piper" Mari Smith - because it's extreme, almost a caricature of this type of landing page. Mari's emails are very personal looking, not graphic, with the tone of a note from a friend. She also gives lots of freebies and carefully builds relationships. But when she's ready to ask for the sale, watch out! It's 12-15 screensful of information calculated to wear down the user. I can't show you the whole thing - that'd be ridiculous. Here's how one of Mari's landing pages starts, though:
Chock full of words straight out of Words That Sell
There are calls to action sprinkled throughout the long scroller. ("Now how much would you pay? But wait, don't answer - because for a special limited time, you also get...") Finally, finally! at the bottom we get to the main Call to Action element - which glows, pulses and screams. After all that effort, the user does need to be rewarded with an incontrovertible, straightforward "ask."
Techniques Checklist for a Landing Page
Mari's landing pages contain almost all the elements that could possibly help to convert someone from a prospect to a sale. Use some of them - or if you have the stomach for the hard-sell technique, all of them:
- Addressees: "Attention all coaches, marketers, entrepreneurs..."
- Emotional Promise: "Finally! Discover exactly..."
- Recognizable Brands (Twitter and Facebook logos)
- Promise of Benefit
- "We relate" verbiage - "If you're tired of being stuck, afraid to be left behind..."
- More Info - the user expects to navigate away with these links, but these are anchor links to sections further down the interminable landing page
- "Hard Truths"
- The Big Questions (in red, "Where do you start?"
- "You Could Try..." less desirable solutions
- "My Passion"
- Stats and Facts
- The Solution (her product) - at last, several screens down from the top
- Messages of Urgency
- Kill the Competition - why other providers aren't credible, and she is
- This is for You - stated in imperative language
- Checklist of Benefits (with big red checkmarks)
- Second Checklist of Benefits - But wait! You also get...
- Third Checklist of Benefits (What's Included)
- Visual Value - numbers and pricing with strikethru and better terms NOW
- Special Bonus!
- More Bonuses!
- It's Easy! promise (since all this is starting to sound like time-consuming work)
- Testimonials. Screensful, video, audio and text with selective bolding of key phrases
- The Press Says - More credibility building and press coverage
- Call to Action - The giant main Call to Action coupon, finally
- Special Price - Strikeout on "original price" showing discount
- Warning - limited time to create urgency
- Breaking News - Yet another special terms message with animated arrow
- Assurances - Secure transaction, Money-back guarantee
- Another Personal Message "I know it's a risk"
- Dangle the benefits again
- Less demanding call to action, a simple text link
- Letter closing with signature and photo (personalize)
A Quick ASCII Wireframe for a Landing Page
In our web design work, we often sketch out "wireframes" of pages -- not the pretty, finished look of a comp, but a utilitarian representation of the elements that belong on a page. Here's a very basic wireframe of a Landing Page - what I would sketch out on the whiteboard in a design meeting.
==================Logo Masthead/Branding
* Benefits statement
* Supporting info / list
[CALL TO ACTION (C2A)]
... other options.
==================
Mental Model of a Banner-ad-to-Landing-Page Conversion
Here's another of our tools to get essentialized enough for a really effective landing page: The Mental Model. In this process, we examine what steps, beliefs, emotions, objections, logic and so forth are pinging around in the user's head at these critical junctures.
Like most of our design work, this process is best viewed from the user's point of view, though I have tagged what's going on in our "design speak" and included some advice to the designer.
- See the offer (banner ad, email, website/link in context, print offer with easy URL). [Visibility, context]
- Get intrigued enough to click. Your banner ad, eNews tease or website paragraph with a link needs to be a compelling promise of a specific benefit. Paint a mental and emotional picture with images, words, sound, ideas. Make the link itself an action verb phrase in Second Person if possible, such as "Find Out More or Enroll Now". Questions also work well. [Emotional+Mental = Compelling]
- Did I arrive where I intended to? Match the branding and message to your ad/tease so this is instantly, intuitively processed.
- Is this for me? The user WANTS to believe or they wouldn't have clicked through to the landing page. Help them believe it! Tell them what they stand to gain, specifically and compellingly. Overcome anticipated objections. [benefit statement]
- What's the catch? This is the hesitation with the user hovering over your Buy Now button. Include the terms of the offer in a straightforward, factual, BRIEF manner. Include only what's necessary. Rework complex offers until they're essentialized.
- YES! [click]
- What now? Reward the user AT ONCE for clicking. If you need hairy registration information, your lawyer insists they actually scroll through the Terms of Service, and so forth - fine. But that can WAIT until AFTER you thank them, turn something green, check something off with a juicy large checkmark. You are building a relationship that's fragile. Hold up your end in a warm, HUMAN manner. [Positively reinforce the desired action]
- No, thanks. In case of NO, underneath/after the primary sequence, offer something to keep the user in relationship. Examples: Learn more, still not convinced? More info, testimonials and case studies can help salvage a conversion. If you have a free, trial or limited version, here's where you offer it. Other products or services? Doesn't hurt at this point. Still THANK them for their time.
Resources for Understanding User Mental Models
I highly recommend Dan Ariely's Predictably Irrational book to better understand the user's head space and emotional landscape when processing offers. By better understanding the mental and emotional state of the user, you can make an offer and overcome objections without subjecting users to the long, scrolling horror techniques.Another good book is Indy Young's Mental Models book, available from Lou Rosenfeld's site. Both Indy and Lou are top UX professionals and great sources of user-centered design info.
I'd love to hear what you think about landing pages, and I'm always on the hunt for spectacular examples, both good and bad. Send 'em on!
