Back in the 1990’s we thought having an animated gif on our web page was the greatest thing since sliced bread, but nowadays using an animated gif is considered a huge FAIL. However, by using video on our websites we are able to still capture the “wowness” of an animated gif with much better bottom line results.

Now that video production is affordable to all business sizes, we’re beginning to see companies use video on landing pages and not just their homepages.

Spinning off of Oli’s Your Landing Page Sucks! Here are 10 Examples That Don’t… I wanted to take a look at some great landing pages that incorporate video. Great landing pages explain exactly what you do in a brief amount of time, and video is a great asset for accomplishing such a task.

Here are 10 examples of pages that are crushing it with video.

1. Intuit

What better way to sell a product than to show it in action? The Intuit video itself does a great job of relating to potential customers, showcasing its benefits and explaining how easy it is to use.

What I like

• They include customer testimonial videos allowing visitors to see what others are saying about the product.
• Easy to read. The top section tells me everything I need to know about the product and how I can get started.

Things I’d change or test

• Remove all navigation at the top.
• From a design perspective, I’d have the “Start Now” section span the width of the page to add some depth to the page. See Zopim.com for an example.

2. Google

I like Google’s approach here. Give the user two main colors and keep the rest plain and simple. Immediately, the coupon and CTA button jump out at the page.

What I like

• The use of a coupon. Give something away for free to get your users into the door. We all can’t do it, but if you can it can really help conversions.
• Noncommittal copy. Users fear long-term contracts more than death and public speaking. Google’s copy includes “Request a free trial” instead of “Start your free trial”.

Things I’d change or test

• Headline for the video. For those not in online marketing, AdWords can be a complex system, so I’d put more of an emphasis on getting users to watch the video.

3. Path

Not only is Path a beautifully designed mobile app, but their homepage incorporates video right upon landing one it.

What I like

• Emotional connections. Rather than showing you the features (ie sharing with close friends), Path uses a more emotional connection by showing a husband and wife actively sharing photos of the family.
• Very little distraction. The copy is focused and there’s not much auxiliary content.

Things I’d change or test

• Add the number of app downloads or the number of captured moments.

4. UPS

Social Proof is one of the six “weapons of influence” in Robert Cialdini book Yes! 50 Scientifically Proven Ways to be Persuasive. He states that people will do things that they see other people doing. UPS uses Zappos to show the value of their services and how they help Zappos be the consumer friendly brand that we all know and love.

What I like

• Success stories. Using a well-known and well-liked brand such as Zappos will lead to increased conversions.
• Use of repeat shopper statistics. UPS has a hand to helping Zappos achieve 75% repeat customers. The implicit message is well done.

Things I’d change or test

• Minimize the amount of text. There is a lot to read through on the page and would like to see what happens if UPS remove the right side of the page.
• Dim the background. Changing the alpha setting on the warehouse image will make the main section stand out more.

5. Optimizely

Optimizely uses the video to show the simplicity of the application and lives up to its headline of “A/B Testing you’ll actually use”.

What I like

• No signup required. Allowing users to test drive your service with little or no barriers can lead to increased conversions. Even if a user does not sign up you may end up with a brand evangelist who can speak to the simplicity and value of your application.

Things I’d change or test

• Shorten the video. The video runs close to 4 minutes and gives you the full scope of the application. I’d test a 30-60 second video that gives viewers just a small taste of the functions. I think the product sells itself when you test drive it.

6. Zoho Books

Rather than making users read through all the features, Zoho Books shows you everything you can do in a quick 60 second video.

What I like

• Big video image. According to a recent Kelsey Group study, 21% of video viewers make a purchase. No wonder Zoho Books made the video so big.

Things I’d change or test

• Embed the video. Rather than using a modal, I’d embed the video, so users can sign up while watching the video.

7. Groupon

Groupon is known for being a little quirky. Example 1 and example 2. But the use of video to get unsubcribers to re-subscribe is utterly genius.

What I like

• Everything. From using video to having a call to action that says “Punish Derrick”, this is great execution on a page that most marketers ignore.

8. Animoto

I’m a big fan and a paying customer of Animoto. The design of this page is amazing and uses a unified tone of turning photos into amazing, theatrical movies.

What I like

• Video thumbnail includes a CTA. Most companies use a thumbnail that is a random scene in the video, but Animoto uses a call-to-action as their thumbnail which can dramatically increase views.
• Award design. The awards are very similar to the way awards are presented in motion pictures. Animoto does a great job of sticking with an overall message of the page.

Things I’d change or test

• Change the CTA Text. I would change the “Learn More” button to “See Pricing”. The user is already learning about the product in the video and the link takes the user to the pricing page.

9. VisibleGains

According to VisibleGains, they received a 51% conversion rate on this landing page. That’s pretty impressive and a big part of that success can be attributed to the video preview of the webinar.

What I like

• Huge focus on video. The video occupies a majority of the landing page and gives you a taste of the webinar.

Things I’d change or test

• Move the sign up form. The sign up form is a little far from the video for my tastes. I might try putting it a little bit closer to the video.
• Sign up form on the right. I wonder if having the sign up form on the right would increase conversions even more. My eye immediately goes to the video then my natural response is to look to the right of the video for the form.

10. Dropbox

Here’s a company that is fully invested in video. One of my favorite web apps out there, Dropbox has two options on this page – watch a video or download the app.

What I like

• Video thumbnail. The video thumbnail is beautifully designed and is incorporated with the logo itself.

Things I’d change or test

• Add a tag line. It might be interesting to test a tag line in case folks don’t want to watch the video and want to learn more the product. It may even lead to more video views.

Further Reading

• [Case Study] Using Video to Lift Landing Page Conversion Rate by 100%

Your Turn: What do you think?

Love ‘em? Hate ‘em? Got examples of how video has helped you to convert better?

– Steve young

Your landing pages should be this awesome! (Image source)

Fact: in the world of landing pages, there are far more misses than hits. If you’re skeptical of that statement, do some quick research by clicking on some paid search or display ads.

Here’s what you’ll find: over-the-top cheesy stock photos that evoke strange emotions, sketchy testimonials from seemingly non-existent customers, blast-from-the-past color combos with too much orange, green, bright blue and flashing red (think of a 1990s music video), displaced enthusiasm and more information than the user could possibly digest. Hopefully, you’ll be able to reopen your browser after the surprise audio feature crashes it.

When you finally do find a stellar landing page, you may want to jump out of your seat and high-five it. It will be conversion-centric, trust-inspiring, energetic and straightforward all at once.

There is no recipe for the perfect landing page design, but your favorites may look a bit like these:

1. Salesforce: Social CRM Service Cloud

Type: Lead generation
How I found it: LinkedIn display ad

This landing page promotes Salesforce.com’s Social Service Cloud platform, which helps client-focused brands and agencies engage with customers on social platforms.

Why the Page Rocks

With video and downloadable e-books, the page is packed with learning resources that visitors will find useful (plus, there is strong evidence that videos enhance conversions).

With testimonials from professionals like senior social media directors, the service projects an instant sense of credibility. Through videos, prospective leads are able to connect with industry experts as people rather than names in chunks of text or quotes.

Suggested Improvements

When you are asked to register, the benefit reason is related to the “Service Cloud”. However, the rest of the page fails to explain what the Service Cloud actually is or reconnect with this idea. While offering teasers to its value from industry leaders and experts, there is no to-the-point description for audiences who would benefit from more details.

Editor’s note: When you do click on the resources, expectation quickly turns to frustration by requiring that you register before even watching a video – this is a massive old-school #FAIL in my mind – sometimes you really have to give content for free and not only think about lead gen – at least let people watch the videos! Conceptually the page is really strong – just too much of an instant barrier.

2. UserTesting.com: On-Site Usability Testing

Type: Click-Through
How I Found It: Google AdWords campaign

UserTesting is a service that allows website owners to quickly collect inexpensive feedback to inform product usability and improvements.

Why the Page Rocks

With a straightforward headline, quick call to action button, and clear testimonials, this landing page excels as a trust-building communication tool. Within 30 seconds, I can quickly see what UserTesting.com provides, who is using it and what users have to say about it.

If you want to learn more, there is plenty of information to walk you through the process and help me make an informed decision. I even have a general idea of how much it costs, and I’m even more inclined to buy with the advertised money back guarantee.

Editor’s note: There is strong social proof shown with the list of existing customers, which can be a big conversion tipping point.

Suggested Improvements

Above the fold, the page is a little too text-heavy with language that could be streamlined into a couple of high-impact statements or bullet points.

3. Inbound Writer: Social Writing Applications

Type: Lead-Gen/Registration
How I Found It: Display ad on Problogger

Inbound Writer provides real-time social intelligence to writers for content optimization.

Why the Page Rocks

It’s short, simple, and straightforward. All important information falls concisely above the fold. Instantly, a compelling headline capture’s my attention, and the layout provides all important information that speaks to any content marketer’s values. A product that’ll help me improve reach and engagement? Where do I sign up? From a trust factor there is the all important “I won’t be spammed” statement, places correctly right beneath the email address field.

Editor’s note: After the simple sign-up, you are provided with a nice modal explanation of what to do next. Smart!

Suggested Improvements

The page feels a little impersonal and could benefit from a testimonial beyond a list of companies that are already using the product. As is, the dashboard screenshots are small and tough to follow: strategic image-cropping would help with a much-needed face lift, or some nice modal popup screenshots (lightbox style) would provide a deeper preview).

4. Blog Talk Radio: Create Your Own Radio Show

Type: Click-Through
How I Found It: LinkedIn display ad

Blog Talk Radio is a platform for people to create and broadcast talk radio shows online.

Why the Page Rocks

This landing page is an example that shows how photos can be an elegant and effective marketing tools. It builds a personal rapport with the audiences by incorporating pictures of real users. The images rotate through three different individuals — one male and two female– to appeal to a variety of demographics. The layout is simplistic, focusing on trust and usability as a key emphasis with real customer quotes and images that put faces to the name.

Editors note: A few other plusses:

• The CTA is really obvious and states exactly what will you will get when you click it.
• The benefits are laid out in a simple and easy to read manner beneath the main banner.
• It offers some free content/advice to teach you how starting a radio show can be good for you (the link at the bottom). Helpful, insightful and FREE advice will position you as a thought leader and make people remember and trust you.

