Tag Archives: landing page examples

Thumbnail

Converting with Extra Copy: 5 Long-Form Landing Page Examples

We all know how effective a short, concise landing page can be. It’s quick to read and, depending on the offer up for grabs, can convince visitors to purchase or opt-in fast.

But there are benefits to building long-form pages too. For starters, longer pages can provide in-depth info visitors need to make informed decisions, helping you attract more qualified leads from the start. Moreover, your company may have offers better suited to a longer page with more convincing to do.

According to our Conversion Benchmark Report, which analyzed the behavior of more than 74 million lead-gen landing page visitors, pages with 125 words or less typically had a 15% higher conversion rate (I mean, concise converts!) But for pages between 250 and 750 words, we found conversion rates really only varied slightly in this range.

Such remains the question facing every copywriter:

“How long should my landing page be?”

Well, the answer is nuanced and comes down to the offer at hand. There are several cases where long-form landing pages can actually be better than shorter ones. For instance, if you’re:

  • describing technical product details and in-depth benefits,
  • showcasing your company’s achievements to establish credibility, or
  • persuading customers to invest in especially expensive software, services, or high-commitment offers.

Page length is less about preference, and has more to do with the complexity of the offer at hand and the stage of the buying process someone’s in. You need to cover all your bases, anticipate objections, and show that your offer is legit. A heckuva task for a limited amount of copy.

So, to inspire your next not-so-short page, we analyzed five long-form landing page examples below. Here’s our take on why each of these built-in-Unbounce pages work so well.

Example 1: American Executive Centers

A long-form landing page example from American Executive Centers
Click the image above to see the full page.

Why this works: No questions are left unanswered.

This long-form landing page immediately highlights American Executive Centers’ distinct offering in the headline, and above the fold (i.e. they’re offering virtual office services like mail handling, virtual assistants, and meeting rooms). Given the decision potential customers face here, it’s important that the brand’s presented a bulleted, quick-to-read list of what’s up for grabs at the beginning of the page.

By listing all the key features above the fold like this—readers can quickly get a sense of whether AEC will meet their core requirements. This is especially important for busy decision makers who are comparing their options. If AEC’s landing page is just one of many someone has open in their browser, for instance, it makes a strong case against competing pages where core offerings may be harder to spot.

The landing page doesn’t stop there, either. Their contact form appears above the fold in an orange rectangle that bridges between the two sections. This contrast encourages the eye to move down the page.

AEC Orange Rectangle

Below the fold, AEC shares detailed information about where they operate and emphasizes the benefits over the competition. They also list packages and pricing so customers can independently decide whether the service fits their budget.

The lesson here? Extra copy may not be required to convert a consumer on a personal purchase, but when their decision impacts an entire team or workplace, it clearly helps. For a B2B company like American Executive Centers, using a long-form landing page makes sense because it allows this brand to cater to a more intense consideration phase in the buyer’s journey.

Example 2: Mr. Rooter Plumbing

Click the image above to see the full page.

Why this works: Simple, straightforward design—and an incentive for customers.

Mr. Rooter’s landing page (developed to promote their South San Gabriel service region) is not necessarily long in terms of the number of page sections, but it’s got a lot of copy and details. Right off the bat, readers can see what Mr. Rooter offers. Adding a phone number to the header also gives customers who are urgently seeking a plumber an immediate point of contact. Hey—when the water’s gathering around your ankles, you don’t have time to read an entire landing page. Additionally, all of the cities within the South San Gabriel region are listed—so customers don’t have to do further research.

And people like a deal. By offering a $20 discount, the page gives customers an extra incentive to use Mr. Rooter over a competitor. The placement of the offer is on the left-hand side of the page, which is ideal considering that online readers’ tend to scan pages from left to right in a Z- or F-shaped pattern. The offer is also an example of basic but effective skeuomorphism, with a dotted line that immediately calls to mind coupons in printed media.

Mr. Router Coupon

The page goes on to describe the company’s areas of expertise in detail—something condensed landing pages don’t offer—and highlights why customers choose Mr. Rooter by including some benefits of their service (24/7 availability, reliable specialists, local area knowledge) as well as testimonials.

This example proves that in many industries, substance matters more than stunning design—and you don’t need a technical background to build a landing page that does the trick (shameless plug: especially not with our landing page templates).

Example 3: Chronotek

Click the image above to see the full page.

Why this works: Expert insight and in-depth product details.

We’re startin’ to see some patterns here. Just like the above long-form landing page examples, Chronotek showcases its primary features above the fold—along with a direct heading that describes their product in clear, uncomplicated terms. Having both these elements above the fold grabs the target audience’s attention as soon as they land and encourages them to keep reading.

But they don’t stop there. Since Chronotek is B2B software—and likely requires a significant investment of time and money—it’s essential their landing page paints a full picture. By listing six key ways customers benefit (e.g. simplified payroll, live reporting, in-app messaging), Chronotek outlines the value of investing IT dollars in their time-tracking software.

Though their primary messaging is relatively straightforward, farther down the page Chronotek uses short copy with videos and illustrations to connect on a more emotional level. In this case, these elements instill a sense of urgency (“Chronotek sends the alert before it’s too late.”) mingled with the assurance that they have you covered (“Rest assured and know it all!”). The copy in this section is also more ‘you’ oriented. “You” or “your” occur six times—and the copy’s peppered with emotional words, like “stress.”

Chronotek's emotion
An example of the copy paired with videos Chronotek uses throughout the page.

Though many prospects might be convinced by the features and benefits of this product alone, using a long-form landing page lets Chronotek make a more emotional appeal to anyone who has remaining objections or needs to hear certain key phrases before they’ll sign up for a free trial.

Example 4: Throne & Hauser

Click the image above to see the full page.

Why this works: Transparency and convenience builds trust.

Again, not a ton of page sections length wise on this one, but this law firm’s page does contain a fair amount of copy. That said, it also doesn’t waste any of their visitors’ time. The company’s services and location appear immediately—plus a short description of why a client should work with Throne & Hauser. They also feature the credentials visitors expect from a reputable law firm upfront. And, finally, we see two simple methods of contacting the company (via phone or form).

By including personal bios about the firm’s lawyers (photos included), the page creates a connection, which is critical in a largely relationship-driven industry. Testimonials further boost prospects’ trust in the firm by showcasing examples of happy clients.

This long-form landing page also subtly tells a story with a happy ending in its choice of photos:

Throne Hauser CTA image

The hero shot features a sad child divided between parents, while the image underlying the call-to-action at the bottom shows a parent and child happily united. Using their page this way allows Throne & Hauser to tell a story and evoke emotions.

Example 5: Schar School at George Mason University

Click the image above to see the full page.

Why this works: Credit where it’s due.

To impress prospective students, the Schar School at George Mason University has included tons of information on its long-form landing page. Readers quickly learn that the school operates in Washington, D.C. (location’s a major factor when it comes to selecting a university) and that programs combine technical skills and theory. If a student’s interested, they can easily request more information and start their application using the form. There are also opportunities to enroll in sample classes or attend an open house.

The Schar School also features achievements to separate themselves in a competitive category, where options can feel endless. The testimonials come from recent graduates who now occupy high-demand jobs in fields associated with the school’s programs:

Schar Testimonials

The page also includes degree program descriptions. For these (lengthy!) blurbs, short-form pages wouldn’t cut it, but this is the kind of specific info prospective students need to determine if a given option is right for them.

The page leads with the school’s Master’s programs, which makes up the bulk of its enrollment. And although it might make sense to create separate landing pages for each degree program, using a longer format for this landing page helps provide an overview for students who might be considering multiple programs.

And there you have it: five effective long-form landing page examples…

…across five industries no less! These companies all needed a few more words to get their point across, with detailed descriptions, testimonials, and achievements that short pages just don’t have room for. The extra copy helps the brands be empathetic to the often significant personal or financial impacts of the offers at hand.

Ultimately, the nature of your industry and product or service will help dictate landing page length. What’s important to remember is that there’s no hard and fast rule. We’re often taught that shorter is sweeter, but landing pages—like naps, daylight hours, and vacations—can sometimes stand to last a little bit longer.

Original source: 

Converting with Extra Copy: 5 Long-Form Landing Page Examples

Thumbnail

6 Examples of the Best B2B Landing Pages (and the Secrets to Steal From Them)

Best B2B Landing Pages

B2B products and services can be difficult to fully capture on a landing page—we know from experience.

Whether it’s defining your conversion goal, ordering your page sections, or writing copy that resonates, it’s not always a walk in the park. Not to mention B2B can involve so many more decision makers you may need to appeal to. Showcasing the value of something like software at scale can be trickier than explaining how your cutting-edge hoverboard might benefit just one person.

But, in our view, building a successful B2B page boils down to a few key things:

  • Creating an engaging experience that makes prospects acutely aware of the problem you solve
  • Promoting your offer clearly and simply, and
  • Cleverly leading visitors through consideration, towards conversion.

Persuasion sounds great in theory, hey, but what does this actually involve?

To help you better understand what makes an effective B2B landing page, we’ve analyzed six Unbounce-built pages doing a great job. Scroll through the examples to see what they do especially well, and how you can take their techniques to the next level.

1. PIM on Cloud

PIM on Cloud Landing Page
Image courtesy of PIM on Cloud. (Click image to see the full page.)

Best practice to steal: Where appropriate, bring prospects through several stages of the customer journey.

Sales cycles vary per industry, sure, but the process always starts with building interest and (ideally) ends with a purchase decision. Designed properly, some landing pages can take readers through each of these stages as they scroll from top to bottom. We found PIM on Cloud’s long-form landing page does this really well.

PIM on Cloud Landing Page Features

This brand builds awareness by offering a description of their service (in the first two page sections), they guide prospects through consideration with a list of features and benefits, and then drive conversions by detailing available plans alongside their calls to action (i.e. “Choose plan” or “Ask for pricing”, respectively).

Though some landing pages are designed to increase conversions at the bottom of the funnel, providing a more holistic journey—like PIM on Cloud does—allows a wider net for prospects to learn more. This page could even be a destination URL for many of PIM’s branded Google Ads because it’s so high-level.

PIM on Cloud Anchor

Of course, some visitors will also know exactly what they’re looking for from the start, so PIM on Cloud includes anchor navigation on this page for a choose-your-adventure experience. Thanks to this, more qualified prospects can jump straight to the details most relevant to them. While landing pages shouldn’t have tons of links on them (your main site navigation would be a real no-no, for example), anchor navigation is recommended if you’re trying to cover a lot of info at once. They can make longer pages like this more digestible.

Bonus: PIM on Cloud’s landing page provides readers with an FAQ section and a contact form, further opportunity for prospects to evaluate their decision—and for the brand to collect valuable leads. When you make landing pages that cover a broad offer, be sure to consider whether you might use an FAQ to ease any potential friction, and leave a way people can get in touch with you directly just in case.

2. Resource Guru

Resource Guru Landing Page
Image courtesy of Resource Guru. (Click image to see the full page.)

Best practice to steal: Help prospects visualize a complex idea.

