22 Creative Landing Page Designs – A Showcase, Critique, and Optimization Discussion

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