Suggested Improvements

The landing page could benefit from a clearer description of the service. As-is, the emphasis is on the people who use the product rather than the product itself. A quick way to address this issue is to design a layout with an attention-grabbing headline that says something like “Create Your Own Talk Radio Show.”

5. Fidelity: iPad App

Type: Click-Through
How I Found It: Google AdWords campaign

Fidelity provides investment and asset management services to consumers through products such as IRAs and 401(k) plans.

Why the Page Rocks

This landing page leverages a layout that makes sense by keeping pertinent information above the fold and orienting the audience with a compelling headline and dominant visual element that shows a strong sense of content of use. The Apple gift card promotion is a strong incentive tool and added bonus for the campaign to help drive conversions. While the landing page is designed for desktop and laptop viewers, there is a QR code for people to get the app on their mobile devices.

Editors note: There is a video in the bottom-left to aid understanding for interested parties and help boost conversions. But I can’t help feeling that it should have been embedded inside the iPad iself – or at least have an enlargeable lightbox screenshot that can be opened from the iPad image. I feel like they missed the perfect spot for a product demo.

Suggested Improvements

Editor’s notes: The call to action button might be better as a double lined button which would have the affect of increasing it’s size/dominance – and separating the action and benefit. Another option would be to include the details about the $500 Apple gift card promotion would be better-placed beneath the call to action. Something to try as part of an A/B test.

When you click through, you are faced with a second landing page with terms and conditions (and unnecessary frustration). It would be much better to have the t&c be launched into a modal window from the first page so you can read it if you want and not be interrupted by it.

What about these landing pages caught your eye?

Please share your comments, good and bad. What did you learn from these landing pages? How would you change them?

– Ritika Puri

You may not think of a “Coming Soon” landing page as much of a target for improving conversion rates. Wrong. Just a year ago, startups like Hipster gained 10,000 subscribers virtually overnight without ever revealing their purpose. Brilliant foodie and social app Forkly had to put in a few late nights to create a viral invitation and social sharing form after a TechCrunch article highlighted their up-and-coming product.

Since then, startups have hopefully learned the lesson that they, too, can unexpectedly be thrust into the spotlight – and it’s best to be prepared. Now the question is – are you?

Here are five ways you can not only help spread the word about your launch, but reel in the kinds of customers you want to reach.

1. Be Brief about Benefits

You (generally) only have limited screen space in which to convince people to sign up. That means your most important benefits need to be above the fold (the first 1/3rd to 1/2 of the user’s screen space). The simpler and more direct the design and call-to-action are, the more likely you’ll entice visitors to take that action. I think just about anyone who sees the screenshot for Briefly (below) will remember the giant pair of underwear staring them in the face.

Why This Approach Works

In addition to its unconventional attention-getting graphic, Briefy also fits everything into one screen space, so there’s no need to scroll. It also posts its three most important benefits right below the main statement for easy reading. Signing up for notifications only requires an email address, which presents less of a barrier to cautious subscribers who are worried about spam.

2. How Soon is Coming Soon?

It’s no longer enough just to tell visitors that you’ll “add them to the notification list” when you launch. In this “always-on” day and age, we have on-demand expectations. Even if you’re not 100% certain when you’ll launch, giving users an approximate timeframe, such as Summer or even a countdown will help keep them interested. In Forkly’s case above, they even went so far as to detail their progress on their Tumblr blog, including how they had to quickly create a viral sharing script after the early deluge of traffic.

They’ve even posted a visual graph and their conversion stats a few months after this blog entry to let readers know how well it worked.

Why This Approach Works

Not only are you helping to keep customers “in the loop” while you’re putting the finishing touches on your new project, but you’re also building your subscriber list exponentially. For those early adopters who don’t want to wait, simply sharing an invite with three or more friends can instantly propel them to the front of the line. And early adopters are pivotal people to reach – particularly if your product has a tech slant.

3. Make it Easy and Rewarding to Share

Forkly did a great job adding in a social touch with their Private Beta launch. But then they went a step further by allowing people to jump to the front of the virtual line by inviting three of their friends. On top of that, the more they invited, the sooner they could start using the app.

Put your own twist on this idea. Can you give subscribers who share your invite link a behind-the-scenes look at the “making of” your launch? Even better – what can they contribute to it while it’s still in the early stages? A brilliant example of this is in the book Viral Loop. Not only can you read about companies that employ this same kind of strategy – you can also contribute to their stories.

Some Coming Soon landing pages try to persuade you to share by making it into a contest.

However, this can get costly depending on the types of products you’re awarding the winners (think something like an iPad 2 if you really want to build up steam). Using the Viral Loop method is inexpensive and hints at the early adopters’ deep-rooted need to “be the first”. A win-win for everyone.

Why This Approach Works

Using the Viral Loop method is inexpensive and hints at the early adopters’ deep-rooted need to “be the first”: A win-win for everyone. These are the vocal people who can be either evangelists or critics of your product, and you need both in order to succeed.

4. Make a Plan for After the Signup

Once you’ve got their name and email address – what’s the next step? If you haven’t thought this through, you won’t be able to spur many people into action after signup. A well-written autoresponder can take over here by encouraging the subscriber community to get involved. Ask for their feedback as you develop your product. Find out what they like and hate about competing products on the market. You may get some excellent suggestions and features worth incorporating.

Why This Approach Works

You can get directions to your nearest Yogolicious by using their Coming Soon page. But this page could likely perform even better if they allowed people to sign up for special offers by email, such as a free coupon, or notification of their next donation/yogurt social.

5. Tell a Story to Bring Personality to Your Page

Why are you launching this new product or service? People want to connect with the brains behind the enterprise, and chances are, your mission or goal will –in some small part- become theirs too. Thank them for taking the time to sign up, and introduce them to your virtual world. Being secretive and stealthy will only make people reluctant and discourage sign-ups (no matter how cool it may look).

Social cataloguing app Evertale did a mesmerizing job of this with their Coming Soon landing page, which took readers on a short, whirlwind tale about capturing and reliving daily memories. It was exciting, motivating and inspiring – just as it should be.

Why This Approach Works

When put together, short benefits, a launch timeframe, an injection of personality and a rewarding way to share and stay informed create the ultimate formula for a landing page that not only compels you to act, but also gets you enthusiastic about the brand and its future.

– Sherice Jacob

Don’t take that too personally, I’ve not actually seen your landing page yet. Rather, I’m going to cling to the assumption that it sucks simply because most of them do. Sad, but horribly true.

Note: I’m bringing this post back from the archives. A) because it’s timeless, B) because it’s awesome and C) as a teaser to an upcoming landing page examples post.

A real-world style landing experience
Imagine walking into a restaurant, and finding that the decor is gross, the music is too loud, the staff look sketchy, the menu has 400 options on it, they have an award on the wall for “Best meatloaf in Idaho, 1995″ and to top it all off, the place is empty. What would you do? I know I’d be getting the hell out of Dodge.

And online…
And that’s exactly what your visitors do when your design sucks, you have a video auto-playing with no mute button, there are no indicators of trust or security, the form has a million fields and the testimonials look like you wrote them yourself.

Excuse me waiter, could I just get the back button please?

Soooooooo, today we’re going to take a trip down to the Top-Notch Landing Page Store and see if we can rustle up something to inspire your next design.

Each of the following pages exhibits excellent qualities of conversion centered design, but most of them also do a couple of things wrong.

1. WebTrends Analytics – “lead”ing the way

I’ll admit it right off the bat – I have a crush on Webtrends landing pages. If you’re looking anywhere for design inspiration for lead capture forms, this is a good place to start.

What I like

• The hierarchy of page elements and information is well structured and focuses on the basics: a logo, a hero shot that combines a clear headline, a short description of the reason for and benefits of the product/service (in this case a webinar) and a lead capture form to gather visitor data. And… importantly… nothing else.
• The call to action (CTA) of lead gen forms almost always falls below the fold. To get around this they’ve placed a directional cue (arrow) at the top of the form to point the way to the action area below.

Things I’d change or test

• A tighter relationship between the directional cue and the CTA. Specifically, I’d make the button blue to match the form header – it blends into the gray background a bit too much right now.
• Change the CTA to describe what you’ll get when you click it. It should say “Register for webinar” rather than the undescriptive “Submit”. Sorry Webtrends, as much as I love you, this is a rookie mistake that should never be repeated.

Site*: Webtrends

2. UPS – using modal windows to keep visitors on the page

Even with a clean and conversion oriented design, many pages still commit the cardinal sin of providing outbound links that aren’t part of the conversion funnel. UPS have done a good job at avoiding this.

What I like

• The “More” links for the speakers all launch modal dialogs (using a Lightbox style). This keeps visitors on the landing page instead of wandering off onto another page – and away from your conversion goal.
• They have a video. Good! Video is a proven conversion enhancement mechanism. Studies from eyeviewdigital.com report up to 80% improvements in conversion. Video marketing specialists Turn Here highlight good conversion improvement numbers and the side benefit that properly optimized video can be 53 times more likely to reach the front page of Google search results. Tip: you can often re-use your video by placing it on YouTube.

Things I’d change or test

• The links at the bottom of the page still go to external microsites (click the image to see the full screenshot). Microsite’s still offer a more focused experience than your homepage so it’s not a big negative, however, a better “All In” move would be to embed them in Lightbox windows like they did with the speaker bios.
• The call to action would be better if it read “Get updates on future webcasts” rather than the generic and intimidating “Sign Up”. (The words might not seem intimidating to wily online veterans like yourself, but it expresses no benefit or gain – making it a negative interaction reinforcement statement).

Site*: UPS

3. The Future of Marketing – socially proven

Social proof in the context of landing pages refers to the idea that your visitors will be influenced positively (although there can be negative effects) by showing evidence of others participating in the use of your product or service. This can be presented via counters showing your social followers (Twitter, Facebook etc.), and testimonials that describe the emotional reaction to your offering from real world customers.

What I like