Many B2B products and services solve complex problems. As a result, landing pages need to be designed in such a way that they make it easy for potential customers to understand features and benefits. One way to do this is to incorporate visual elements like videos, images, and even animations—all of which can help drive conversions. According to Eyeview, using a video on your landing page can increase conversions by up to 80%.

Resource Guru’s landing page is effective because it greets viewers with a large play button as soon as they land. Pressing play is intuitive and launches a high-quality explainer video. They let this video do the talking, then quickly request an action from visitors.

Taking it to the next level:

Instead of a simple play button, this landing page could have benefitted from including a video thumbnail featuring people’s faces. Visually compelling thumbnails that align with your video’s content can actually increase play rate.

Additionally, it’s always a good idea to reiterate all the core points from your video script on your landing page in text. This ensures that even in the event you have a low play rate, prospects can still learn about your offer without having to click play. Whether they left their headphones at home that day or prefer text, it’s good to have a backup plan.

3. Blink

Blink Landing Page
Image courtesy of Blink. (Click image to see the full page.)

Best practice to steal: Include the right kind of proof to build trust and credibility.

Blink’s landing page above relies heavily on testimonials and a list of select, high-profile clients, which are presented immediately below their contact form. Also, rather than diving into product features, Blink backs up their expertise by showcasing industry awards.

Taking it to the next level:

Although testimonials, logos, and other social proof are effective, it’s worth noting that Blink misses the opportunity to (immediately) explain what they actually do for customers at the start of this page.

According to Nielsen Norman Group, 57% of visitors’ time spent on a page occurs above the fold (and 74% is spent on the first two screenfuls). If your company’s offerings are at the very bottom, as they are on Blink’s landing page, visitors may click away without context. Overall, make sure your pages get into the details of what you do before explaining why you’re the best at doing it.

4. MediaValet

MediaValet Landing Page
Image courtesy of MediaValet. (Click image to see full page.)

Best practice to steal: The rule of three works great for layouts and benefit copy.

The rule of three is one of the most successful methods for memorizing content—we’ve seen it used in film, advertising, and beyond—and MediaValet’s landing page is no exception.

The digital asset management company applies the rule of three when presenting their key benefits and testimonials. This clear, concise, and easy-to-consume structure is also key to the landing page’s successful layout: it introduces the product, backs up their claims with stats, and provides an easy way for prospects to request a demo. The easier visitors can consume and retain the content on your landing page, the better equipped they are to make a decision to purchase. They’re also more likely to keep scrolling instead of being overwhelmed by too much info.

MediaValet Form

Taking it to the next level:

Headline clarity is key, and you only have the first few words of anything to convince people to keep reading. In my opinion, MediaValet could have benefited from using a variation of their sub-headline (“Organize your assets, marketing content and media in one central location with digital asset management.”) as their primary headline to make their product offer that much more obvious.

5. Vivonet Kiosk

Vivonet Kiosk Landing Page
Image courtesy of Vivonet Kiosk. (Click image to see full page.)

Best practice to steal: A floating CTA button gives you a greater chance to convert.

A landing page has one goal—to convince visitors to take action. Whatever the intended next step, it’s your job to create a clear, strategically placed call to action that lets visitors know what to do next. Using multiple CTAs can be distracting to your audience, but a consistent CTA that follows visitors throughout their experience? That’s crystal clear.

Vivonet Kiosk uses a floating CTA button that follows visitors as they scroll down the page. No matter where they’re at, the “Talk to Us About Kiosks” button remains in the bottom right-hand corner of their screen.

6. Unbounce

PPC Page

Best practice to steal: Have a conversation with your prospects.

Alright, y’got me. I’m using an Unbounce example here, but I think you’ll agree it’s pretty good. This is a landing page we created to speak about a problem we solve, and drive signups.

In the screenshot you may notice that this page actually breaks one of the rules we established above: it includes the main site navigation. Think of this as a hybrid, as well as a great example of how flexible you can be. Our page is structured with the persuasive force of a landing page (and built using our builder)—but incorporates neatly into the rest of our site, living on our domain and sharing the site’s nav. We do this fairly often when we want to build a web page especially quickly for the site that would otherwise require a ton of dev work.

Since Unbounce markets to marketers, we also wanted to overcome the hardened shell of skepticism that so many of us develop when it comes to other people’s campaigns. So this landing page uses a conversational framework to build trust. It offers a straightforward rundown of both the problem—running ads has become increasingly pricey—and the solution before it ever pitches our platform. And the inclusion of a chatbot invites you to ask questions we don’t cover, keeping the conversation going.

Of course, a landing page with an educational tone risks losing the reader’s attention—the same way a boring teacher might. In addition to a friendlier tone, we use interactive elements, animations, and social proof in the form of quotes from digital marketers. All of these elements keep things lively and provide added detail.

PPC Detail

Like the example from PIM on Cloud, we also anticipated less qualified prospects might visit the page, so we include tabs and collapsible page sections that provide more info or answer questions. If a reader happens to hit the page without a strong understanding of what we mean by “landing page,” for instance, they can click to learn the answer, without leaving. Like any good conversationalist, we listen as well as talk.

Feeling inspired? Learn how to design and build a B2B landing page in just seven simple steps.

Follow this link – 

6 Examples of the Best B2B Landing Pages (and the Secrets to Steal From Them)

7 Black Friday and Cyber Monday Landing Page Examples [with critiques]

Cyber Monday Landing Page Examples

Psst: This post was published previously on the Unbounce Blog. With Black Friday and Cyber Monday around the corner, we’ve updated it with helpful tips and critiques that will inspire your upcoming holiday campaigns.

It’s that time again: Holiday shopping season.

And every business is trying to take advantage of the billions of consumer dollars that will be spent over the next four weeks.

Black Friday and Cyber Monday were only the beginning.

We all know that there were millions of consumers heading online and into stores to grab the first amazing deals of the season. The question is, which brands left money on the table?

Over the past weekend, I took a look at a bunch of Black Friday and Cyber Monday marketing campaigns that were promoted through Twitter, Facebook and Google Adwords.

Some marketers knocked it out of the park.

Others, not so much.

I took a quick tally of how many websites were promoting their sales through the use of landing pages, and I was disappointed to say the least.

cyber-monday-landing-pages

This was a random sample of campaigns found by searching for Cyber Monday & Black Friday keywords

Just 8 out of 34 campaigns used a landing page that focused on the black Friday sale.

16 of the campaigns sent traffic to a corporate website, using some sort of headline or banner to promote the sale.

And a whopping 10 out of 34 companies just sent traffic to their normal homepage without a single mention of Black Friday or Cyber Monday.

That’s huge.

I mean, almost 30% of the companies I looked at figured all they had to do was send out a tweet or an ad to promote themselves on Black Friday weekend!

Thankfully, you know better – you know the power of landing pages.

So what are the tricks you can use on your landing pages to knock holiday shopping season out of the park? Let’s take a look at 7 sites that actually used a landing page to promote themselves this past weekend, and the different strategies they employed to pull it off.

1. Autozone

autozone

Strategy: The flash sale [promoted via Twitter]

I love the premise of this page. Auto parts retailer Autozone set up a bunch of “flash sales” that were released throughout the day. The counter on the page told visitors when the next flash sale would be available.

In theory, this should increase the engagement of the page and keep visitors’ attention longer by getting them excited about the next sale.

But there are a couple of problems with how they went about it:

Is this page already sold out?

The words “SOLD OUT” are very large on this page. It’s the first thing you see, and I’d be afraid of this driving traffic away from the site. If you went into a store on Black Friday and saw a huge sign that said “SOLD OUT” would you stick around?

I would make the headline more explanatory. Something like this:

“Our latest sale has SOLD OUT, our next sale starts in: 00:02:57”

Don’t make me wait!

Another drawback I see with this page is a high abandon rate. Sure, you’re going to get a few people interested enough to stick around, but a good portion of your visitors are going to bounce off this page and forget about it.

The solution is to add a quick opt-in. Why not say something like:

“Don’t miss our next sale! Enter your email address below and we’ll notify you when our next flash sale begins!”

That way you’re not only building a list for the future, you’re also keeping visitors engaged throughout Cyber Monday.

2. Snack Tools

snacktools

Strategy: The overlay [promoted via Twitter and Facebook]

All right, so this example isn’t a landing page, but it represents an effective way to boost conversions during the holidays.

Web app company Snack Tools put an overlay on its site with the details of a holiday promotion for visitors who arrived via social media.

Their technique presents a few problems:

My attention span is short, give me the quick points

The trouble with competing on Cyber Monday or Black Friday is that everyone is trying to find the best deal. That means they don’t necessarily want to spend a lot of time on your page to decide if your deal is right for them.

This overlay needs less copy and preferably fewer membership benefits. Less is more when it comes to using overlays.

Another option is to remove the close button and turn this into a real landing page! However, if the copy is strong and the offer is clear, this overlay will be able to drive conversions as well as any standalone page.

Pro tip: Targeted overlays create more conversion opportunities… which means more conversions for your Black Friday and Cyber Monday campaigns. Build and publish high-converting overlays in *just a few minutes* with Unbounce’s drag and drop builder.

Just remember, using overlays is a great way to increase sales and conversions. The deal you’re offering is front and center is sure to capture visitors’’ attention.

This call to action is rubbish

“Post your order” is only slightly better than “Submit” – and we all know you should never submit.

No need to get fancy, but a simple “Activate My Account” would be a much better call to action.

3. ONE Medical Group

onemedicalgroup

Strategy: Promotional code [promoted via Google Adwords and Twitter]

This is an example of a promotion code landing page. It seems visually appealing at first glance, but there are some serious issues with this page:

Am I shopping for furniture?

The photo in the background looks like a furniture store, not anything medical. Images on a landing page are very important. They reassure visitors that they’ve arrived in the right place.

What exactly does this company do?

This entire page focuses on the Cyber Monday deal, but makes no mention of the product itself. If I were a visitor who didn’t know anything about this service, I would not have enough information to move forward.

Make sure not to lose focus on your product and the benefits it will bring to your visitors. Ultimately, that’s what will sell your product or service.

Where’s the call to action?

Oh right, it’s those two orange buttons. The problem with these buttons is that they’re the exact same colour as the logo (Yikes!).

As a result, they get lost in the shuffle. By making your calls to action look like buttons and giving them enough contrast with the other elements of your landing page, you’ll get a higher click-through rate on your landing pages.

4. Sage

sage 50

Strategy: Minor modifications to existing landing pages [promoted via Google Adwords]

Why reinvent the wheel? If you already have a successful landing page that’s crushing conversions for your company, you may not need to make large sweeping changes for a holiday promotion.

If you’re in a pinch, you can set up a landing page just like this. Sage sells account software, and it looks like they’re using a basic template for their landing pages. This allows them to swap out the background image and the headlines for various promotions quickly and easily.

But what about urgency?!

This page is simple and to the point, but it could use more urgency. The beauty of Cyber Monday/Black Friday is that you have that urgency built right in. Remind your visitors that this is a limited time offer and it’s going to expire very soon.

Sage could throw a countdown on this landing page, which might give visitors that extra little push to convert.

5. The New York Times

New York Times Landing Page example

Strategy: Focus on one step at a time [promoted via their website]