• Social proof is off the charts here. Instead of showing people following or registered for the conference, they are showing the photos and names of a huge collection of famous players in the marketing industry. Endorsements create credibility, which leads to conversions. Even if you don’t know who the organizer is (ThoughtLead in this case), the fact that it’s sponsored by IBM and has speakers such as Guy Kawasaki will do the selling for you.
• The call to action describes perfectly what you get. Free registration. (Note that this screenshot was taken after the conference so the messaging is related to a replay of the audio rather than registering for the conference itself).
• Contrast: The bright pink CTA stands out from the monotone background.
• Repeated CTA: On long landing pages (click the image for a full view), it’s important to repeat the CTA to remind people of the goal of your page if they’ve been scrolling for 10 screens. Here it’s placed at the top – above the fold, and at the end – for those who’ve finished exploring the whole page.
• Secondary CTA: In today’s social world, WOMM (Word of Mouth Marketing) is key. Here, they’ve added a Twitter sharing button to help visitors spread the word on their behalf.
• Confirmation CTA: Once you complete the form, you’re again presented with an opportunity to spread the word via Twitter. This is great use of thank-you page real estate.

Site*: Future of Marketing

4. Clearvale: No Jive Talkin’ – a seductive single CTA

If you were in a car driving down this highway, you’d have 2 choices: left or right. On this landing page, there’s only one thing to do, click on the sign. This is what’s known as a “click through” landing page. Other names include jump page or the beautifully named “romance page” – as the purpose of the page is to enhance the interest level of the visitor to a point where they are ready to move to second base. (I’ll give credit for the term “romance page” to Scott Brinker).

What I like

• The simplicity and seduction. It makes you want to click on the sign for two reasons: first because it’s your only option, and secondly because the copy on the sign implies some kind of controversial point of view.

Things I’d change or test

• I was a little underwhelmed when the next page was a blog, rather than a continuation of a marketing experience, so I’d do something more engaging at that point. But there’s no denying that the click through rate of this landing page would be very high.
• I don’t really get the connection of the visuals to the copy on the sign, but I suspect this is part of the allure, that you don’t really know what’s coming.

Site*: Clearvale

5. Groupon – beautifully simplistic flow

Here’s a great example of a simple guided landing experience from Groupon.

What I like

• They have used geo-targeted segmentation to set up my location, and are presenting a big bold value proposition statement (50%-90% off) to get me interested.
• Colorful with good action area contrast. The bright bold color is seductive and makes the action area (form) very clear.
• Usability. The progress indicator below the form lets you know that there are 3 steps and where you are in the process.
• Simple forms: In step 2 (the lead gen portion), they ask for your email address only, reducing the barrier to entry to a bare minimum.

Things I’d change or test

• If you don’t know who Groupon are (and despite their size, they haven’t reached everyone yet), there’s nothing to really tell you what you might be saving 50%-90% on. The imagery indicates alcohol which might be why I agreed to enter my email, but some qualification of the offer details would be good.

Site*: Groupon

6. Oprah – sweepstakes for lead gen

It’s Oprah. This stuff will generally sell itself, but it’s not all good. Read on.

What I like

• Focused on the benefits: By leading with the vacation prize they are tapping into people’s desires right away. The branding is so powerful in this case that it can be safely relegated to the bottom of the page.
• Branding: Oprah’s brand is her selling point, her face is on everything associated with her and here she evokes the feeling of being on vacation to entice her loyal following to win a little piece of the Oprah lifestyle.
• Sweepstakes are a very popular lead gen mechanism, and here they are using the free prize giveaway as an add-on to a “no risk” magazine subscription.

Things I’d change or test

• The privacy policy and rules links open up new windows which is a bit messy. A better solution is to use a modal lightbox like the UPS example above. You can see what I’m talking about on one of the Unbounce contest landing pages (click the contest rules link near the bottom to see the modal window).
• It pains me to repeat the same thing over and over, but the call to action on your buttons is REALLY IMPORTANT. Any doubt in the visitors mind as to what will happen can lead to little leaks in confidence. Spell it out clearly so people know what to expect. Here it could use a double lined CTA that starts with a primary first line: “Enter the contest”, then a second line “and start your trial subscription”.

Site*: Oprah Magazine

7. Verisign – shaping trust

This landing page is all about building Verisign’s central brand promise – trust.

What I like

• It tells a simple story: As a click through page, it provides enough information and interest to warm up visitors and encourage them to continue down the intended conversion path.
• Benefit based CTA’s: Each call to action is based on a real business benefit, encouraging a click to find out how Verisign can improve trust and what effect that can have.

Things I’d change or test

• CTA contrast: I’d prefer to see the CTA’s presented with more contrast to the rest of the page.

Site*: Verisign

8. CameraPlus – the ultimate long product sales page

This is the modern apple-esque equivalent of the old-school long sales letter landing page. You’ve probably seen the less trustworthy ones before, where the writer uses reams of ultra persuasive copy to convince you that, despite being an average Joe, they have managed to build an online internet business that prints money.

While it borrows the concept of a long page that piles on the features until you’re ready to buy, that’s where the comparison ends.

This is a very good landing page.

What I like

• The design matches the desires and expectations of the buyer. The target customer already has an iPhone, so they are used to seeing beautiful design with apps placed in context with their intended use.
• Context of use: This is an IMPORTANT concept. The primary iPhone image plays a video showing the app being used. This is pretty much all you need to be sold on the app’s cool factor. You can then explore the big feature list below to reinforce your purchasing decision.
• The price and call to action to buy the app are nicely positioned above the fold, leaving you to explore the page knowing how to interact when you are ready.
• Celebrity endorsement: Including celebrity photographer Lisa Bettany – who for the record (and gossip factor) is dating Mashable founder Pete Cashmore – is a clever device to help convince visitors that it’s worth buying. Professional photographers that just want a cool app for their phone will find this convincing.
• Proof of concept: The photo gallery at the end caps it off nicely by showing that you can take great photos with this app.
• The reviews beneath the phone are highlighted in red, making them the most important visual aspect of the first screen. While I would normally recommend the CTA get this level of attention, it really pushes you towards what is often the swing vote in a purchase – what other people say.

Things I’d change or test

• I’d be really interested to A/B test a short version of the page, letting the video do the selling instead of 10 pages of scrolling content.

Site*: http://campl.us/

9. SEOmoz – choices with the info to make an informed one

Despite how much this looks like a standalone landing page, it’s actually their main pricing page. They’ve taken conversion design principles and applied them directly to the most important page on the site. I like this approach a lot. It’s becoming increasingly common (for good reason) to include testimonials on pricing pages.

What I like

• Trust and credibility: The Verisign symbol is placed next to the purchase button and the grouping of worldwide brand names directly below helps to reinforce the value of the product.
• Succinct headline.
• Subtle mention of the customer count: Beneath the big brand customer logos is a nice little addition – “and thousands more” – adding to the trust element.
• Attention to different reading styles: There is a nice mix of bullet points, coupled with detailed descriptions for those who need to dig deeper.
• REAL testimonials: The photos look like they are taken from social profiles. Coupled with the name and company name, you’d be able to verify that these are real business people quite easily.

Things I’d change or test

• Call to action: The CTA here uses a nice soft word – “TRY”. Which gives off the sense of a low commitment offer. However, the only mention of the no-risk element, is the “30-day money back guarantee” at the top of the page. This should be restated at the point of conversion (i.e. beneath the CTA).
• Would love to know how this converts in comparison to a similar page that had the regular global navigation and footer distractions.

Site*: SEOmoz pricing page

10. Times Reader – showing context of use

As one of the world’s biggest newspapers, they clearly need to keep up with the times when it comes to marketing. (Trying desperately hard for a pun there).

Let’s dissect the final landing page of this collection…

What I like

• Lifestyle. The level to which they demonstrate the modernization of news consumption is impressive. Using a beautiful Macbook Pro and an inline video displays excellent “context of use”, and lets you imagine the new reading experience they are selling.
• It’s a great video that really demonstrates the power that video has to tell a story. Especially poignant given the product.

Things I’d change or test

• Like the SEOmoz page, I’d like to see the safety message (in this case – 2 weeks free), repeated beside the CTA.

Watch the video

Like I said at the start, I don’t want to link to the campaign page, to prevent skewing the stats just for editorial purposes. However, the video from this landing page is freely available on YouTube, which as I mentioned earlier, is a great re-use of campaign content to help your organic rankings.

Click here to view the embedded video.

If you have other great examples of landing pages or have any questions, please jump into the comments.

Cheers,

– Oli Gardner

* Note: links are provided to the associated brands homepage as a way of saying thank you for using their screenshots. I don’t typically link to campaign based landing pages (unless I’ve asked for permission) as that can mess with people’s stats.

Other note: “You suck” image source (from the blog index page)

After my last landing pages examples post (Your Landing Page Sucks – Here are 10 That Don’t), people asked for some examples from smaller companies. At Unbounce there is a giant pile of cool small-to-medium sized businesses that are creating landing pages every day, so I trawled through the community and asked some people to share their work.

Below, you’ll find 22 examples of landing pages that cover classic lead capture, product pre-launch/beta pages, ecommerce “buy now” or click-through pages and even a few microsites – and I’m stoked to say that they were all built using the Unbounce landing page platform. As usual, I’ve given them a mini critique to explain why I like them, and a couple of ideas they could use to optimize and test their pages for higher conversions.

Let us know what you think – provide your own critique in the comments

Because many of these companies are either new or small, I think it would be great if the community could dig in and provide their own critiques in the comments at the bottom. Conversion specialists, designers, usability, copywriters and marketers – perhaps you can make a name for yourself by lending a hand?!?!?

Note: If you do comment, include the # of the page you are critiquing for easy reference.

A discussion about conversion optimization

My goal here is to provide suggestions that might help others to solve similar issues on their pages. But more than anything, I wanted to show some of the diversity that’s being created in online marketing.

They’re not perfect (what page is), but they all show something interesting and worthy of discussion (hint hint – comments please!).

See if you can spot any trends…

Click-Through Landing Pages

Click-through pages are exactly as they sound. An intermediary page where the purpose is to persuade visitors to click through to a subsequent page. They are sometimes called jump pages or even romance pages.

Ecommerce Click-Through

A common use of click-through pages is to warm up prospective customers for an ecommerce transaction. The funnel conversion goal is the purchase of an item (perhaps a book or a mobile app) which will occur on the payment or cart page following the click-through page. As a result, the goal of your ecomm click-through pages is to convince people to “click a button” to buy your item – which will carry them on to the transaction page.

To be successful, ecommerce landing pages need to have enough information to allow the visitor to make an informed purchasing decision.

Key content includes:

• Product shots and videos shown in context
• Feature descriptions
• Testimonials
• Clear pricing
• Special offers (discounts)
• Time sensitivity – to create urgency
• Trust indicators: badges, accreditation’s and money back guarantees

These are some of the things I’ll be looking for along with the classic design techniques I referred to in “Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages“.

1. Mobile App Design Toolkit

Details

Source: A Clever Twist – iPhone & iPad Design and Development

What I like

First off, it’s a beautiful design (I’d expect nothing less from Jen Gordon) – which incidentally is designing a new iPhone App landing page template for Unbounce (releasing next week) so you can look forward to that.

Let’s break it down and look at what’s working on this page:

• An emotive headline: The main title describes an end goal that matches people’s desires.
• Point of conversion interaction: You’ll notice in several places that Jen has placed live chat widgets – most critically, right next to the CTA, to be able to intercept questions from anyone unsure about their purchasing decision. (Note to Jen: would love to hear if you’ve had any interesting conversations with customers using this).
• It has video: There’s a lovely video that describes in detail what you get and how to use it.
• Comes with an eBook: This is a great value add for those who don’t know how to create an app but want t design one.
• Relevant testimonials: The testimonials are targeted towards both target markets (developers and designers). Smart.
• A nice 3 section split: The top section is essentially a landing page in it’s own right, but then you can navigate (or scroll down) for explicit detail about what you’ll get in the kit. This is important for an item priced over a few dollars. The final section adds a nice human touch, showing a nice photo of the designer and family, and a list of previous apps for credibility.
• Price: This is one of the most critical elements. Discount psychology accomplishes 2 things:
  1. $199 sets a higher perceived value and quality for your product
  2. The discount makes it seem like people are getting a good deal
• Payment options: The methods of payment are clearly shown beside the price which immediately answers a common question that every ecommerce transaction brings up.

Things I’d change or test

I’ve already worked with Jen a bit on this page, but I’ll point out a few things that might tip conversions in the right way:

• Product branding: Black bars at the top of a page can be easily overlooked (they blend in with the browser and the contrast from the page makes you start below them). So I would recommend making a bigger deal of the brand (and possibly a logo) for the product itself. In my mind I want to know what it is first, then read the benefit statement (the rockstar title) second.
• A nice big [Play] button: I’d add one on the video to make sure people know that it’s a video and are enticed to watch it.
• Discount urgency: Try putting a time limited statement (til March 5th) or a numerical limit (the first 200) etc. to provide a sense of urgency

2. Franklin Mint – Kate Middleton Royal Doll

Details

Source: The Franklin Mint

What I like

• Timeliness: It’s always a good idea to take advantage of trends or events as the momentum builds. Tip: this is why being able to create landing pages easily and quickly is a great idea – you can jump on hot topics.
• Directional cue: The giant arrow directs you to the interaction/purchase zone.
• Video: Video can help landing page convert better. Aside from that, it also adds an emotional and human connection to the products being sold.
• Teaser: They include a special “coming soon” teaser offer which could make you bookmark the page and come back at a later date.
• Consistent CTA color: Simple rule, keep your call to action buttons the same color (people still break this for some reason). It lets people know what they can/should click. Usability 101.
• Secondary cross sell: Not a strategy I generally like as landing pages should perform better when focused on one thing only. However, each situation is unique, and if you know anything about the demographic that would buy this type of item you’ll know that they are quite obsessed by the royal family and Dianna in particular (even more so given that she was William’s mother).
• Limited Edition: Increases the sense of urgency and makes it feel like your item will be more special. Especially for those seeking to get the very first edition.

Things I’d change or test

• Invite Obama: For a start, if I were Wills or Kate, I’d probably change the wedding invite to include President Obama. Apparently he’s nonplussed about being left off the list :)
• Remove escape routes: I’m going to throw this old standard in because I really can’t find much else wrong with the page. The website at the top is a link (doesn’t need to be), and could cause people to stray – as could the footer navigation. Why is this bad? They will head to the main site where they may become overwhelmed by the selection and leave – or they might by something else. Rendering what could otherwise have been a successful campaign a failure from a metrics and conversion perspective. (i.e. someone or something else will get the purchase credit for your marketing efforts).
• Directional cue contrast: I might try bringing the arrow out a bit by increasing it’s contrast. This could be achieved by changing the color to differentiate it from the rest of the page, by giving it extra whitespace to make it super obvious, or by breaking a visual design plane (e.g. extend the left side of the arrow outside of the page boundary on the left). This visual change would catch your eyes and push them to the important part of the page.

3. Unshaken – The Book

Details

Source: Dan Woolley (author)

What I like

• Emotional video: Compelling content will always increase engagement. And the longer someone listens to you, the higher the chance they’ll buy into what you’re saying.
• Suggested uses: This might not be the type of book you typically buy, but the author cleverly points out that it would make a good gift for person a/b/c.
• Testimonials: Testimonials and association with famous people/shows are included for instant credibility.
• Simple headline: Spells out the drama of what happened and what the book is about. Very simple.

Things I’d change or test

• Testimonials: I’d put a photo of Bear Grylis (the adventure guy from Man vs. Wild) for extra validation (and to break up a text heavy page). I’d also include a Today show, CNN logo and a Larry King photo to show that it’s an important book that’s had a lot of coverage. (Rather than some poorly printed pet project).
• Price: The price is scored out suggesting that there is a better deal if you buy it now. This should be more prominent and positioned beside the button – right now it’s buried next to the small book cover.
• Charity: A portion of the proceeds will go to Haiti. Make this statement more obivous – right now it’s a footnote but it deserves to be given more attebtion.
• Testimonial style: Break the design of the page a bit by making the testimonials look like testimonials. Make them italic to differentiate them from the regular text on the page. Remember, this won’t have any impact by itself, but many micro changes will make a more powerful page.
• Make it clearer that it’s a book: The book image is a bit too buried on the page, and it’s important that people know right away what the object being discussed is.
• Above the fold: try bringing the CTA and perhaps the book and it’s details (price) above the fold – reference Amazon.com for inspiration.

4. Pact – Underwear with a purpose

Details

Source: Wear Pact

What I like

• Glow in the dark underwear: How can you not like that!
• Context of use: They very clearly follow the show don’t tell rule here (video of people wearing the product) – so maximum “Context of Use” points.
• Focus on video: It’s a very simple page with only two real options. Watch the video or leave. There are some ways to ensure more people watch the video which I’ll cover below.

Things I’d change or test

• What is it?: The headline is too brand oriented. It says nothing about what is being sold. You could solve this by changing the headline from FIREFLIES to FIREFLIES – Underwear that glows in the dark! (this statement alone will peak interest levels to a much higher point).
• Charity: One of the great things about Wear Pact is that they donate a portion of their profits to a worthy cause that’s happening “now” (rather than being tied to one charity). But this is only given a tertiary mention in the paragraph of copy below the video. Break out the information into chunks, highlight the fact that a portion of proceeds will go to Haiti, use a logo or badge from the organization involved in the donation.
• Video autoplay: Eek. Contentious. And I general hate it. But this is about testing – so set up a variant with autoplay on and see how it affects your conversions. You never know.

5. The Lion Movie

Details

Source: The Lion Movie

What I like

• Johnson boxes!: These red dashed lines are one of the oldest marketing design techniques (originating from direct mail) and although it’s old school, it’s still an effective way of drawing attention to your call to action and also perhaps relating to a demographic that might buy this type of gift (age wise).
• Discount for bulk purchase: An old trick, but perfect for this scenario. If you buy extra tickets (which you always would – who watches a family movie alone?) you get them at a perceived discount.
• Obvious what you’ll get: The photo of a DVD and movie ticket are self explanatory.
• Appropriate amount of content: Given the relatively low cost of the item(s) and the familiarity everyone has with movies and DVDs – the amount of content on the page is appropriately short.
• Implied urgency: Cinemas only have limited seating, which increases the desire to purchase in advance.
• Price discount: It works on infomercials (despite the fact that we all know it’s being done to us) – so including a discount is a good motivator.

Things I’d change or test

• Where’s the video!: This is the perfect page to use video to sell. Show a trailer from the movie to build attachment.
• Do the extra tickets also come with a DVD?: It’s not clear if I’ll get just the ticket or both for the $10 extra ticket price. The copy from left to right is in conflict – ensure they agree with each other so people know what to expect.

6. Course Park

Details

Source: Course Park

What I like

• Focus: The page is focused on only one of their courses which will help when achieving a strong message match with upstream ads, and quality score for PPC.
• Clear CTA: No question where to click or how much it costs.
• Money back guarantee: Increases trust and removes buyers fear – a key ingredient for successful ecommerce landing pages.
• The pretty girl: What can I say, I’m weak…

Things I’d change or test

• Course format: I can’t tell from reading the landing page what format the course will be in. CD, DVD, online, in person (the photo indicates this might be the case)? Showing a photo of the medium would let people know what is being offered.
• Contextual examples: I’d really like to see a video or screenshots of the course materials in use. Rosetta Stone do a decent job on this page (still several things I’d change though) – showing a laptop for the online course and saying that the box sets contain interactive CD-ROM’s. There’s also a video at the top.
• CTA secondary description: While the CTA has some plus points (mentioned above), it should describe what you get (the format). e.g. Buy Now $9.99 (includes 5 interactive DVD’s) etc.

7. Japan Times Learning Center

It’s hard to say much about this because I don’t read Japanese, but I thought it was worth including. One thing I found a tad confusing was the mix of English and Japanese in the title and branding.

Details

Source: Japan Times Learning Network

What I like