I like this page.

It cuts to the core of the offer and doesn’t have any fluff.

My only critiques are that the headline could be more readable and the end date doesn’t have very much emphasis; you want to make sure that every visitor is aware that the deal is limited, which creates a sense of urgency.

Here’s what I like so much about this page:

Frequently asked questions are available, but don’t take up space

The FAQs are on the bottom left of the page. If you don’t need them, they don’t take up much room anyway. But if you’re interested in seeing them, they’re just one click away.

Awesome.

The page stays simple until it needs more information

When you first land on this page the only two options are “For myself” and “For a gift.”

When you make a choice, the page expands and gives you more options.

newyorktimes2

The reason this is so great is that it keeps the user focused on the task at hand. Giving a visitor too many options all at once can be overwhelming and increase the page’s bounce rate. Well done, New York Times marketers!

No need to get fancy, but a simple “Activate My Account” would be a much better call to action.

6. Vimeo

vimeo

Strategy: Get cheeky [promoted via Twitter]

This is an excellent Cyber Monday landing page. Vimeo has taken Cyber Monday and a unique spin on it with “Cyborg” Monday.

The deal is laid out very clearly and the product and its benefits are outlined in the green section of the page.

But can they improve this page?

My main critique of this page is that the call to actions don’t look like buttons. Also, a fun play on a cyborg countdown could enhance the page and add a sense of scarcity.

7. Young and Reckless

youngandrestless

Strategy: The storefront landing page [promoted via Twitter]

If you’re a marketer for an e-commerce site then listen up!

Young and Reckless is the ONLY online retailer I saw the entire weekend that effectively used a landing page concept on their store.

This store/landing page is specially designed to sell their products on Cyber Monday. There is no menu navigation, no distractions and no fluff. Just selling.

The only problem is that they didn’t quite go all the way:

Where is the offer???

The shirts on this page are listed between 25% and 50% off, so where is the headline telling me about it?

A headline like this would be more effective:

“Cyber Monday”
“Until Midnight Only: Save up to 50% on everything you see below”

Just add urgency

This is a long page because there are lots of items listed. Why not include a timer that follows the visitor down the page reminding them how much time they have left on Cyber Monday?

It’s just another element that could drive home the scarcity of the sale.

Now it’s your turn.

Take these strategies and apply them to your own campaigns for better results. The holiday buying season is well worth the extra effort.

What creative campaigns will you come up with before the holiday season is over?

Let me know in the comments below.

— Eric Sloan

Original link: 

7 Black Friday and Cyber Monday Landing Page Examples [with critiques]

Thumbnail

10 Landing Page Design Examples With Conversion Rates [FREE LOOKBOOK]

It doesn’t matter how much time you spend planning a marketing campaign, building a landing page or tweaking an ad. At the end of the day, only one thing defines whether your work is successful or not: your conversion rate.

So understandably, marketers are often asking us, “What is a good conversion rate, anyway?

Kermit is nervous about his Landing Page conversion rates
It’s natural to feel anxious about whether your conversion rate is measuring up to that of your peers. We all feel it.

We usually avoid answering this because… frankly, it depends on many variables: the offer, industry and traffic source, among others.

But for our latest Landing Page Lookbook, we found 10 brave marketers (who happen to be Unbounce customers) that were willing to share their beautiful landing page designs along with their conversion rates and other relevant info: industry, traffic sources, target audience, campaign specs.

To top it all off, we’ve got some tips to offer insight into why they hit those conversion rates.

Remember, these conversion rates aren’t gospel or benchmarks you should hold yourself to — but we hope these Unbounce landing page examples will offer you some inspiration… and maybe even some piece of mind that your conversion rates are on par with that of your peers.

Get Inspired by High-Converting Unbounce Landing Page Designs

Download our Fall Lookbook for design inspiration, best practices and a sneak peek into the conversion rates of your peers. All made by marketers like you.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

Original post: 

10 Landing Page Design Examples With Conversion Rates [FREE LOOKBOOK]

10 Landing Page Samples That Pissed Me Off and What I’d Do to Fix Them

My commentary on marketing — and the world in general — is very polarized. I despise bad experiences. And I get pretty excited when I see exceptional ones.

Friends who know me well have probably at one time or another experienced OBE (Oli’s Bathroom Experiences).

No, not that kind.

OBE is an ongoing rant about the shitty design of bathroom sinks. Weird thing to get angry about? Perhaps. A reflection of my obsession with designing effective and delightful experiences everywhere? Most definitely.

bathroom sink
Image by Till Naujock(link) via TheStocks.

I’m a bubbly person 99% of the time. But the remaining 1% I can be ever so slightly vicious. And it often comes out when I click on Google Adwords ads and see their corresponding landing pages. And of course during my visits to public restrooms.

With that in mind, I’m going to break down some real-life landing page samples that really caught my attention — for better or for worse.

Speaking of attention, I’ll be referencing my ebook, 23 principles of Attention-Driven Design, throughout, so take heed!

1. MultiTouch

multi-touch-high-res-650
Click for full-length landing page.

Above-the-fold experience

Firstly, the headline: “Marketing simplified!”. How original. Instead of simplifying marketing, MultiTouch should focus on simplifying its messaging.

Then there’s the hero shot. Let’s see what this businessman in a suit — who’s reenacting Minority Report for us in a way that’s not at all cheesy —has to offer us. Nothing. And the screenshots? They could benefit from some captions, so I know what’s important or different.

Side note: The company is called MultiTouch — emphasis on “multi.” So why is the guy only using one finger? See what I did there?

Let’s explore what the hero shot should be doing, with a definition from the awesome Angie Schottmuller during a recent webinar all about hero shots:

hero-shot

You’ll notice there are seven qualifying qualities of an effective hero shot: relevance, context, value, emotion, support, education and persuasion. How many of those seven things does our generic business dude pull off? None. Zero. Nada. Zip.

So the next time you’re choosing your hero shot, think of an image for each of the seven qualities. That should put you on the path to a visual that has impact, purpose and benefit.

To quote Unbounce’s own Dan Levy: “Next problem please.“

Subhead fail

Onto the subhead: “Generate leads – Drive sales – Measure ROI.”

Like most subheads, this line adds a little more clarity to the context; however, at this point I still don’t know if MultiTouch offers a software product or provides a service. And that’s critical information for the fleeting visitor to your landing page.

Perhaps MultiTouch could qualify the three statements with a unique aspect of its service to add more clarity:

  • Generate higher quality leads by unique qualifier.
  • Drive higher value or more sales by unique feature.
  • Measure ROI across all channels with our describe analytics feature.

Directional cues?

Throughout the page there are these little back-to-the-top links. This is really old-school web design. People already know how to scroll, so don’t worry about helping them get back to the top of the page. Rather, worry about getting visitors back to the CTA.

If you are going to add linked directional cues, make sure they take visitors back to the form.

Call to Action

CTA screenshot

Yes, I have heard enough — so let’s assume that I have sufficient details to make a buying decision. I’d recommend moving the call to action (CTA) closer to the question, “What is marketing automation you ask?”, using a contrasting color to attract attention (orange would work brilliantly here) and giving it some affordance.

The greater the perceived affordance (the manner in which the design implies how it can be used), the simpler it is to understand the presented interface. In other words, if it looks clickable, it provides a signal to the visitor that it can be used and interacted with.

Here’s a simple diagrammatic exploration of affordance.

Button affordance

One thing to keep in mind, though, is if the button is part of a well designed form (with a container that encapsulates it), affordance is less important, since the form fields imply an interactive element at the end of the form. But when placed in the middle of a page, in the middle of crowded or messy content, strong affordance (coupled with a contrasting color) can help the button stand out and be more of a target of our attention.

Huh?

Next up we have four screenshots of… Unbounce landing page templates. How naughty!

Landing page templates

Might have to have a conversation in a dark alley with these folks.

Features screenshot

And what else do we have here? Really? Powerful features? Stop telling me that your party is awesome, and just throw an awesome party.

Wait, one more section. Check out this delightful messaging…

Landing page screenshot

“WE WILL NOT ABANDON YOU!” Stop scaring visitors away with desperation!

At this point, I’m kinda lost on how to save this page. It needs to be deleted, and started from scratch. Enough. Undo. 404 or 301 this puppy. I’m abandoning you!

2. Get Response

Above-the-fold experience

Is the fold even a thing anymore?

Regardless of your perspective on this, it’s still nice to see a well architected above-the-fold experience.

get-response-650
Click for full-length landing page.

I really like the video hero shot here. When designing a video player, there are several characteristics to consider: the container, caption, poster frame (default image seen prior to clicking play) and play button.

  • In this case, the container is a fairly standard Apple laptop which conveys the online software aspect.
  • Here there is a descriptive caption up top with a nice little directional cue. People are drawn to captions placed in close proximity to images and video, as they lie outside of the container, thus breaking the flow of its perimeter.
  • The poster frame showcases an email template and how it would look on a phone, along with a visual of the tool. It is a little busy though, and could benefit from a simpler visual or some callouts pointing to elements.
  • The play button would be a little more obvious if it used a stronger contrasting color. It’s a good idea to isolate the CTA by not using its color elsewhere. Here it’s at least reserved primarily for the interactive elements on the page, which is good for consistency.

I would like to see this page with fewer links, thereby focusing visitors’ attention only on watching the video and clicking the call to action. Specifically, let’s have a closer look at the “View Pricing Plans” link under the CTA.

In my experience, links placed beneath the CTA tend to cause a drop in conversions. Here the pricing plans link may be a hindrance, and must be verified through testing.


Anything placed in close proximity to your CTA should be A/B tested – it’s a sensitive area.
Click To Tweet


Beyond the fold

It’s a very long page, and what I like to do with long pages is to look at the scroll map data to see how far people are getting down the page. If they’re not scrolling, I’d be really interested in doing a long page versus short page test here. In fact, I’ve rebuilt this page in Unbounce to show how quickly you can come up with a new variant to test.

In this video I rebuild the Get Response landing page to create a short version fit for an A/B test.

I spent a few minutes touching up the finer details (text color and page copy) and you can see the final page here.

unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce
Start your 30-day trial now

3. Ford Employee Pricing

This one came to me as a commercial on the radio while driving the streets of Montreal in a little Car2Go. Employee pricing for everyone — woo-hoo! You pay what we pay. Awesome, right?

ford-employee-pricing
Click for full-length landing page.

What the actual?

Let’s talk about the principle of Distraction for a second. The Attention Ratio on this page is 86:1. And nowhere on the page does it mention employee pricing. It’s making me think of bad sinks again. Ever heard of Message Match? Apparently not.

This is a classic case of selfish marketing: expecting me to hunt around the site to find the offer that was advertised. Do better, Ford. Do better.

And then something interesting happened when I returned to the site a few hours later.

ford-website-upon-return

It seems Ford got its act together a little bit and featured the promo in question. However, it wasn’t there when I (and countless others visited), so it’s still a fail.

There are still a ton of things wrong with the page, but at least Ford’s managed to fix the Message Match problem.

You did slightly better, Ford. You did slightly better. But not when it counted.

4. Zendesk

I love Zendesk as a brand. The team does some exceptional marketing… most of the time.