• Macgyver: Without knowing a lick of Japanese, I managed to mangle my way through the form on the subsequent page, which leads to a credit card payment screen. Hence it’s in the eccomerce section of the post. So really I’m just patting myself on the back.
• It’s in Japanese: It’s really cool to see non-English pages being created in Unbounce.
• Testimonials: If that’s what they are, they have included photos, which helps break up an otherwise text heavy page.
• Repeating CTA: It’s essential on long pages to repeat your call to action at strategic spots. (e.g. top, middle bottom).

Things I’d change or test

• CTA contrast: The calls to action are a little hidden. I’d prefer that the entire button (not just the arrow) was treated with the green color to make it pop out from the page. Or ideally, a color that didn’t match the bullet points and sub headers elsewhere on the page. Currently it makes it unclear which elements are interactive.

Social Media Click-Through

Social media oAuth features such as Facebook or Twitter Connect allow you to create more of a Single Sign On (SSO) concept, where the barrier to entry is reduced by letting people use existing account credentials to access your service.

8a. Gameground’s Halo Reach Facebook Connect

Details

Source: Gameground

What I like

• Know thy audience: The Gameground idea is all about socially connecting your game experience, so using a Facebook login is a great way to relate to your target.
• Speak their language: The mission descriptions can probably be recognized by players of the game – which will get them excited about the reward points they can earn.
• Tapping the arcade mentality: This is a “Like” for the concept – as it seems to imply that there will be high score tables (like on old arcade games).

Things I’d change or test

• Needs a clearer statement of what it does: After reading the whole page I don’t really get it. How does it connect and enhance your gaming experience?
• Example rewards: What can I use the reward points for? Show me something I’d like to aspire to and I’ll be more likely to try it.
• Clarify headline: “Complete missions and discover what’s next in Halo Reach” – implies that I might actually get an in-game special/secret bonus. Is this true? I thnk a little more detail could help here.
• Leaderboards: It says you can beat high scores and compare with your friends. How? Will there be an online (Facebook?) leaderboard. Showing a screenshot of this in context or explaining how you’ll be able to brag to your Facebook friends would be enticing.

8b. An alternate design direction

What’s great with this example is that we actually have a B page that GameGround used in an A/B test. This version produced a 60% higher conversion rate over the full funnel conversion goal. I’m going to be completely honest and say that although I added all of these images before I started writing, I’m doing the critiques one by one, and haven’t given any thought to this B version until now, so it will be interesting to see if any of the changes made correlate with my comments above. :)

Details

Source: Gameground

What I like

• Hero shot: This design has a much stronger hero shot image which screams Halo.
• Branding: The top bar now includes a stronger sense of who the company is (GameGround) and the “now with support for Halo Reach” implies that they do similar cool stuff for many games.
• Simplified CTA: The button is now focused entirely on Facebook which makes it stronger
• Better explanation of concept: There is a slightly improved sense that you can unlock extra stuff/levels in the game – but still not much to explain how.
• Competition: The leaderboard (at least I predicted that one) gives a sense of competition between you and your friends.
• Cleaner design: The design is a lot simpler.

Things I’d change or test

• Number of CTA’s: There is only one really clear thing to do which appears good at first (click the Facebook button). But the three feature boxes at the bottom get negative points as they all link to the same page as the Facebook CTA. I’d prefer if they launched small modal dialog windows (Lightbox style) that answered some of the questions people will have about the core features without removing them from the page or taking them to content they weren’t expecting.

Service Registration Click-Through

The major difference between this type of page and the ecommerce pages is that the destination page is a registration page – usually for an online product or service. B2B software as a service (SaaS) companies with monthly subscription models are a common use case.

Important elements to include on registration click-through landing page are:

• Screenshots showing the online application
• Logos of other companies using the service
• Illustrative diagrams illustrating how the software solves the pain of it’s target customers
• Indicators of no-risk (free trial) and low barrier to entry (quick to sign up)
• Clear statements of benefit
• Elevator pitch (30-60 second) style video demos

9. UberVU

Details

Source: UberVU

What I like

• Context of use: Showing a screenshot on a computer shows the app as it would be used and it’s a nice touch to show extend the whitelabel feature by pointing to where your own logo would go.
• Clear-ish headline: The headline area is nice and prominent, however you have to read all 4 lines to get the point. Sadly the final two lines are the critical ones.
• It tells a story: As soon as the second headline kicks in, you get the sense that they are really following the headline into an explanatory phase. This is a critical part to great copywriting. Also, each section ends on a positive note to wrap up the point.
• Trust indicators: Bags of trust points for having a slew of big brand clients presented in a color neutral way so as not to interfere with the power of the CTA.
• Strong and descriptive CTA: The CTA is dominant on the page and would easily pass a 6-ft test. (stand 6-ft away and try to spot the most important interaction point and what will happen when you click it).
• Clean design with lots of whitespace: Makes it really quick to scan and simple to read. This type of design really adds a professional feel to the page, very Apple-esque in many ways.

Things I’d change or test

• Video: Rather than having to sit through a demo – I’d like to see one right now. Putting a nice intro video 1-3 minutes into the iMac image would be a really nice way to increase engagement. You could also do an extended sales pitch on why they should request a full demo.
• Risk/barriers: A small mention below the CTA to qualify the process would be useful (can I get a demo now or after filling out a massive form? How easy is it to get started with your software, is there a money back guarantee or a trial?)

10. 99designs

Details

Source: 99designs.com

What I like

• Very clear statement of benefit: The headline (and subheader) spell out exactly what 99designs does and how much it costs. This would be a great example to bookmark for reference.
• Flow diagram: Not really a diagram, but by using numbers and arrows, they lead you through the process so you know how it works and what to expect.
• Samples of work: A selection of beautifully designed logo’s puts trust behind their brand promise.
• Descriptive CTA: Instead of the dreaded “submit” button – they’ve gone for a perfectly written CTA – “Start a logo design project” does many things. Firstly, it let’s you know that you are going in the right direction to get a logo created, it also warns you subtly that there will be a few steps involved (by using the word start).
• Social proof: There is a mention at the bottom of the page that states “Join over 40,000 satisfied customers today” which builds trust in 99designs ability to deliver consistently.
• Guarantee: Trust is improved by the promise of a 100% money back guarantee – nicely positioned close to the CTA.

Things I’d change or test

• Enhance the social proof: I’d try bringing the statement of 40,000 customers right up to the top – perhaps even as an annotation under the CTA.
• Add some contrast: Some areas of stronger background contrast would really help chunk up the content and make it more digestible.

11. Tropo – The SMS Experts

Details

Source: Tropo

What I like

• Bold, clear value proposition: It’s pretty clear what Tropo do. They let you enable your apps to send SMS messages to people’s phones.
• Trust: Lots of trust indicators used here: from a delivery guarantee, a list of all the major supported carriers, logos of big customers, and the backing of the biggest SMS platform provider in the world.
• Flow diagram: There’s a really simple 3-step diagram to help you visualize how it works.
• Speed to implementation: “Start developing in 60-seconds or less gives people incentive to give it a shot”. This probably only relates to getting your account set up but that’s half the battle.

Things I’d change or test

• Order of the header imagery: I’d try placing the CTA on the right-hand side of the flow diagram. So your eyes can naturally shift from left to right, figuring out what they do, ending on the call to action. Right now it feels like you’re being asked to start before you’ve had a chance to look around.
• CTA inconsistency: I’d prefer to see the bottom CTA retain the color and feel of the one at the top. Currently there are so many colors floating around the page it’s not immediately clear where you should be clicking.

12. Watch Mouse

Details

Source: WatchMouse

What I like

• The mouse has a massive eye: Gives me confidence that he’s paying attention :)
• The CTA dominates the page: There’s only one thing to do and it stands big and proud above the fold.
• Simplicity: A registration based click-through page needs to communicate an idea simply and quickly – this page is designed to communicate quickly (although it needs some work on specific communication aspects – see “things I’d change or test” below).
• Endorsements: Including the logos of big name customers increases trust and adds a little extra “if those guys are using it, then I should pay attention”.

Things I’d change or test

• CTA text order: I’d flip the hierarchy of information in the CTA to say [What you are going to do] followed by [A trust statement] to produce something like “Set up your public status page in minutes (Free 30-day trial).
• What is a public status page?: I have to admit to not being 100% clear on what these pages are and what they’re for. So I’d make sure I’d make it very clear what they are with a visual example in the top portion of the page.
• Screenshots are hard to read: It’s good that there are some screenshots of example status pages included, but they are hard to read. I’d suggest either focusing on one larger image or making it interactive to allow people to pop up enlarged versions.
• Explain the why: The headline states “Use a public status page”. It would be good to explain explicitly why they are a good idea and provide examples of companies that use them successfully (and what types of information they use them for).
• Increase the contrast: The main headline banner is close in color to the CTA. I’d change one of them so that the CTA pops even more.

13. Asking Canadians

Details

Source: Asking Canadians

What I like

• Strong visual communication: The multicultural imagery (and language chooser) ties in very well with the language of supporting your community.
• Simple explanation of benefits:
• Visual separation: The offer and benefits are clearly separated by the use of the enclosing gray area. This makes the amount of text content less daunting when you arrive at the page.

Things I’d change or test

• Consistent CTA: There are two “Join Now” buttons on the page, and each has a different design. I’d prefer to see an identical button style. There’s nothing wrong with having different copy on the buttons, but they should be identical stylistically.
• Value reminder: The call to action could be enhanced with a reminder of what you could get when you join. A double-lined CTA would provide clarity. e.g. Join the Research Panel (for a chance to win $1,000 in rewards).
• Interactive elements: The “$1,000 worth of:” in the subheader is designed to look a bit like a button and commands most of the attention on the page. While it’s important to give weight to the core benefit of registration, it could be done in a less interactive looking way.
• Word placement: Consider moving the word “win” from the end of the subheader to be the first word of the next line – to produce “Win $1,000 worth of:”. A subtle change that reads in a more powerful way.
• Copy position: The benefits listed on the second half of the page could be called out more (what they are) by separating the line “Here’s what you will get:” onto it’s own line above the three bullets. For extra clarity, the wording could be changed to say something like “Here’s what you’ll get for joining Asking Canadians:”

Landing Pages with Forms

Many landing pages include forms: either to collect user data or to process their requirements for the purpose of looking up a second level of information (search, booking). In marketing, the most common use of a form is the former and is known as lead generation (lead gen) or lead capture.