Take a look at the landing page below that was the destination of an AdWords ad. For starters, it’s not a landing page at all — it’s their website. That’s mistake number one.

I also want to draw your attention to the order of the copy on the page.

zendesk-650
Click for full-length landing page.

Information Hierarchy

Information Hierarchy is concerned with the order in which the copy on your page is presented — both in literal terms (which comes first) and in terms of the visual dominance (what stands out most).

Here, the primary headline doesn’t tell me anything about the software: “From now on, things will be better.”

Now take a look at the subhead — it contains all of the clarity missing from the headline: “Zendesk is software for better customer service.” If I’d read this first, I’d immediately know what Zendesk does. I call my solution to this phenomenon The Headline Flip.

Go look at your own landing pages and flip the headline and subhead. Does it add clarity? If so, consider reworking the order or just change the headline entirely to give it more substance.

Then run a five-second test on Usabilityhub.com and ask the question, “What does this product/service do?” to see if you have increased the page’s clarity.

5. KeyShot 5

Remember when I talked about Information Hierarchy? Well, I’m not quite done. Check out the landing page below.

Where’s the logo? Where’s the name of the product? Where’s any form of indication as to what’s going on? I have to get beneath the hero shot and the form before I even get a sense of what I’m looking at.

keyshot-5-650
Click for full-length landing page.

The hero shot is beautiful, but at first glance doesn’t tell me that this page is for rendering software.

The keyword I used to get to the page was “animation software,” which provides some context. But still, I wonder if an image or video of the software itself would demonstrate much stronger context of use.

Form(ula)

The form doesn’t do much to clarify the offer, either. Form-first design is when you design your form as if it’s the only thing on the page, allowing it to communicate exactly what will happen when you interact with it.

Here the CTA says “Download,” but it could be way more specific. Rewording the CTA to say, “Download 15-Day Free Trial,” for example, would again help qualify the product as digital software.

Still on the topic of the form: inline field labels suck! They’re a usability – and hence conversion – nightmare.

The reason being that once you click in the field or start typing, the label disappears. You might think this isn’t a big deal, and that people will remember what the label said. Not true. People forget, then they click outside the form so the label shows up again before repeating the exercise.

This is especially bad on mobile since you often can’t find any space outside the form to click to reset the label. You can click another field, but then you might want to fill in that one — but wait, you can’t see the label.

I will, however, give KeyShot bonus points for using field labels that stay in place when you click the field — disappearing only when you start typing. This is not a bad experience for the most part. And on mobile, there’s a good amount of whitespace around the form to allow scrolling past the form if you want to keep exploring.

Now, with all that said, there are a few exceptions to avoiding inline field labels:

  • When there’s only one field, because it’s easy enough to remember that you just need to type in your email address
  • When the label remains static but faded in the background, instead of disappearing when typing commences

Cognitive overloading

Cognitive load describes the build-up of mental fatigue when going through a bad experience. Each complex or confusing aspect of the page adds to this load and impedes our decision-making ability, and ultimately the desire to continue.

With this in mind, let’s take a look at the fifth form field.

The label is a non-question that’s formulated as a question. “Modeling software?” WTF? Are you asking me whether I think this is modeling software? If you recall my initial reaction above, I didn’t know that the page was for modeling software. This is a stress point, guaranteed to make someone stop and think.

Finally, at the end is a captcha — those evil little buggers that ask you to interpret the squiggly words and type them into a box. If you’re going to include a captcha, at least add some instruction so visitors know what to do.

Subhead woes

yay-business

Further down the page, take a look at the subheads. This is a classic example of “Yay Business” copywriting.

Read them out loud: Easy! Powerful! Fast! Integrated! Accurate! Large data sets!

Gross.

Subheads should convey benefits, which KeyShot hasn’t done. Adding qualifiers to each subhead would add significant value.

But that’s enough for this page.

6. RoomKey

Assumptions

A big reason for a lack of clarity on landing pages is assuming your visitors understand your acronyms and jargon. In this case, it’s PMS, which obviously has a more widely understood meaning.

roomkey-650
Click for full-length landing page.

Perhaps the target market is 100% familiar with the term, but I’d be making an assumption, too, if I thought that.

Check out the headline: “Quick implementation of what & training in what with RoomKeyPMS”

When you look at it like that, you can see there are holes in the headline and its ability to clearly state the page’s purpose.

I’m really struggling to see what the hero shot is trying to convey here, too, apart from the weird cloud computing reference.

To better showcase the app, I’d suggest using a video or an animated GIF — a popular design trend sweeping through the landing page world — or a simple screen capture video set to autoplay. It quickly demonstrates aspects of the interface in a more compelling way, and allows you to showcase an important feature. Check out the short Wistia video we use on the Unbounce homepage (below the image of the dude).

Scannable testimonials

It’s dangerous (not shark-infested-custard dangerous, but still) to assume that people will read your entire page, but if you have good social proof, you want to encourage people to read it.

A rule I like to go by for any big block of text is that if you can’t find an excellent sentence or phrase to highlight, then you have shitty copy.

For a testimonial, you want to break up the text with a bolded statement, and, similarly, if you can’t find one that’s compelling, your testimonial isn’t going to do its job. Try to find that gold nugget that explains the pain relief, benefit or game/life changer and bold it to break up the text.

In this case the testimonial is generic business rhetoric that has almost zero worth. I’d source another, or reach out to the customer again to uncover that gold.

7. Qlik

I really like the value proposition here, primarily because business analytics is a complex and frustrating realm. Qlik claims the software is simple and intuitive — let’s see if we can say the same for the landing page.

qlik-650
Click for full-length landing page.

Overall, I’m a fan of the design, but I can’t help feel that the most important part of the hero shot (the screenshot of the software) has been relegated to being secondary. The two tins are so big — for no rational reason — that the screenshot is too small to read. I’d suggest bumping the size of the hero shot by about 50% and making the surrounding elements smaller.

The most benefit-laden sentence in the opening paragraph is, “Discover more insights from your data in just five minutes.” I’d recommend bolding this and putting it on a line of its own to make sure people see it. It might even make sense to put it in the headline/subhead, or as a caption to the hero shot. Doing so connects the software directly to it’s benefit.

Also, in one of the bullets “analyzing multiple data sources” is referenced — some specificity would be good here. What kinds of sources can I integrate with the software? Will it pull from Google Analytics, AdWords?

Form-First

For the form, I notice a wasted opportunity to include an important subhead that highlights another strong benefit, in case the visitor’s gaze is drawn immediately to the form area, like the example opposite.

8. Wordstream

Being good friends with Larry Kim and the folks over at WordStream definitely makes critiquing one of its landing pages a little more awkward. It didn’t really make me angry to look at, but here we go!

wordstream-650

This is a super simple ebook landing page, so there’s not too much to say, but I’ll bullet a few key takeaways.

  1. The headline sets the stage for an Ultimate Guide ebook, but when you get to the form header it switches it up to be a toolkit. I’d keep it consistent by using toolkit in the title.
  2. The bullet list includes the year 2014, but I saw this page the other day, so I’d suggest updating this to include the current year. Similarly, if the content reflects 2014 it should also be updated. Not updating dates and footer copyright years is a common problem on landing pages that can lessen the urgency in the minds of your visitors.
  3. Remove those social share buttons. They’re a distraction, and nobody’s going to click on them. People will likely be more inclined to share the page after they’ve agreed to the download. The confirmation page presents an opportunity to include a delightful request for a share. I’d suggest focusing on a single social network, rather than a whole bunch (e.g., “We’d love your help in sharing this ebook. Please share it with your network on Twitter!” accompanied by a nice big shiny tweet button.).
  4. At the top of the page it says, “Questions?”. Questions about what? The ebook? The kit? I’d add some specificity here, or rephrase it to say “Questions about PPC?” or something tightly related to why folks would want to call (or why you want them to call).
  5. The image is horrible, cheesy clipart. Let’s instead throw in an image of Larry coupled with a statement of why visitors should listen to Larry.

All in all a really simple page, but still room for improvement.

9. Adobe

Seriously? You want me to read all of that copy? It looks like a legal document.

adobe-ad-lens-650
Click for full-length landing page.

The design of a landing page will often affect how people perceive the content that’s being given away. If this datasheet is anything like the landing page, it’ll be dull as sh*t.

The only time you’re told what you’re going to get by interacting with this page is that small bold line of copy at the bottom of the left column. It’s a datasheet. What’s a datasheet? Is it industry data? Is it just a list of technical specs about the software?

Give me some bullets that tell me what I’ll learn and why I should care. Add some bolding to the large paragraphs of text, and maybe give me a preview of what’s in the datasheet: a few key highlights and how they will impact my business.

To be frank, the page is a bit cold and corporate. To quote Unbounce Office Manager Charm Singh: “BORRRRRRRRING!”

In fact, I’m so bored with this page that I’m going to rebuild it in Unbounce to see if I can break apart the content a bit, and put more emphasis on the datasheet part.

In this video I rebuild the Adobe AdLens landing page in just 10 minutes, and make some improvements at the same time.
unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce
Start your 30-day trial now

10. Avalaunch Media

avalaunch-650
Click for full-length landing page.

Readability issues

Readability is an important part of clarity, and the headline is cut off in a way that makes it difficult to parse. I’d consider moving the line break from

“GET A FREE $1,250 PAY

PER CLICK AUDIT…”

to

“GET A FREE $1,250

PAY PER CLICK AUDIT…”

Now each line can stand alone and still make sense.

The intro paragraph also suffers from readability issues. The type is so skinny that it looks sketchy on top of the background image. If you have to squint to read, you probably won’t bother.

Looking at the form, I’m not sure what the process will be to get my free audit. Does Avalaunch do the audit and email it to me? Will it be a consultation over the phone?

It’s important to establish a sense of expectation so the visitor isn’t left wondering what’s going to happen. I’d suggest placing this information beneath the CTA or, perhaps even better, above the first form field so the expectation is set before visitors start entering (or not entering) their info.

Next up, the subheads. You’re probably noticing a common thread on a lot of these pages: the subheads are completely throwaway and meaningless to the scanning eye. Let’s run through them:

A simple exercise for better copywriting

Write down all of your landing page copy in a document and make sure every single word is congruent (aligned) with your campaign goal. Start with a skeleton outline so you have the main headline and a series of subheads. When the outline tells a coherent story, move on to filling in the story with the details of your campaign.

Testimonials need meat

The first testimonial on this page is really bad. The customer wanted an increase in search traffic. How much did Avalaunch increase it by? What did Avalaunch do to achieve this?

For the second testimonial, how did Avalaunch help its client achieve their goals? The more specific (without giving away your secrets) the better.

Wrapping up

Phewf. That was a lot of ranting. But hopefully with enough juicy fixes and recommendations that are transferable to your own marketing efforts.

For even more juicy tips and tricks, I’d highly recommend downloading my latest ebook, The 23 Principles of Attention Driven Design, where I explain how to combine data and design to create more persuasive landing pages. It will help you to establish a common language with the designers and marketers on your team, which leads to better design decisions and more enjoyable discussions around conversion.

Read More: 