Lead Gen

As the name implies lead gen landing pages are used to generate a list of customer leads (usually in the form of an email address or phone number) for the seller.

Effective lead gen pages follow some specific guidelines:

• Short forms: Don’t ask for more information than you need.
• Give to get: You should be giving something away (the prize) to help persuade your visitors to part with their personal data.
• Balance the size of the prize with the effort required: An exchange of information should always be fair. People are reluctant to give up their information, so make it worth their while. The bigger the prize you are giving away, the more information it’s okay to ask for.
• Use contrast to visually separate the action area: Your lead gen form is the key interactive area of the page – use visual design rules to make it stand out.
• Beware the fold: As much as I hate to use this old-school term, it still has an impact on some people. The standard rule is to keep the form button (your CTA) above the fold. This is impossible with long forms, so you have to employ visual cues to help point the way. Read “HOW TO: Keep Your CTA Above the Fold on a Lead Gen Landing Page” for more information.

14. The Martell Experience

Details

Source: Martell Home Builders

What I like

• Directional cues: The whole page is designed with directional cues pointing at the email form. There are three in total: the photo points down, the “sign up now” arrow points to the right, and in a subtle way, the roof on the logo at the bottom points up. Very nicely done.
• Choice of contact method: From testing I’ve done, there is always a portion of your customers that won’t like your chosen method of contact – guaranteed. So offering both email and a phone number gives them options.
• Trust: Providing a big phone number lets visitors know that there are real people behind the business.
• Happy photography: There’s a fine line between cheesy stock photography and imagery that really works and this one really works in my mind. Anyone who’s moved can relate to the feeling of moving into a new home (and the associated stress). This image paints a picture of a painless and happy experience.

Things I’d change or test

• Buying a new home where?: The advertising for this page is probably well targeted at specific geographic locales, but it still produces an element of doubt when the location isn’t included.
• What do I get?: After reading the CTA, I can see that I’m going to get a 99-day guide. But there’s no visual cue on the page to make me think I’m going to get a report until I’ve already decided I’m ready to go. I’d suggest trying an extended secondary headline, perhaps like this: “Use our free 99-day New Home Countdown Guide – and start moving into your new home:”. That way the expectation is set right away that you’re offering help in the form of a guide.
• What’s in it?: If you are giving something away (and want people to want it), provide a preview (the first 10 pages or first chapter) so they can see the quality and understand the benefit of doing business with you.
• Copy tweak: Instead of “Sign up now”, I’d test something less committal like “Get the guide now”.
• CTA color contrast: This is the point where I’d say that the button should be a different color than the rest of the page to make it stand out, but there are exceptions to every rule. Given that the entire color palette consists of only 4 colors, I sense it would be hard to find something different that wouldn’t ruin the calming aesthetic of the page, so I’m going to leave this one alone.
• Trust statement: The anti-spam trust statement in the footer about not sharing your email, could be connected to the email form a bit more closely. Whether through an asterisk (*) on the text inside the form to indicate that people should read the statement below, or moving the text to the area directly below the form.

15. Overtis

Details

Source: Designed by Matizmo

What I like

• Clean contrasting design: Separating the content from the action area (with the enclosing gray box) lets you know what you need to read and what you need to do.
• Directional cue: The strong black arrow leads the way to the action area.
• Bullet text styling: The bullet points are very easy to read as the intro to each (just like what you’re reading now) begins with a statement in bold.

Things I’d change or test

• Stats: I’m guessing from the content on the page that the white paper will provide some statistics about retail fraud in the UK. Pull the juiciest of these and boldly state it on the landing page to lift the level of persuasion. This will also make people more inclined to talk about or share the page – helping you to gain valuable word of mouth exposure. Remember that even if someone downloads the whitepaper, they might not read it now (or ever), so if you can plant a salient and powerful stat in their brain, you have armed them with a water-cooler topic.
• Don’t submit!!!: REgular readers will know that I hate buttons that say “Submit”. Its a simple rule. State exactly what will happen when you click the button. In this case it could be “Get your free white paper now”.
• Make the headline more descriptive: The headline as it stands doesn’t tell you very much. The important details are spread between the headline, the small red statement above it and the content below. But a good portion of your visitors will leave before putting in the effort to read all of it. I’d like to see a more specific headline like: “Learn how to increase revenue by beating retail fraud”. The word “learn” indicates that you’re going to teach them, “increase revenue” provides the incentive and “beating retail fraud” targets a pain point of your visitors.
• Provide a preview: If your content is worth reading, stand behind it by offering a free sample. Try-before-you-buy is a tried and true technique that can be utilized here by offering up a free chunk of the white paper to whet the appetite.
• CTA contrast: I let the last page off the hook, so I’m going to jump back on this idea now. With such a plain design, a bright and boldly colored CTA would leap off the page. Give it a try.

16. Scoop St. Deals

Details

Source: Scoop St.

What I like

• It’s dead simple: If you want to get New York deals, enter your email. Simple.
• Trust statement: It seems obvious when it’s right there (nicely positioned close to the form) – but if you were to take the no-spam statement away, the form instantly loses valueable trust points.
• Clear CTA: Visually it stands out on the page. In terms of the copy on the button, it tells you exactly what you’ll get (today’s deal). Perfect.

Things I’d change or test

• Hierarchy of information: The yellow strip at the top contains really powerful social proof (30,000 people in New York alone have trusted us with their email), yet it’s hidden in what could be a browser status message area. I’d try flipping it beneath the blue branded header.
• Frequency of emails: The CTA lets you know that you’ll see today’s deal, but how often will I receive emails from you? Daily? (probably) But you should say somewhere on the page.
• Radical design change: Another idea my insomnia just brought to bear would be to leverage the social proof in a more visual way. Imagine an overhead shot of a corner store that had a deal on (big DEAL sign in window) – and a line up of 30,000 Photoshop’d people lined up the street to get at the deal. This would represent two things: the fact that you’ve reached a critical mass that makes you trustworthy, and also that you can get the deal online and forgo the lineup. Just a thought.

Pre-launch Lead Gen

The coming soon page is seeing a renaissance of late. Gone are the 90’s “Under Construction” pages, and in their place are private beta invites, sneak peaks and viral sharing tools to gain entry. And it’s all about lead gen. Gathering a list of interested potential customers before you launch, so you have someone to market to when you open the doors.

17. Band Demand

Details

Source: Band Demand

What I like

• Bold relevant design: It’s clear from the moment you see the page that it’s about music, and it’s about local music (Austin in this case). Localized pages need to make this very clear to avoid getting false leads from people who don’t realize. Here you are left in no doubt that it’s about music in Austin.
• Directional cues: The bright red leads your eye to the Sign Up graphic (tip: insert important info here) and the arrow points you down to the form.
• Social sharing devices: Music is very social content, as is the information surrounding it, so I like that there is a social sharing widget on the page.

Things I’d change or test