10 Landing Page Samples That Pissed Me Off and What I’d Do to Fix Them

9 Landing Page Samples That Pissed Me Off and What I’d Do to Fix Them

My commentary on marketing — and the world in general — is very polarized. I despise bad experiences. And I get pretty excited when I see exceptional ones.

Friends who know me well have probably at one time or another experienced OBE (Oli’s Bathroom Experiences).

No, not that kind.

OBE is an ongoing rant about the shitty design of bathroom sinks. Weird thing to get angry about? Perhaps. A reflection of my obsession with designing effective and delightful experiences everywhere? Most definitely.

bathroom sink
Image by Till Naujock(link) via TheStocks.

I’m a bubbly person 99% of the time. But the remaining 1% I can be ever so slightly vicious. And it often comes out when I click on Google Adwords ads and see their corresponding landing pages. And of course during my visits to public restrooms.

With that in mind, I’m going to break down some real-life landing page samples that really caught my attention — for better or for worse.

Speaking of attention, I’ll be referencing my ebook, 23 principles of Attention-Driven Design, throughout, so take heed!

1. MultiTouch

multi-touch-high-res-650
Click for full-length landing page.

Above-the-fold experience

Firstly, the headline: “Marketing simplified!”. How original. Instead of simplifying marketing, MultiTouch should focus on simplifying its messaging.

Then there’s the hero shot. Let’s see what this businessman in a suit — who’s reenacting Minority Report for us in a way that’s not at all cheesy —has to offer us. Nothing. And the screenshots? They could benefit from some captions, so I know what’s important or different.

Side note: The company is called MultiTouch — emphasis on “multi.” So why is the guy only using one finger? See what I did there?

Let’s explore what the hero shot should be doing, with a definition from the awesome Angie Schottmuller during a recent webinar all about hero shots:

hero-shot

You’ll notice there are seven qualifying qualities of an effective hero shot: relevance, context, value, emotion, support, education and persuasion. How many of those seven things does our generic business dude pull off? None. Zero. Nada. Zip.

So the next time you’re choosing your hero shot, think of an image for each of the seven qualities. That should put you on the path to a visual that has impact, purpose and benefit.

To quote Unbounce’s own Dan Levy: “Next problem please.“

Subhead fail

Onto the subhead: “Generate leads – Drive sales – Measure ROI.”

Like most subheads, this line adds a little more clarity to the context; however, at this point I still don’t know if MultiTouch offers a software product or provides a service. And that’s critical information for the fleeting visitor to your landing page.

Perhaps MultiTouch could qualify the three statements with a unique aspect of its service to add more clarity:

  • Generate higher quality leads by unique qualifier.
  • Drive higher value or more sales by unique feature.
  • Measure ROI across all channels with our describe analytics feature.

Directional cues?

Throughout the page there are these little back-to-the-top links. This is really old-school web design. People already know how to scroll, so don’t worry about helping them get back to the top of the page. Rather, worry about getting visitors back to the CTA.

If you are going to add linked directional cues, make sure they take visitors back to the form.

Call to Action

CTA screenshot

Yes, I have heard enough — so let’s assume that I have sufficient details to make a buying decision. I’d recommend moving the call to action (CTA) closer to the question, “What is marketing automation you ask?”, using a contrasting color to attract attention (orange would work brilliantly here) and giving it some affordance.

The greater the perceived affordance (the manner in which the design implies how it can be used), the simpler it is to understand the presented interface. In other words, if it looks clickable, it provides a signal to the visitor that it can be used and interacted with.

Here’s a simple diagrammatic exploration of affordance.

Button affordance

One thing to keep in mind, though, is if the button is part of a well designed form (with a container that encapsulates it), affordance is less important, since the form fields imply an interactive element at the end of the form. But when placed in the middle of a page, in the middle of crowded or messy content, strong affordance (coupled with a contrasting color) can help the button stand out and be more of a target of our attention.

Huh?

Next up we have four screenshots of… Unbounce landing page templates. How naughty!

Landing page templates

Might have to have a conversation in a dark alley with these folks.

Features screenshot

And what else do we have here? Really? Powerful features? Stop telling me that your party is awesome, and just throw an awesome party.

Wait, one more section. Check out this delightful messaging…

Landing page screenshot

“WE WILL NOT ABANDON YOU!” Stop scaring visitors away with desperation!

At this point, I’m kinda lost on how to save this page. It needs to be deleted, and started from scratch. Enough. Undo. 404 or 301 this puppy. I’m abandoning you!

2. Get Response

Above-the-fold experience

Is the fold even a thing anymore?

Regardless of your perspective on this, it’s still nice to see a well architected above-the-fold experience.

get-response-650
Click for full-length landing page.

I really like the video hero shot here. When designing a video player, there are several characteristics to consider: the container, caption, poster frame (default image seen prior to clicking play) and play button.

  • In this case, the container is a fairly standard Apple laptop which conveys the online software aspect.
  • Here there is a descriptive caption up top with a nice little directional cue. People are drawn to captions placed in close proximity to images and video, as they lie outside of the container, thus breaking the flow of its perimeter.
  • The poster frame showcases an email template and how it would look on a phone, along with a visual of the tool. It is a little busy though, and could benefit from a simpler visual or some callouts pointing to elements.
  • The play button would be a little more obvious if it used a stronger contrasting color. It’s a good idea to isolate the CTA by not using its color elsewhere. Here it’s at least reserved primarily for the interactive elements on the page, which is good for consistency.

I would like to see this page with fewer links, thereby focusing visitors’ attention only on watching the video and clicking the call to action. Specifically, let’s have a closer look at the “View Pricing Plans” link under the CTA.

In my experience, links placed beneath the CTA tend to cause a drop in conversions. Here the pricing plans link may be a hindrance, and must be verified through testing.


Anything placed in close proximity to your CTA should be A/B tested – it’s a sensitive area.
Click To Tweet


Beyond the fold

It’s a very long page, and what I like to do with long pages is to look at the scroll map data to see how far people are getting down the page. If they’re not scrolling, I’d be really interested in doing a long page versus short page test here. In fact, I’ve rebuilt this page in Unbounce to show how quickly you can come up with a new variant to test.

In this video I rebuild the Get Response landing page to create a short version fit for an A/B test.

I spent a few minutes touching up the finer details (text color and page copy) and you can see the final page here.

unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce Start your 30-day trial now

3. Ford Employee Pricing

This one came to me as a commercial on the radio while driving the streets of Montreal in a little Car2Go. Employee pricing for everyone — woo-hoo! You pay what we pay. Awesome, right?

ford-employee-pricing
Click for full-length landing page.

What the actual?

Let’s talk about the principle of Distraction for a second. The Attention Ratio on this page is 86:1. And nowhere on the page does it mention employee pricing. It’s making me think of bad sinks again. Ever heard of Message Match? Apparently not. This is a classic case of selfish marketing: expecting me to hunt around the site to find the offer that was advertised. Do better, Ford. Do better. And then something interesting happened when I returned to the site a few hours later.

ford-website-upon-return

It seems Ford got its act together a little bit and featured the promo in question. However, it wasn’t there when I (and countless others visited), so it’s still a fail. There are still a ton of things wrong with the page, but at least Ford’s managed to fix the Message Match problem. You did slightly better, Ford. You did slightly better. But not when it counted.

4. Zendesk

I love Zendesk as a brand. The team does some exceptional marketing… most of the time. Take a look at the landing page below that was the destination of an AdWords ad. For starters, it’s not a landing page at all — it’s their website. That’s mistake number one. I also want to draw your attention to the order of the copy on the page.

zendesk-650
Click for full-length landing page.

Information Hierarchy

Information Hierarchy is concerned with the order in which the copy on your page is presented — both in literal terms (which comes first) and in terms of the visual dominance (what stands out most). Here, the primary headline doesn’t tell me anything about the software: “From now on, things will be better.” Now take a look at the subhead — it contains all of the clarity missing from the headline: “Zendesk is software for better customer service.” If I’d read this first, I’d immediately know what Zendesk does. I call my solution to this phenomenon The Headline Flip. Go look at your own landing pages and flip the headline and subhead. Does it add clarity? If so, consider reworking the order or just change the headline entirely to give it more substance. Then run a five-second test on Usabilityhub.com and ask the question, “What does this product/service do?” to see if you have increased the page’s clarity.

5. KeyShot 5

Remember when I talked about Information Hierarchy? Well, I’m not quite done. Check out the landing page below. Where’s the logo? Where’s the name of the product? Where’s any form of indication as to what’s going on? I have to get beneath the hero shot and the form before I even get a sense of what I’m looking at.

keyshot-5-650
Click for full-length landing page.

The hero shot is beautiful, but at first glance doesn’t tell me that this page is for rendering software. The keyword I used to get to the page was “animation software,” which provides some context. But still, I wonder if an image or video of the software itself would demonstrate much stronger context of use.

Form(ula)

The form doesn’t do much to clarify the offer, either. Form-first design is when you design your form as if it’s the only thing on the page, allowing it to communicate exactly what will happen when you interact with it. Here the CTA says “Download,” but it could be way more specific. Rewording the CTA to say, “Download 15-Day Free Trial,” for example, would again help qualify the product as digital software. Still on the topic of the form: inline field labels suck! They’re a usability – and hence conversion – nightmare. The reason being that once you click in the field or start typing, the label disappears. You might think this isn’t a big deal, and that people will remember what the label said. Not true. People forget, then they click outside the form so the label shows up again before repeating the exercise. This is especially bad on mobile since you often can’t find any space outside the form to click to reset the label. You can click another field, but then you might want to fill in that one — but wait, you can’t see the label. I will, however, give KeyShot bonus points for using field labels that stay in place when you click the field — disappearing only when you start typing. This is not a bad experience for the most part. And on mobile, there’s a good amount of whitespace around the form to allow scrolling past the form if you want to keep exploring. Now, with all that said, there are a few exceptions to avoiding inline field labels:

    • When there’s only one field, because it’s easy enough to remember that you just need to type in your email address
  • When the label remains static but faded in the background, instead of disappearing when typing commences

Cognitive overloading

Cognitive load describes the build-up of mental fatigue when going through a bad experience. Each complex or confusing aspect of the page adds to this load and impedes our decision-making ability, and ultimately the desire to continue. With this in mind, let’s take a look at the fifth form field. The label is a non-question that’s formulated as a question. “Modeling software?” WTF? Are you asking me whether I think this is modeling software? If you recall my initial reaction above, I didn’t know that the page was for modeling software. This is a stress point, guaranteed to make someone stop and think. Finally, at the end is a captcha — those evil little buggers that ask you to interpret the squiggly words and type them into a box. If you’re going to include a captcha, at least add some instruction so visitors know what to do.

Subhead woes

yay-business

Further down the page, take a look at the subheads. This is a classic example of “Yay Business” copywriting. Read them out loud: Easy! Powerful! Fast! Integrated! Accurate! Large data sets! Gross. Subheads should convey benefits, which KeyShot hasn’t done. Adding qualifiers to each subhead would add significant value. But that’s enough for this page.

6. RoomKey

Assumptions