• Messaging: The brand and messaging seem to be slightly in conflict (the name makes me think of a crowdsourced movement to encourage bands to come to your local area) while the messaging says it’s about updates and discounts. For the record, this is to be expected when you’re refining a pre-launch page, as part of the purpose of the page (and in testing it) is to hone your messaging until it’s very clear – ready for when you launch for real.
• What’s coming soon?: Is Band Demand coming soon? Or is the Austin portion of the service coming soon? I’m wrong about my classification of this page if it’s the latter (which is implied by the big “coming soon” stamp over the word Austin.
• Brighten the form text: The text in the form is very hard to read – it needs to be brightened up a bit so it’s more obvious.
• Email or snail mail: I think I’d remove the envelope as it implies regular mail, and it would improve the contrast of the arrow.
• Try alternate social widgets for social proof: Instead of the generic Share This widget, I’d consider using Facebook or Twitter sharing buttons that show a share count as they are used. This provides a sense of social proof which can increase trust. Most widgets like that allow you to show or hide the count. My recommendation would be to hide the count until the number is vaguely impressive and then show it.
• Try alternate social widget placements for higher usage: On a lead gen form like this, you can often get more action on your sharing buttons by placing them on the confirmation page. Read this post on “Post-conversion Strategies for Lead Gen” for more details.

18. Clever Scale

Details

Source: Clever Scale

What I like

• Simplicity: This is what we do, here’s a screenshot. Give us your email and we’ll let you know.
• Multiple engagement mechanisms: At the pre-launch phase it’s important to build leads in many ways (and different people have different preferences). So adding in Twitter, RSS and (assuming) RSS Email opens up choices for visitors.
• Sneak peek: The screenshot provides a teaser of what’s to come to help nudge people into subscribing.
• Descriptive words on the CTA!!!: It’s about as simple a statement as it could be “get notified” but it at least describes what you are doing. They get +1 for not saying “Submit”.

Things I’d change or test

• Bigger screenshot: Let people click on the screen for an enlarged view.
• Add a few bullets of features to expect: The screenshot alludes to an analytics dashboard – this could be described along with some benefits of the service and the company behind it.
• Offer a white paper or report: Cloud storage (and it’s benefits) might not be familiar to all visitors to this page (unless it’s very well targeted at CTO’s), so offering a free report about why cloud storage is the way forward, would provide some real benefit to people and enhance your position as a thought leader or expert in the field. It would also increase your conversions.

19. Contact Complete

Details

Source: Contact Complete

What I like

• The blog link: Normally I frown on extra navigation on landing pages (especially global nav), but as I mentioned at the start of this section, “pre-launch” pages are evolving, and at this stage it could be beneficial to allow this secondary engagement mechanism. The blog will do two things: provide extra content that may help people believe in your business concept and extend your contact methods via a potential RSS subscription.
• Explicit value statement: You are told (nicely in the context of the form) that by entering your email you can become an exclusive beta tester.
• Clear bullet points: Bullets are much easier to scan (for the info that will trigger your particular conversion impulse) than a paragraph of text, and I also like the way the intro to each bullet is bolded to provide emphasis.

Things I’d change or test

• Diagram or photo?: The picture of the salesman (if that’s what he is) is the most striking thing about the page, yet it doesn’t tell me anything about what the company does. In a circumstance like this, I often find a diagrammatic representation of how the system works is worth a million words (and this page is a touch text heavy). This example from WebTrends has a very similar layout but tells more of a story.
• Action area contrast: Highlight the action area (the form) by enclosing it in a colored box. Not only does this draw the eye, but it also relaxes your brain by telling you that it’s the place you need to visit after you’ve finished reading the content on the page.
• Make the examples clearer: I don’t really understand the content in the lower-right corner. Why and how are people sharing this information – and what precisely are they sharing (could spark privacy concerns here)?
• Action area title: I think the statement about becoming an exclusive beta tester is a stronger and more actionable headline for the form area than “The free industry directory is coming”, so I’d use that as the opener above the form.
• Go?: Nope. Make the button describe what will happen when you click it. I’d try “Become an exclusive beta tester” (which could fit on a bit button on the next line, rather than crammed on the end).

Online Booking

Online booking forms generally differ from classic lead gen because you’re not required to enter any personal information until you decide to book or not. (There are exceptions to this, but in my mind, anyone that asks for an email address before showing you room availability is asking too much).

20. Mammoth Lakes Ski Accommodation

Details

Source: Mammoth Lakes Ski Accommodation

What I like

• Alternate contact methods: Many people still lie to do their travel bookings over the phone (both for credit card security reasons and for the personal touch). This page obviously recognizes this by placing the phone number right at the top – saying “we have real people waiting to speak to you” which adds trust.
• Context of use: The photography makes it very obvious why you’d be staying there – for beautiful mountain scenery and skiing.
• Clear value proposition: The opening headline makes it very clear that they are offering discounted rates.
• Subtle urgency: The statement – “Book Now and Save” quietly implies that you can get a better deal if you hurry up and book it right away.
• The form only asks for the essentials: Only the arrival and departure dates and number of guests are asked for – no email or personal data is required (which would scare some people away).
• Relevant call to action: “Check availability now” is perfect CTA text. 10/10.
• Testimonial: There haven’t been all that many testimonials in the examples so far, but they are critical for travel related pages. Testimonials (if believable – see below) can greatly increase your conversion opportunities.

Things I’d change or test

• Alternative testimonial methods: As I mentioned above, testimonials are a deal breaker for travel related conversions. The more believable (and verifiable) they are the better. Two ideas spring to mind here:
  1. Link (in a new window) to, or show content (with links for verification) an independent travel review site such as TripAdvisor.com – if you are good place to stay, there will be good reviews and the transparency will boost your sales significantly.
  2. Show a social feed of positive commentary about your location and/or company. See the section titled “Testimonial social proof” in this post about social landing pages for more details.

Microsites

Microsites are essentially a half way point between a landing page and a website. They usually have about 3-10 pages (ballpark) and what makes them different to a small website is that they are usually still built to be promotion specific. They have been commonplace for higher priced items for a long time (cars being a prime example). When compared to a single standalone landing page, they provide an extended experience with a very different interaction experience (including navigation, exploration and longer conversion paths).

21. Vinotrac

Details

This is actually more of a complete site (as opposed to a marketing based microsite) but I’m including it to showcase what’s being built with Unbounce. As such it’s hard to critique in the same realm of the landing pages that we’ve already studied.

Source: VinoTrac

What I like

• A whole site!: To start with I just want to say that Unbounce wasn’t designed/built to construct microsites (at this point we’re focused on landing pages) – so it’s just kinda cool that the Vinotrac guys have built their whole site with it.
• Barrier reduction: The CTA includes the statement (no credit card required). If this is the case, it’s always a good thing to mention on your call to action as it let’s people know up front that there are no financial barriers during the signup process.
• Design is focused on the value proposition: The headline is given lots of space which helps it stand out as the primary thing you see when the page loads. A high quality screenshot is shown that allows you to see enough detail to understand a good portion of what the app is about.
• CTA contrast: The orange buttons really stand out against the page design, drawing your eyes to them using the principles of contrast and color.
• Simple content layout: The content on the homepage is nicely chunked and spaced out to facilitate quick and easy reading.

Things I’d change or test

• Main headline communication: If you were to look at the headline in isolation you’d be hard pressed to know what it was referring to. The subheader helps a bit, but my advice would be to test the headline by itself (just show it to people on a piece of paper and ask them what it means) until it’s 100% clear.
• Nothing to install: The content in the lower left section (“Nothing to install or worry about”) focuses a bit too much on the benefits of online software as opposed to the Vinotrac application itself – I’d use this valuable space to highlight a core feature or benefit.

22. Audio Cubes

Details

Source: Audio Cubes

What I like

• Context of use 1: The visual design mirrors the lighting experience that occurs when using the product in a live environment. Setting the mood is an important way to connect with the expectations and desires of your visitors.
• Context of use 2: Two videos are used as primary communicators to show the product being used.
• Clear CTA: The bright yellow call to action stands out clearly against the dark background and as a unique color on the page.

Things I’d change or test

• Separate interactive elements: The navigation links are colored the same as the headline, logo and bullets. Whenever possible, try to separate your page interactive elements from content.
• Buy now (how much?): There doesn’t appear to be enough information to support an informed purchasing decision. This could be aided by including the price on or near to the CTA. Don’t be afraid to be transparent. If your product is expensive, letting people know that will add the perception of quality – don’t shy away from the truth.
• Awards & testimonials: Two awards are listed at the bottom of the page coupled with some testimonials. Extra weight could be added to these areas with some titling (e.g. “Testimonials & Awards”) – remember, people are impatient and if you can make different areas of content easier to comprehend, they will digest more of the information in the few precious seconds they spend on your page (they don’t even need to read the content – just knowing that you’ve won awards can be a difference maker).
• Trust and reassurance: The “Where to Buy” page has details of a money back guarantee, but if you don’t visit this page you’ll miss this vital information. For those who click the “Buy Now” button for exploratory reasons (perhaps to find prices) – you could re-present the guarantee details on the purchase page.

Landing Page Trends

Did you spot any of the following trends? Notice anything else?

• CTA text: There are still way too many people using the word “Submit” on their buttons. Shame on you. :)
• Video: Only 5 of the 22 used video (tsk tsk). Interestingly, most of them were on ecommerce click through pages.
• Page length: Long landing pages used to be the realm of the long form sales letter only, but I’m seeing more and more long pages appear that are professionally designed and essentially split a microsite into a single page.
• Microsites: Question: how important are multi-page sites for your marketing needs? And feel free to debunk/argue with anything I’m saying – I love to debate and talk about this stuff…

What do you think?

Please jump into the comments and share your thoughts about how these landing pages could be further optimized.

– Oli Gardner

Landing page design is easier when you have some inspiration, so I dug out some of the cool pages our customers have been building in Unbounce. Would love to hear your thoughts about the pages in the comments section.

Enjoy…

Loop 11 Usability

Page Details

Type of landing page: Click Through
Website: Loop 11
Built using Unbounce?:Yes

Why I Like It

It has a Zebra crossed with a Rhino! How can you not like that?

It’s a very congruent page, where the imagery supports the headline (a new breed). The call to action is very obvious, using conversion design principles (whitespace and contrast) and has text that explains a key benefit (that you can try it for free). The compelling design kept me on the page for a long time and more importantly, made me want to share it with other people. Having a viral quality is a big bonus for a landing page.

Optimization Suggestions

• Considering the viral quality of the design, I’d like to see some type of “Share This” social media button (Facebook or Twitter).
• After clicking through to the destination page (a sign up form) – I noticed that the application can be used on an iPad. It would be a great test to have a video on the landing page that plays inside an image of an iPad. Showing the tool in action could provide the extra information required to inspire a sign-up.

College Ready or Not?

Page Details

Type of landing page: Lead Gen
Website: College Ready or Not
Built using Unbounce?:Yes

Why I Like It

The design is fun and original, and helps establish the tone of a learning environment. The form stands out well due to the contrasting color and makes it very obvious what the intended conversion goal of the page is. The sidebar is set up well to provide a list of benefits – easy for testing.

Optimization Suggestions

• The page could use a stronger headline that describes the unique value proposition of the service. It takes a little while to understand what you are signing up for.
• The CTA should describe what it is you’ll get by registering.
• Ideally the submit button would be more distinct. Right now it doesn’t look like a button. Although, it’s only small factor on a page this simple.
• Consider having different landing pages for the separate demographics (students and parents). This would allow you to target your messaging more closely to their needs.

Styllist

Page Details

Type of landing page: Lead Gen
Website: Styllist
Built using Unbounce?:Yes

Why I Like It

It’s instantly obvious what the page is about. Fashion. The headline spells out the core value of the service and the single field lead gen form provides a low barrier to entry for people interested in receiving updates.

Optimization Suggestions

To encourage more people to sign up, I’d like to see a few extra pieces of information on the page:

• An example of the type of information you will receive. A lightbox popup containing an example email, that shows the inside information subscribers will get, might convince me to register.
• A short privacy statement to let me know you’ll not abuse my email address.
• Perhaps an indication of when you might launch?
• Who is it for? If it’s just women’s clothing, you should probably state that in the copy. It’s implied by the photos, but not explicitly stated. If it will cover men’s fashion, either include some male models in the photos or create a separate landing page for each segment.

What’s The Dealio? San Francisco.

Page Details

Type of landing page: Lead Gen
Website: Where’s the Dealio
Built using Unbounce?:Yes

Why I Like It

Firstly, a beautiful design that echos the vibrant color of the Golden Gate Bridge. From a conversion standpoint, the fine print beneath the form lets you know what to expect – a daily email.

Optimization Suggestions

• The main headline is being A/B tested on different versions of the page which is great. From the three I saw, the one shown seemed to be the strongest (but you can never tell). I’d like to see a very direct statement here that says something very simple like: “Get a new San Fran discount every day”.
• Like the previous example, showing a sample of what you’ll get might be of benefit, although it’s less of an issue here as the service is live and you’ll get something sent to you almost immediately.
• I’d change the CTA to say something like “Send me the dealio” rather than “Submit”.

360 Feedback

Page Details

Type of landing page: Lead Gen
Website: 360 Feedback
Built using Unbounce?:Yes

Why I Like It