A big reason for a lack of clarity on landing pages is assuming your visitors understand your acronyms and jargon. In this case, it’s PMS, which obviously has a more widely understood meaning.

roomkey-650
Click for full-length landing page.

Perhaps the target market is 100% familiar with the term, but I’d be making an assumption, too, if I thought that. Check out the headline: “Quick implementation of what & training in what with RoomKeyPMS” When you look at it like that, you can see there are holes in the headline and its ability to clearly state the page’s purpose. I’m really struggling to see what the hero shot is trying to convey here, too, apart from the weird cloud computing reference. To better showcase the app, I’d suggest using a video or an animated GIF — a popular design trend sweeping through the landing page world — or a simple screen capture video set to autoplay. It quickly demonstrates aspects of the interface in a more compelling way, and allows you to showcase an important feature. Check out the short Wistia video we use on the Unbounce homepage (below the image of the dude).

Scannable testimonials

It’s dangerous (not shark-infested-custard dangerous, but still) to assume that people will read your entire page, but if you have good social proof, you want to encourage people to read it. A rule I like to go by for any big block of text is that if you can’t find an excellent sentence or phrase to highlight, then you have shitty copy. For a testimonial, you want to break up the text with a bolded statement, and, similarly, if you can’t find one that’s compelling, your testimonial isn’t going to do its job. Try to find that gold nugget that explains the pain relief, benefit or game/life changer and bold it to break up the text. In this case the testimonial is generic business rhetoric that has almost zero worth. I’d source another, or reach out to the customer again to uncover that gold.

7. Qlik

I really like the value proposition here, primarily because business analytics is a complex and frustrating realm. Qlik claims the software is simple and intuitive — let’s see if we can say the same for the landing page.

qlik-650
Click for full-length landing page.

Overall, I’m a fan of the design, but I can’t help feel that the most important part of the hero shot (the screenshot of the software) has been relegated to being secondary. The two tins are so big — for no rational reason — that the screenshot is too small to read. I’d suggest bumping the size of the hero shot by about 50% and making the surrounding elements smaller. The most benefit-laden sentence in the opening paragraph is, “Discover more insights from your data in just five minutes.” I’d recommend bolding this and putting it on a line of its own to make sure people see it. It might even make sense to put it in the headline/subhead, or as a caption to the hero shot. Doing so connects the software directly to it’s benefit. Also, in one of the bullets “analyzing multiple data sources” is referenced — some specificity would be good here. What kinds of sources can I integrate with the software? Will it pull from Google Analytics, AdWords?

Form-First

For the form, I notice a wasted opportunity to include an important subhead that highlights another strong benefit, in case the visitor’s gaze is drawn immediately to the form area, like the example opposite.

8. Adobe

Seriously? You want me to read all of that copy? It looks like a legal document.

adobe-ad-lens-650
Click for full-length landing page.

The design of a landing page will often affect how people perceive the content that’s being given away. If this datasheet is anything like the landing page, it’ll be dull as sh*t. The only time you’re told what you’re going to get by interacting with this page is that small bold line of copy at the bottom of the left column. It’s a datasheet. What’s a datasheet? Is it industry data? Is it just a list of technical specs about the software? Give me some bullets that tell me what I’ll learn and why I should care. Add some bolding to the large paragraphs of text, and maybe give me a preview of what’s in the datasheet: a few key highlights and how they will impact my business. To be frank, the page is a bit cold and corporate. To quote Unbounce Office Manager Charm Singh: “BORRRRRRRRING!” In fact, I’m so bored with this page that I’m going to rebuild it in Unbounce to see if I can break apart the content a bit, and put more emphasis on the datasheet part.

In this video I rebuild the Adobe AdLens landing page in just 10 minutes, and make some improvements at the same time.
unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce Start your 30-day trial now

9. Avalaunch Media

avalaunch-650
Click for full-length landing page.

Readability issues

Readability is an important part of clarity, and the headline is cut off in a way that makes it difficult to parse. I’d consider moving the line break from “GET A FREE $1,250 PAY PER CLICK AUDIT…” to “GET A FREE $1,250 PAY PER CLICK AUDIT…” Now each line can stand alone and still make sense. The intro paragraph also suffers from readability issues. The type is so skinny that it looks sketchy on top of the background image. If you have to squint to read, you probably won’t bother. Looking at the form, I’m not sure what the process will be to get my free audit. Does Avalaunch do the audit and email it to me? Will it be a consultation over the phone? It’s important to establish a sense of expectation so the visitor isn’t left wondering what’s going to happen. I’d suggest placing this information beneath the CTA or, perhaps even better, above the first form field so the expectation is set before visitors start entering (or not entering) their info. Next up, the subheads. You’re probably noticing a common thread on a lot of these pages: the subheads are completely throwaway and meaningless to the scanning eye. Let’s run through them:

A simple exercise for better copywriting

Write down all of your landing page copy in a document and make sure every single word is congruent (aligned) with your campaign goal. Start with a skeleton outline so you have the main headline and a series of subheads. When the outline tells a coherent story, move on to filling in the story with the details of your campaign.

Testimonials need meat

The first testimonial on this page is really bad. The customer wanted an increase in search traffic. How much did Avalaunch increase it by? What did Avalaunch do to achieve this?

For the second testimonial, how did Avalaunch help its client achieve their goals? The more specific (without giving away your secrets) the better.

Wrapping up

Phewf. That was a lot of ranting. But hopefully with enough juicy fixes and recommendations that are transferable to your own marketing efforts.

For even more juicy tips and tricks, I’d highly recommend downloading my latest ebook, The 23 Principles of Attention Driven Design, where I explain how to combine data and design to create more persuasive landing pages. It will help you to establish a common language with the designers and marketers on your team, which leads to better design decisions and more enjoyable discussions around conversion.

Originally from – 

9 Landing Page Samples That Pissed Me Off and What I’d Do to Fix Them

Thumbnail

4 Lead Gen Campaign Ideas (+ the Landing Page Templates to Power Them)

All right, so you launched your most recent marketing campaign, promoted it with an eagerness you didn’t know you had, and juuuust as you’re unwrapping your celebratory Snickers bar at your desk, lead gen Greg appears to ask when you can crank out the next one.

…The next campaign that is. He’s not interested in your Snickers bar.

lead-gen-campaign-ideas-650

Every month, you can scramble to pull together a marketing campaign to fill your pipeline with leads, but I think you’ll agree it’s high time you stop winging it.

It’s much more effective to plan out your efforts well in advance and create goal-driven campaigns that direct prospects smoothly through your marketing funnel from awareness to purchase.

In this post, we’ll outline four strategic campaigns you can run for different stages of the funnel, and the landing pages you’ll need to build for ‘em. We’ll even showcase some Unbounce templates you can use to ship these babies out quickly (as soon as you’ve got the content goods to make it all happen).

To start, you’ll want to run…

1. The Audience-Building Campaign

This campaign’s purpose is simple: before you try to sell to anyone, you need to make it known that you exist and show that you’ve got a lot of value to offer.

What better way to do that than to promote the free but incredibly valuable content you publish on your blog?

To this end, you’ll want to build a dedicated landing page designed to get folks to opt in to your subscriber list and receive regular blog and content updates from you. For example, here’s a newsletter subscription campaign in action from Gumroad, a company that helps artists sell directly to their audience:

gumroad-landing-page
Gumroad A/B tested a variety of landing pages to learn more about what incentivized their audience to convert. The winning page now converts at a whopping 19.05%.

Jessica Jalsevac, who works on growth for Gumroad, reports that this landing page has helped increase signups by 10% over what they were last April, and it continues to generate about 5% of their monthly newsletter signups. As she puts it:

It’s incredibly valuable to have a dedicated “home” for our newsletter that we can mention in interviews, presentations, guest posts and more.

Like Gumroad, you might find that including an extra incentive (in the form of a free report, ebook or case study) helps propel people toward conversion.

By A/B testing three different variations of their newsletter landing page, Gumroad was able to determine which content angle converted more subscribers – which even helped inform the brand’s newsletter content strategy going forward.

Gumroad found that potential customers were less interested in tips and tricks on audience building and were more interested in case studies and hearing from fellow creators, as evidenced by the winning variant’s copy.

You don’t need to start from scratch!

When building your newsletter campaign, try out the Moss template in Unbounce. It’s optimized for lead gen, and with a few quick customizations (add your own benefit copy, swap out some key images) it easily becomes an opt-in page for your newsletter or blog.

moss-template-unbounce
Bonus: like every template offered by Unbounce, it’s mobile responsive.

Note that you’ll want to build landing pages for one subscription channel at a time.

Don’t prompt people to subscribe to your blog and your newsletter on the same landing page. For optimal results, pick one subscription channel and run that campaign with clear, benefit-focused copy.

After expanding your potential audience, it’s time for…

2. The Convey-Your-Street Cred Campaign

Now that people are aware of what you do, it’s time to show them how you do it best.

This next marketing campaign is all about demonstrating what’s unique about your unique value proposition: helping you stand out in your industry and becoming top-of-mind for prospects who are shopping for a solution to their problem.

Offering a larger, more in-depth piece of content such as an ebook is a great way to achieve this. Have a look at how Monetate, a platform for multichannel personalization, offers up their practical ebooks:

monetate-landing-page
Monetate started with a blank page in Unbounce to kickstart their spiffy lead gen campaign. Because they write super targeted and industry-specific content, their prospects won’t hesitate to exchange their contact info for this valuable info.

In the case of an ebook or whitepaper campaign, credibility is what you’re striving to communicate – folks have to believe your content is worth their while or they’ll bounce.

This credibility can be conveyed in a number of ways on your landing page. You can craft especially persuasive bullet points outlining exactly what folks can expect to learn from your content, but you can also incorporate some influencer marketing here.

When creating your ebook, consider including quotations or chapters from industry experts or influencers. This way you can include a section on your landing page highlighting the experts included in the resource. The credibility certain experts carry can be a huge incentive for your target audience to download your content and can help them clearly see its value.


Launching an ebook? On your landing page, brag about the influencers who contributed.
Click To Tweet


Running your own ebook campaign?

To get started, try out Unbounce’s Lido template:

unbounce-lido-template

or head over to the Themeforest marketplace and snap up the MYbook template:

mybook-template-themeforest

And don’t forget to sprinkle in some influencer marketing for the best results. ;)

3. The Edutainment Campaign (AKA the webinar series)

While ebooks and other pieces of premium content help build your credibility, it’s always a good idea to take your educational content to the next level by making it a little bit more immersive.

Why not get your target audience to engage directly with a real person from your company? A webinar series is perfect for helping prospects establish a connection with the people behind your brand.

Webinars are also a very natural way to plug your product.

At the end of your educational presentation, take an extra 15 minutes to talk about how your product or service can help a potential client meet the goals discussed in the content.

Kissmetrics knows exactly how to run a webinar campaign. They’re well known for running tons of high-quality webinars, with the recordings available for download on their site at any time.

Here’s an example of one of their webinar lead gen landing pages:

kissmetrics-webinar-landing-page

When running a high-converting webinar campaign you’ll want to anticipate your prospect’s objections to attending and address them on the landing page.

For example, when Unbounce runs a webinar, we want marketers to be able to take advantage of the content even if they can’t attend live. To that end, we include the following line on our registration landing pages:

Even if you can’t make it to the live session, register anyway and we’ll send you the recording.

This simple line helps counter any objections that people might have to signing up.

The ultimate webinar template

Running a webinar? Try out the how-to webinar template in Unbounce:

how-to-webinar-template-unbounce

As with all of Unbounce’s templates, you can customize everything here to make this page all your own.

If you run webinars as lead gen campaigns fairly often (and you probably should – in 2014 they were our #1 marketing channel for new customers), choosing a simple template like this is handy.

All you have to do is swap out your speakers, descriptions and dates each month. This means you can focus your attention on creating outstanding webinars (with actionable takeaways) rather than trying to perfect a page design.

4. The “Here, Have a Discount!” Campaign

After building your audience, demonstrating your credibility and giving folks the opportunity to learn from a real person at your company, you can start inching folks toward the end of the funnel – toward that sweet, sweet conversion.

Yep, it’s time to prompt a demo, a free trial or give away a coupon as a special discount (read: incentive!).

As an example, check out this landing page by Spud, a delivery service for organic groceries:

spud-ca-landingpage

In this campaign, they offer 50% off a one-time trial of their service. You simply fill out the contact form to claim your delivery at the discounted rate. It’s wicked smaht.


Whether you sell a product or service, people want to try before they buy. Incentivize them!
Click To Tweet


The key to this campaign is to offer a discount that fuels another, more-commitment-heavy marketing action further in your funnel.

By offering a trial, discount or consultation, you ignite interest and open up the possibility of following up later to prompt a larger commitment (after prospects have already had a super positive experience).

For running your own discount campaign…

Try out the A La Carte lead gen template in Unbounce!

a-la-carte-landing-page-unbounce

This design places emphasis on providing your email in exchange for something valuable (which, in this case would be your coupon or discount code).

Just swap out the hero shot with something relevant to your offer, and add or remove the page sections as needed. Instead of “Get free recipes,” your CTA should read, “Claim the coupon,” or something super-specific like, “Claim 15% off.”

Whatever you do, don’t forget to test!

A method to the madness

Your goal with setting up strategic campaigns is to lead folks through your funnel. Start by running campaigns with small buy-ins like a newsletter subscription and go with more commitment-heavy offers from there.

Then optimize your campaigns at every stage of the funnel. The more leads you can collect and nurture up top, the more you can impact revenue down the line.

So stop winging it.

Make it your personal mission to run the four campaigns shared here, and make a conscious decision to A/B test the heck out of ‘em. You’ll be sure to start filling your funnel more easily and you’ll have campaigns addressing multiple stages of the buyer journey.

Best of all? You’ll have a pipeline perpetually filled with leads.

View original post here: 

4 Lead Gen Campaign Ideas (+ the Landing Page Templates to Power Them)

Learn to Create Emotionally Engaging Landing Pages with These 4 Examples

Emotional Targeting

40% of web users will leave a page if it takes more than three seconds to load. But they’re not just waiting for a page to load — they’re waiting for you to get to the point. Three seconds to make an impression before they hit “Back”
in their browser.

Of course, it’s not enough for a landing page to load. A landing page has to persuade, and it has to do so immediately. And there’s no better way to do that than to connect with your visitor on an emotional level.

In a recent Unwebinar, Talia Wolf of Conversioner made the case for the value of emotional targeting by examining what is perhaps the most emotional industry of all: dating services. It’s an incredibly crowded field, with each service vying to cut out its own slice of the market by providing unique value.

In the process, she explored how you can emotionally target your audience by helping them envision a better version of themselves (due to your product, of course!).

Read on for Talia’s expert insights on the emotional resonance of three of the world’s biggest dating services, and takeaways from an A/B test of her own.

Dating service #1: match.com

Matchcom

Talia praised Match.com for the combination of already-filled form elements and a call to action that actually promises photos of potential partners. Combined, these two elements are persuasive and make it feel easy to get started.

But the kind words ended there. In particular, Talia slammed Match.com for their poor use of photography. For starters, they miss the opportunity to use the images to actually assist in the conversion.

One of the smart ways you can use photographs of people on your landing pages is as directional cues, with them looking or subtly gesturing in the direction of your call to action. But on Match.com’s page, they serve to distract from the CTA. This could’ve been avoided by heeding Talia’s advice:

60% of our brain is geared towards visual context, so the first thing we see is visual. It’s important to use the images on your page in order to guide user attention.

The other problem is that these photos are stock photos. They look fake, and there are good odds that a visitor could’ve seen the photo elsewhere before. That’s a deal-breaker if you’re trying to seem unique (or even credible).

The images on your page are not mere ornamentation. They are an integral part of your page’s value proposition and its content structure, and Match.com fails that test on both fronts.


Use images on your page to guide visitors to the call to action.
Click To Tweet


Dating service #2: Zoosk

zoosk

Next, Talia looked at Zoosk’s page, and praised their compelling value proposition — “get smart about online dating” — for connecting with the prospect’s desire to be intelligent:

I like this angle. If you use Zoosk, you will feel smarter than others.

Unlike Match.com’s “#1 in dates, relationships, and marriages” headline, which is all about Match.com and the quality of the service it offers, Zoosk’s headline is actually about the user themselves.

Unfortunately, Zoosk fails in the imagery department in much the same way Match.com does. Pretty much all of the imagery is of software — not something that’s likely to resonate emotionally with someone who is looking for love. And as Talia pointed out, it doesn’t really mesh with their value proposition:

I don’t get the sense that this will make me smarter or give me smarter matchmaking.


Use your value proposition to make your reader feel empowered.
Click To Tweet


Dating service #3: Beautiful People

BeautifulPeople

In case the name didn’t make it clear, Beautiful People is “online dating for beautiful people only.”

This is pretty exclusionary, but it’s also a compelling proposition: if you use the service, you must be beautiful, and you’re guaranteed to only meet people who deserve to bask in your radiance. As Talia notes, this value proposition is designed to make you feel better about yourself:

You deserve better. You deserve to find the best looking people.

Physical attraction is definitely the cornerstone of a service like this, and Beautiful People supports this message with their use intimate imagery.

Unfortunately, the copy weakens what could’ve been a very persuasive offer. This page features the dreaded “welcome to domain.com,” a type of fluff message that usability expert Steve Krug refers to as happy talk in his book Don’t Make Me Think:

If you’re not sure whether something is happy talk, there’s one sure-fire test: if you listen very closely while you’re reading it, you can actually hear a tiny voice in the back of your head saying ‘Blah blah blah blah blah….’

Worse, the call to action eschews the sexiness of the rest of the page, opting for the utterly libido-killing “create free membership here.” Yes! That’s why I’m here! I’m ready to embark on a steamy adventure toward membership.


Make sure the tone of your call to action matches the rest of your page.
Click To Tweet


Talia’s A/B testing case study for an unnamed dating service

Emotion Case Study

For her final example, Talia shared a case study for one of the dating sites she optimized herself. The initial example has some good elements already: the couple’s gaze draws attention to the call to action, the form is short and a testimonial provides some social proof. But it doesn’t make a compelling offer, nor does it engage the visitor’s emotions.

Talia tested two variations of the page.

Variant 1

Case Study Variation

The first variant was similar to the original page, but there were some changes made to connect with the visitor on a more personal level. The addition of a headline — “find your perfect match” — is a small but effective way to let the visitor imagine the positive impact of the service.

This variant keeps directing attention to the call to action using the woman’s gaze, but opts to have the man facing forward, using the power of eye contact to instill a sense of trust and reliability.

The biggest change, though, was the addition of a powerful background image. Adding a locale to the image allows the user to imagine themselves not just in a hypothetical relationship, but in an actual, physical situation. The colors are not coincidental, either; as Talia’s own research on color psychology illustrates, green instills a feeling of freshness and renewal, whereas blue is the quintessential color of trust.

This variant lead to a 24% increase in signups and a 48% increase in paying customers. Certainly a solid win, but could it be improved?

Variant 2

Case Study Variant 2

The second variant sacrifices the intimacy of the initial imagery for an increase in variety by opting to show dozens of potential candidates. But there’s something even more interesting at play here.

These headshots have been arranged in such a way as to subtly guide a visitor’s eyes to the form at the center of the page. Look closely; while there are some exceptions, most of the people shown are either tilted slightly towards or glancing directly at the form, even as most of them maintain direct eye contact with the viewer.

What’s perhaps more interesting is that these are all actual members of the service, and each photo has been edited to have a crisp white backdrop and a slightly blue tint, which contrasts against the pink form.

The results speak for themselves: a 38% increase in signups, and a whopping 304% increase in paying customers, proving that this page did its job in attracting the exact right kind of customer.

It’s not about you or your product

Trying to appeal to the emotions of consumers is something that marketers have grappled with understanding pretty much since the advent of marketing. But as Talia notes, the landscape has changed:

Emotion in advertising and marketing has been done for years, but in the offline world.
[…] But they can’t track it. Online, you can combine and track emotion and user experience.

Not only can we now measure the performance of our tactics, we can segment our audiences into smaller groups and create campaigns and landing pages that speak directly to them.

No matter what kind of product you sell, the story that will resonate with your customers is not about your product; it’s about the person your customer wants to be, and how your product can help them realize that dream.

Learn more about emotional targeting by checking out the complete Unwebinar recording here.


Link:  

Learn to Create Emotionally Engaging Landing Pages with These 4 Examples

Thumbnail

8 Mobile-Friendly Landing Page Templates Designed With Love

XB, Paris, pont arts, bridge, lovers, locks, Seine, couples, love, keys, fence, river
These mobile-friendly landing page templates were designed just for you, with love. Image source.

You want your page to look professional and modern, but are you getting lost in the aesthetics and losing sight of the true goal: conversions? You need a balance of both, and we want to help.

For the second year in a row, Unbounce has teamed up with our friends at ThemeForest to offer designers a chance to show off their best landing page designs. We put up $14,000 in prize money and put out the call for designers to give us their best in 13 different categories.

We’re sharing seven of the winning landing page templates right here!

Find out why we thought these were the best in their categories, and discover which elements they contain that will help you get more conversions. Make sure you read on to learn more about the secrets to high-converting landing page design.

1. Mediclick

Designer: Surjith Ctly
Prize: Best Medical Template

medical-treatment-landing-page-small

The minimalist design of this Mediclick template provides the means to deliver a consistent message. The sections are broken up nicely, and the map on the bottom is especially helpful in providing much-needed location context. Not to mention the blazingly obvious call to action (CTA)!

They’ve also included a CTA towards the bottom that scrolls back up to the top of the form when clicked. This is a great addition for readers who might require a little more convincing before they click.

There are two variations of this template to choose from, one with the form and CTA above the fold, the other with those elements directly below it. Test both to find out which one works best for your audience.

2. Donate

Designer: Ewebcraft
Prize: Best Nonprofit Template

donation-landing-page-small

This landing page template for nonprofits by Donate starts out with a strong and very compelling header section.

The visually distinct sections allow you to guide your visitor’s eye through a clear and linear narrative. The stats section is a very nice touch here and could go a long way towards helping readers understand why they should donate to your cause or organization.

Would we add anything? Maybe a “Donate Now” button at the bottom to give readers another chance to convert. Other than that, this is a solid landing page template that is sure to help do a lot of good.

3. QuickTravel

Designer: Nasirwd
Prizes: Best Travel Template, Best Lead Generation Template

travel-landing-page-small

Finding great landing pages in the travel industry isn’t easy. They’re as rare as a tropical vacation with no sunburn.

This travel landing page is focused on one goal, with just one CTA on the page. It does a great job of conveying the magic of going on a trip — even without any real copy there I’m ready to pack my bags!

Vacations are expensive, and people might need a little more convincing to reduce their anxiety about the high price tag. To counter that, this template provides sections devoted to describing the benefits of the offer and allows for the addition of large images and videos.

It’s not every day that you get to see a landing page that is both beautiful to look at and laser-focused on conversion. This page has both of those things in spades.

4. Flat Vault

Designer: creativeCary
Prize: Best Multi-Purpose Template

minimal-landing-page-small

I love this Flat Vault landing page! It uses a trendy and modern aesthetic while incorporating a lot of core conversion rate optimization concepts. Sometimes too many colors can be distracting, so you can appreciate the minimal color palette on this page.

The headline is clear and easy to read. The form stands out enough to get people to pay attention to it, and the CTA button jumps out at you like a red spot on a white shirt (in a good way). You may want to test that CTA button with a fourth color, just to see if you can get it to contrast more with the rest of the page.

There’s a well laid-out spot to add a video and a few very catchy icons that add a nice design element without being too distracting. This page is also mobile responsive and collapses nicely to reach those mobile customers everyone keeps talking about these days.

5. Explore

Designer: Xvelopers
Prize: Best Updated Template

updated-landing-page-small

This section includes landing pages that were updated in the last year. They may have added a mobile responsive element, or undergone a complete overhaul. Either way, the winner this year is this outstanding travel landing page template.

If you’re going to convince someone to go somewhere, you’re going to want to show them some nice, big aspirational images like the one at the top of this landing page. The first section below the fold, which grabs your eye immediately, is a great place to include the three quick benefits.

The page also gives you clear contrast between the three sections. They’re not just cookie cutter boxes, and each of them stands on its own. And the most important aspect? The CTA remains consistent throughout.

6. iStartup

Designer: Xstyler
Prize: Best SaaS Trial Signup Template

startup-purple-landing-page-small

This landing page has a lot of great stuff going for it. Above the fold, you’ve got space for a hero shot, a nice big headline and your value prop, with a form and CTA thrown in for good measure.

If you’re using this template, you may want to test the ghost button against a regular CTA button with more contrast. Ghost buttons look cool, but everyone I’ve talked to that has used them says that contrasting buttons work better every time.

That said, the rest of the page makes great use of whitespace for readability and includes another appropriately placed CTA button to convert readers who went all the way down the page.

7. Avira

Designer: Xknothing
Prize: Best Real Estate Template

real-estate-landing-page-small

Having researched real estate in a couple of different cities, I can tell you two things about real estate landing pages. First, they’re often not actual landing pages. Second, they often look like they were built using AngelFire in 1998.

Not this real estate landing page template, though! This page is a breath of fresh air that provides enough room for your content to breathe. The fonts are well chosen and the style is modern. And there’s plenty of space to add photos and entice someone to contact you about that special property.

The use of the testimonial above the fold is a bit unorthodox, but it’s crazy enough that it just might work! In the Conversion Marketer’s Guide to Landing Page Copywriting, Joanna Wiebe says the following:

[The] testimonial is a marketing message – but it’s far more powerful than regular marketing copy because you’re not the one saying it.

This is a great way to get people interested based on some social proof right away. Nice touch!

8. Flare

Designer: Morad
Prize: Best Startup Template

startup-landing-page-small

There’s something very exciting about promoting a startup. You want the world to know all about what you do, and you want to tell them everything.

The problem is, you can’t tell them everything. You need to emphasize what makes you unique – and this template has a big section above the fold to help you show off your hero shot, your catchy headline and your value prop.

There are two separate sections for feature lists to help people understand what you’re all about. Use one or both, and take advantage of the minimal space for copy by keeping your messages brief.

Providing great-looking spots for social proof and a few factoids about your startup are also a nice touch.

A bright future for landing page design

All in all, what we saw this year was that landing page designers are becoming a lot more savvy about conversion centered design. Very few designers appear to be going for form over function, and it’s encouraging to know that Unbounce customers have such a great field of landing page templates to choose from.

Congratulations to the winners, and to the many designers who took the time to show us their best. You can find all of these templates and a whole lot more in the Unbounce landing page template section over at the Themeforest marketplace.

Which landing page template is your favorite? Let us know in the comments!


From: 

8 Mobile-Friendly Landing Page Templates Designed With Love

4 Stupid Mistakes You’re STILL Making On Your Landing Page

stupid-mistakes-landing-page-650
Are you still making these landing page mistakes? Image by Brandon Grasley via Flickr.

Believe it or not, many of the world’s most aesthetically beautiful landing pages fail miserably when it comes to conversion.

Why? Because when you focus too much on design and not enough on your customers, it’s easy to lose sight of the bigger picture and fall into common conversion-killing traps.

In this post, I go through four of the worst mistakes you can make on your landing page, with real-world examples. Fixing even one of these mistakes should result in a serious conversion rate improvement – so let’s get started!

1. Not showing the product

Let’s take a look at this landing page for iMenuPro – an app that allows restaurant owners to design menus online:

imenu-pro-650
Click for full-length landing page.

It’s a nice enough page, right? Solid design, pretty engaging content and it even has a bit of personality. But there’s one crucial thing missing: they never show the product.

iMenuPro is a menu designer, yet we never see any actual menus that have been designed with the tool. Believe it or not, this is an incredibly common mistake.

If this seems like a huge oversight to you, it should. Neglecting to show your product is the #1 cardinal sin of landing page design, and here’s why: humans aren’t just visual learners, they’re visual purchasers.


Do you show & tell? If I can’t see myself using your product, I can’t see myself buying it.
Click To Tweet


If I can’t see your product or what it does, how in the world am I supposed to want it? Imagine trying to buy a car that has only been verbally described to you.

The solution

Show your product up-front and clearly. Make it the hero shot of your page.

And when possible, show your product in action.

This technique, called context of use, helps show prospects how your product works and helps them envision themselves using it:

This is precisely the reason that ShamWow has become a household name – they show their product in action with real people, in real situations you can relate to.

Showing and telling will help you convert browsers into customers.

2. Not explaining what you do

It’s all too easy to forget one of the main purposes of your landing page: educating your prospects.

Many prospects who visit your landing page know nothing about you, your company or what it is that you do. It’s your landing page’s job to fill in the blanks. When you don’t do that, you get a page like this:

marketing-genesis-live-650
Click for full-length landing page.

Marketing Genesis is a paid seminar for aspiring marketers – or, at least, that’s what I think it is. They never actually say.

If you carefully read a few hundred words into the text, you’ll eventually infer what Marketing Genesis is, but it takes some effort. They’re assuming that I know something about their business, but I don’t.

They make this same mistake dozens of times throughout this page:

  • The main headline on the page tells me to “Register Now,” but I don’t know what I’m registering for yet.
  • The CTA asks me to click for tickets, but again, what am I getting tickets to?
  • They even assume that I know where the event is taking place (hint: I don’t).

If you’re thinking, “how could someone possibly forget those things on a page?”, you should know that this sort of thing happens with shocking frequency.

When you’re elbow-deep in the goings-on of your own company, it’s easy to forget what it’s like to not know about your company.

The solution

When in doubt, treat your clients as though they know truly nothing about you.

Explain what you do, why you’re better than your competition and how your product can improve your potential customers’ lives.

The people at Webflow do a brilliant job of this – take a look at their homepage:

webflow-650
Click for larger image.

Even though they’re selling a relatively high-tech product, their opening headline tells me exactly what they’re all about in just a few words: “Professional-looking websites without writing code.”

That’s the kind of quick sales pitch we’re looking for.

Note: explaining what you do does not mean telling prospects about everything you do. As we’ll see below, you want to test making your copy as minimal as possible.

3. Using lots of paragraph text

If there’s one immutable truth about your customers, it’s this: whether you’re Apple or a mom-and-pop shop, nobody wants to read the long paragraphs of text on your landing pages.

Take for example this page from Newschool of Architecture and Design in San Diego:

newschool-architecture-design-650
Click for larger image.

They seem like a lovely university, but they fall into a common trap: they’re over-explaining.

In order to get my questions answered, I need to read through at least a few paragraphs of relatively dry copy. I’m willing to bet that many potential students would rather leave the page than put in the effort.

It might feel like your business is too complicated to explain quickly but in reality, even the most complex businesses can be to be boiled down to a series of short, benefit-driven sentences.

If you absolutely need to write a longer page, communicate your unique value proposition up front and don’t write a word more than you have to.

The solution

Be kind to skimmers and impatient users by cutting down on text, focusing on the key points of your service and providing visual examples.

If you routinely have issues with including too much copy, try writing your copy first before even looking at a landing page template.

That way, you’ll be sure to design a page that complements your copy and only includes the words you absolutely need. Not sure what you need? You should test that.

4. Making users choose (or even think)

Many businesses have multiple buyer personas, which makes marketing to them kind of tough.

How do you tailor a landing page to drastically different groups of people while still resonating with your ideal customers? We’ve all heard it before: Try to appeal to everyone and you’ll appeal to no one.

As a solution to this, many companies add a click-through page that asks users to self-select what kind of customer they are. For example, take a look at this landing page by PerfumesForABuck, an ecommerce outlet for cheap fragrances:

PerfumesforaBuck

Before you can see any product, you’re forced to choose between jewelry for men, women and gift baskets. Until you choose, you can’t see anything about the business or their products – and that’s problematic.

When you force users to choose before seeing content, a strange thing happens: many prospects leave and don’t come back.

Forcing choice adds friction – you’re putting extra work on the visitor, and the visitor doesn’t like work. They shouldn’t have to think.

The solution

Even if you have a segmented customer base, you can market to all of them individually without forcing them to make choices. It just takes a little finesse.

If you’re marketing to multiple personas, create separate ad campaigns for each one and drive those separate campaigns to customized landing pages.

Instead of buying clicks for “perfume” in AdWords, buy clicks for “men’s perfume” and send the traffic to a dedicated landing page. This eliminates choice from the equation and helps drive more targeted, valuable traffic to your site.


Don’t make users self-select. Do the heavy lifting with PPC & customized landing pages.
Click To Tweet


Wrapping things up

It’s tempting to run tests on granular stuff such as your call to action and headlines.

But doing so can lead you to lose site of the bigger picture: at the very least, are you explaining what you do and showing people what you have to offer?

If you’ve made one of these mistakes, count yourself lucky. An error like this is a huge opportunity for improvement. And many of the mistakes outlined above are relatively easy to fix.

So fess up. Are you making any of these mistakes? I want to hear in the comments!

Link:  

4 Stupid Mistakes You’re STILL Making On Your Landing Page