Simple clean design, with a subtle directional cue (the owls beak) that points to the form and matches the CTA color. The informational hierarchy encourage reading: brand->value proposition->benefits->details->CTA.

Optimization Suggestions

• Like the previous example (above), it breaks a fundamental rule of conversion – the non-descriptive CTA. Change the button text to describe what you’ll get when you click it.
• The statement “Find out more” doesn’t provide enough of a sense of what I’ll receive. Will it be another page? A PDF? An email full of information? To find out more, I might just type the brand name into Google, rather than give up my email. Let visitors know what they’ll receive and make it a worthwhile trade.
• If the product/service hasn’t launched yet, make this clear. If it is live, then provide access to some screenshots or a video of it being used.

Smooth Sailing

Page Details

Type of landing page: Click Through
Website: http://events.cheznouspresents.com/smooth-sailing-2010
Built using Unbounce?:Yes

Why I Like It

Ok, this one’s a touch controversial as it was created by one of the co-founder’s of Unbounce (Carter). I’m including it in this list for two reasons: I like the page and it’s use of social widgets, but re importantly, I couldn’t resist the opportunity to say what I think is wrong with it :)

On the plus side it’s got a great aesthetic, indicative of the genre of music that it’s promoting and it has a wide range of modern landing page features to increase engagement:

• Video: you can listen to some smooth music while you check out the band list.
• Social Proof: the Facebook widget shows photos of anyone you know that’s “recommended” the page alongside a count of smooth music fans.
• Secondary CTA’s: the footer has a couple of extra ways to stay in touch.

Optimization Suggestions

To keep people on the page longer and enhance the chance of a conversion, I’d suggest the following:

• Provide a clearly stated secondary headline beneath Smooth Sailing, which describes what the event is. “12 Vancouver Bands Play Yacht Rock Covers from the 70s”. This would make me understand it a lot more quickly.
• Add a play button beside each band to let you hear an audio preview (a la iTunes).
• Put a lighter background behind the Facebook widget – right now it’s hard to see.
• Throw up a lightbox style popup with a Map to the location “The Biltmore” – to prevent people leaving the page to figure it out.

SmartyPants

Page Details

Type of landing page: Click Through
Page link: http://deals.wearesmartypants.com/back2school3b/
Built using Unbounce?:Yes

Why I Like It

I like the idea of vitamins being kid-friendly and the design reinforces the fun factor. As it’s targeted at parents, they do a good job of answering three core concerns a parent might have: Will this help my kids take vitamins? Is it safe? What’s in it?

I also like the safety net CTA which offers up a phone number if you have any questions. The “As Seen On MSNBC” is also a good trust signal to potential buyers.

Optimization Suggestions

• I would be interested to see how much information is required to make a purchase of this type of product. Typically, landing pages perform better when you remove extraneous navigation from the page. A good test might be to remove the 16 links found on the page. Perhaps the target buyer (mothers) like to spend the research time. A technique to keep them on the page longer would be to use some modal popup windows that show the explanation of scientific terms and the doctor bio without making them leave. As an example, check out the “Contest Rules” link at the bottom of our contest landing page.

If you have a landing page you’d like us to feature – send me a link at oli@unbounce.com

Here’s a great example of an A/B test on an education lead gen landing page. It’s a common strategy in education to use banner ads and PPC to drive traffic to a landing page where data is captured in exchange for course information.

The main elements being tested here are the color palette, hero shot imagery and primary messaging.

Type of Landing Page: Lead Gen
Source: http://www.fullsail.edu/
Built Using Unbounce: No

2 Sets of Landing Pages & Banners

You can see from the two landing page examples below that there is a very strong message match – both visually and in terms of the primary headline.

(Click on the landing page images for a closeup)

Version A: The Cold Colors

Version B: The Warm Colors

Landing Page Design Elements

• Hero shot: The main character on these landing pages is the code covered student – designed to look a little geeky as peer the demographic.
• Feature lists: Bullet lists of course curriculum are used to simplify the content.
• Benefit list: A powerful 3 point list of the benefits of taking a course at Full Sail University.
• Testimonial: A testimonial from an existing or prior student is provided, including a subtle social proof indicator – listing the clients he did work for.
• Incentive: A deeply discounted laptop is offered as a benefit of becoming a student.
• Lead gen form: The purpose of the page is the data capture. By completing the form you receive free information – presumably about the university and courses.

Why I Like It

Final Thoughts

It’s not 100% clear what information you’ll receive when you submit the lead gen form. The only real mention is at the top of the form where it says “Request FREE Information”. I would recommend qualifying this statement with more detail – such as whether you’ll be emailed the information or if you’ll receive it in the mail. If it’s a printed brochure it would be good to say how extensive it is via a page count (e.g. receive our free 40 page brochure).

I’d also change the CTA on the form button from “Submit” to reiterate what will be received when you click it.

Jen Gordon has produced some great landing page designs for her iPad app development company ACleverTwist. The first example here is a click-through e-commerce template with the goal of buying an iPad app from the iTunes Store.

Type of Landing Page: Click Through
Source: http://app.ibriteapp.com/ibrite-ipad-application/
Built Using Unbounce: Yes

Landing Page Design Elements

• Product hero shot: The iPad is the prime focus and the large graphic with familiar Apple reflection visual makes it very obvious what the page is about.
• Context of use video: To illustrate how the app works, the content within the iPad turns into a slick video which does a sped up run through of creating an iBrite picture design. Energetic music is used to catch your attention.
• Testimonials: A series of customer reviews from Twitter are placed below the product shot to provide some social proof regarding the app’s suitability for kids.
• Poll: Having a poll enables participation without making the user leave the page. It can also be a great way to gather user data.
• Community: There is a Facebook page associated with the application which includes a gallery of images created with the iBrite app (by the app developer and customers). This provides a forum to ask questions and interact with the creator, while adding a follow-up sales channel (there’s currently a prize draw to win a $20 iTunes gift card which is well positioned for the target demographic).
• Trust symbol: Right up top there is a large rosette showing off their finalist spot at an app awards review. This helps bolster the credibility factor of the app’s quality.
• Safety-net CTA: There are 2 examples of these secondary call’s to action: the “Tweet this page” link could get people following you on Twitter while having them spread the word, and the Facebook fan page enables repeat exposure to the app if you decide t become a fan.

Why I Like It

Final Thoughts

There are a few too many things to do on the page due to the links in the Twitter testimonials and the Facebook fan page. However, the benefit of the social proof (produced by linking to the real profiles) probably outweighs this. It’s also fairly unlikely that people will click through to the Twitter profiles, as they are unknown people. If someone does go searching for validation that the testimonials are genuine they would be unlikely to find them they’ll have disappeared from the Twitter streams already.

The purpose of the poll isn’t 100% clear: will the answer with the most votes get created as a new example?

A/B test idea: music autoplay?

Some people can be thrown off by music that autoplays. Sometimes it’s a privacy thing such as being at work, the library or the time of day requiring quiet. Either way, the first reaction of many is to hit the back button when music starts. It would be good to test a version without the autoplay to see if the click-through rate to the App Store is higher. It’s important in this scenario that you have a nice big play button (preferably on the screen of the iPad).

The video does stop if you click the screen (good for those who want to read the information on the page without distraction or noise) – however it’s not possible to restart the video without clicking the play button which is partially obscured at the bottom of the iPad.

Another A/B test candidate would be to see the effectiveness of removing all links except for the primary CTA. Although I’m pretty sure Jen has tried a bunch of these ideas already as the page content changes frequently.

One final note. It took me a long time to figure out that you get to draw with your fingers. This should be obvious as it’s a touchscreen iPad – but it might be worth explicitly describing this to enhance the fun factor – particularly for kids.

Great job.

This landing page is definitely in my top 5 list. It’s elegant, focused and really well targeted to the intended audience.

Type of Landing Page: Click Through
Source: CampaignMonitor.com
Built Using Unbounce: No

Landing Pages Elements

• Product hero shot: The Macbook Pro image hits up the target demographic nicely (designers) and demonstrates the context of use (it’s an online application).
• Features/benefits list: The way to trigger emotional connections with your visitors is to talk about how your product/service can solve their pain. The benefit list here clearly addresses this with language like “Your own product in 5 minutes” – quick to get started, “Design the way you like” – creative freedom. Note: features are good for certain situations such as the capabilities of an electronics product like a camera, but benefits are generally a smarter way to communicate when you don’t have much time as the user doesn’t have to infer why a certain feature is a good idea.
• Testimonial: The testimonial used here isn’t just a “we love you” style quote. It ties directly into several of the key value propositions presented earlier on the page (it’s for designers and it makes me money).
• Trust symbols: Client logos fall into the category of trust symbols. They are powerful business testimonials that increase the trust factor. It certainly helps to have a kick-ass client list as they do. Being able to show the Nike swoosh and the WWF panda is great validation of Campaign Monitor’s success and dependability.

Why I Like It

Final Thoughts

Campaign monitor provide a hosted email service for designers and the landing page does a great job of reaching out to that target demographic. They do this by presenting a professional and seductive design aesthetic on their landing page which sets the tone and builds trust in the fact that they understand their customers.

When you come to design your own landing page – use this for inspiration. It’s that good.

Today’s landing page example comes from WebTrends.com, a web analytics company. It’s a great demonstration of how to make B2B lead capture simple and clean.

Type of Landing Page: Lead Gen
Source: WebTrends.com
Built Using Unbounce: No

Landing Pages Elements

• Infographic: Visual aids on a landing page are “worth a thousand words” and can improve understanding among the attention-challenged internet generation. In this instance I’m not sure I completely get what it’s trying to demonstrate, but the intent is good, and stylistically it captured my attention.
• Directional cues: The arrows in the diagram are used to show the flow of information within the infographic. But they also have the subtle effect of pointing at the primary action area – the lead gen form.
• Lead gen form: The form is encapsulated in a separate area from the content and is placed on the right hand side of the page – which has been shown in some tests to be the best location (presumably to do with western reading direction).

Why I Like It

Final Thoughts

I would prefer to leave the form CTA button as the only thing that is shown in blue – simply to amplify its attention as the only interactive component (aside from the privacy link) – but that’s a very minor point unlikely to have an impact on conversion with a page this simple.