CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Here’s What a Winning Click-Through Landing Page Looks Like

winning-click-through-landing-page
These pages got all the stock image hand models clickin’. Image source.

Last month we held a contest on the blog, challenging marketers to create a click-through landing page to promote our latest ebook, Attention-Driven Design: 23 Visual Principles for Designing More Persuasive Landing Pages.

It was an experiment to determine which design principles and “best practices” make for a seductive click-through landing page. But instead of getting a panel of judges to wax poetic about which landing pages they thought were great, we thought we’d publish the pages and let visitors decide: which ones would actually get people to click through and then convert?

Before we talk about the winning pages and what made them so darn titillating, a quick review session. Let’s take a look at how click-through landing pages differ from their lead gen landing page cousins — both in form and function.

WTF is a click-through landing page?

Click-through landing pages do exactly what it says on the tin. Unlike lead gen landing pages, they don’t have a form on the page asking people to opt in. Instead, they have a goal of convincing visitors to click through to another page (where the actual conversion happens).

They’re frequently used in ecommerce funnels to describe a product in detail and “warm up” visitors for their purchasing decision. They combat the cognitive dissonance that is created when someone clicks on an ad for a specific product and they wind up on a seemingly irrelevant generic product page.

In Attention-Driven Design ebook author Oli Gardner’s words:

Click-through pages are a great way to create an interstitial experience that confirms the intent of your ad in a simple way, maintaining the attention of your visitor, and then guides them through the purchasing decision before taking them further down the funnel.

Simple enough, yeah? But if you’re gonna use a click-through landing page to “warm up” visitors and reassure them that they’ve made a “good click,” you also wanna be sure you’ve optimized the heck out of it.

Without further ado, let’s look at our winning click-through landing pages — the ones that lead to the most ebook downloads  — and see which Attention-Driven Design principles they employed to get people to convert.

4th place winner: Conversion Lab

Conversion Lab’s landing page does an excellent job of teasing visitors with sneak previews of the ebook above the fold:

conversion-lab-click-through-landing-page

A little lower on the page, for prospects who need a little more information to be persuaded, they include a SlideShare preview of the core concepts from the book.

attention-driven-design-slideshare

Even with all the additional information, the page is really easy on the eyes. Here’s how Oli Gardner put it when we asked him about the page:

The information hierarchy is strong with a nice linear top-to-bottom reading experience and nicely balanced font sizes for easy reading. Overall, a very clean design – which I’ve come to expect from Conversion Lab.

Indeed. Congrats on placing 4th, Conversion Lab!

mean-girls-linsay-lohan

3rd place winner: Tim Ruof

What really stands out about Tim’s page is his generous use of directional cues to guide your eye down the page.

tim-ruof-click-through-landing-page

One minor quibble: Oli pointed out that the model is looking downwards — under the CTA — so there’s no benefit to the angle of her gaze.

Still, this is somewhat counterbalanced by the arrow pointing to the call to action button, along with the other arrows on the page. Oli elaborated:

I like how the continuation arrows are used to guide you through the reading experience. It may not seem like a big deal, but this really helps both the visual and information hierarchy.

Tim also got crafty with his social proof, pulling actual quotes from Twitter as testimonials:

click-through-landing-page-twitter-testimonials

Oli suggested a couple of improvements to test:

I’d remove the links to the tweets though and perhaps cut and paste the actual tweet so it looks exactly like Twitter.

We’ll forgive Tim for upsetting the attention ratio of the page with those external links, because he blew us away by creating Twitter cards to drive traffic to his page:

twitter-card-tim-ruof

Talk about going the extra mile. Awesome job, Tim.

clapping-clap-wonderful

2nd place winner: Winsome Writing

Winsome Writing’s landing page is shorter than most of the other entries we received, but that doesn’t mean it’s not sweet. Like our previous entry, they use screenshots and a SlideShare preview to tease visitors with the juicy content:

winsome-writing-click-through-landing-page

Interestingly, they haven’t really included any social proof, and chose not to lead with a strong hero shot of the ebook itself. Oli suggested that this might be a good thing to test:

This designer chose to keep the model hero shot. It’s interesting as to what impact it would have. As it’s an ebook download page, it could be posited that the model may confuse matters and she does look kinda sad.

Oli also congratulated Winsome Writing for including a bold CTA button which contrasts nicely with the rest of the page.

Overall, a solid effort that secured Winsome Writing second place in the contest. Pat yourselves on the back!

pat-patting

1st place winner: Sherif Makhlouf

Drum roll please…

This landing page scored creator Sherif Makhlouf an all-expenses-paid trip to Vancouver for Call to Action Conference 2016!

sherif-makhlouf-click-through-landing-page

As Oli pointed out, it’s pretty clear that Sherif read the book — he employed several Attention-Driven Design principles. There’s Direction: the way the model’s gaze directs your attention to the CTA, and the Contrast of the big pink button. Finally, the third page section uses Continuation effectively, helping to draw your eye down the page.

But Oli also praised Sherif for employing other classic landing page best practices. For starters, look at how decked out the social proof section of the page is:

click-through-landing-page-social-proof

And then there’s the counter by the CTA button, which displays how many copies have been downloaded:

false-scarcity-click-through-landing-page

But Oli especially appreciated the way Sherif employed a healthy dose of scarcity and urgency:

The use of “only 27 free copies left” is a nice touch, not mentioning price but insinuating that it will become a paid ebook soon.

It’s worth mentioning that this is in fact false scarcity — the ebook will remain free forever, we swear! But that this page is the winning page speaks volumes about the psychological power of these tactics.

Before you run off and employ false scarcity on your own page, step back and remember that, “With great power comes great responsibility.” Because if prospects suspect that you’re trying to trick them, you could lose them forever…

lines-album

Create a winning landing page of your own

Thanks to everyone who submitted landing pages to our Attention-Driven Design contest — you guys never cease to amaze us.

And special congrats to Sherif, you sneaky-but-super-smart marketer! We can’t wait to meet you at Call to Action Conference 2016.
Want to create a landing page that replicates the success of Sherif’s? Check out Oli’s latest ebook by entering your email below…

Get Your Free Guide to Attention-Driven Design

Learn the 23 visual principles for designing more persuasive landing pages



About Amanda Durepos
Amanda Durepos is Unbounce’s Blog Editor and an aspiring dog owner. Former gallery director and freelance blogger, she has a love for curating great content. Find her on Twitter: @amandadurepos
» More blog posts by

Comments:

  1. Brian Lenney (Winsome Writing)

    Cool post and good discussion points.

    Congrats on the free ticket Sherif. Not that we really can here but it would have been neat to see the entire funnel/process that drove people each landing page.

    Mine is super simple intentionally as I was going for quick wins on the page (especially mobile users) and included my other elements (e.g. enticing CTAs, social proof, etc.) on social and i n a few emails I sent out.

    It’s great that you have these contests and offer critique afterwards. I would have loved to be able to split test my simple page against a longer page and change my funnel up for each one to see what would have converted better, but just didn’t have the bandwidth on my end. Fun contest as always.

    Cheers,

    Brian

    PS- You bet your a** I’m still coming up to Vancouver for the CTA Conf next year though! Thanks Unbounce.

    (1)
    Reply
    • Amanda Durepos

      Love your idea of having a birds-eye view of the entire funnel. And thanks for providing more detail about what you were going for here — that gives really interesting context to some of the design decisions you made.

      See you at CTA Conf next year!

      (3)
      Reply
  2. Tim Ruof

    Congrats to Sherif on winning and everyone who was mentioned! It was fun being involved and experimenting with Twitter cards. Appreciate the feedback Oli!

    (3)
    Reply
    • Amanda Durepos

      Your Twitter card got shared around the marketing team :) We were all very impressed.

      (1)
      Reply
  3. Julia

    I wish this focused on MQL content. While ebook lead gen is important, I’d love to see some pages with a high click through rate that convert to demos. Thanks!

    (2)
    Reply
    • Amanda Durepos

      Hey Julia, thanks for your comment. :) Always nice to hear what our readers are on the lookout for — I’ll pitch that to the content team.

      (1)
      Reply
  4. Stephen Parnell

    Great piece, well done. Only criticism I would have for the winning design, indeed all of the examples, is that when I click the CTA I am taken to another page that starts selling me on the download all over again. Haven’t I just said I want the download? Do I need to go through another page? Shouldn’t I just have a form to fill in? Interested in your observations of this.

    (2)
    Reply
    • Amanda Durepos

      Hey Steven, you’re entirely right. Because we’re really only asking prospects for their email in exchange for an ebook, so much convincing seems unnecessary.

      I don’t think we’d recommend this for ebook lead gen campaigns in general, but for the purpose of our contest, the extra friction worked well to make things especially tricky for participants ;)

      Click-through pages are much more common (and effective) in the context of an ecommerce PPC campaign — keeping the conversion scent strong between the ad and the ecommerce shopping cart.

      (1)
      Reply
  5. Graham Winter

    Congratulations Amanda – you’ve created a really interesting piece

    (1)
    Reply
  6. Andrew Flowerdew

    Indeed yes the most interesting post I have read in a long while, I shall be re-visiting to read in more depth : ) Congratulations!

    (1)
    Reply
  7. Netta

    Thanks for sharing the different winners and Oli’s thoughts on them as well! I loved seeing the different ideas and designs and learning from them. And now I want to read the ebook even more! This blog should have entered in the competition to see how many people download the ebook after reading this! Great post!

    (1)
    Reply
  8. Ryan Harmon

    Did anyone else read this twice looking for the data?

    Just curious to see the numbers.

    (1)
    Reply
  9. Carl Holzwarth

    Great blog post, lots of good stuff. I’m going to revisit so I can study the findings and take good notes.

    (0)
    Reply
  10. Md Jahangir Alom

    Hey It is very interesting post. I have read this and fell in love with this post. I shall revisit e the post. Thinks for You.

    (0)
    Reply
  11. Robert F. Cruz

    Indeed. It is better to have a click-through landing page to warm up visitors than directing them immediately to the payment gateways. A much better bait and truly effective for a PPC campaign. The more attractive it is, the more eyeballs it will get.
    What an informative blog.
    Great work!

    (0)
    Reply
  12. Sherif Makhlouf

    Thanks Unbounce for such an awesome motivation to apply these principles and see their power first hand. All the runner-ups did an amazing job and its such privilege to be among such smart people. See all in Vancouver!

    (0)
    Reply
  13. Emma

    Nice post.
    It is very informative and gives the points clear…

    (0)
    Reply
  14. Allrss

    Congratulations Sherif! Nicely done piece. Speaks softly and carries a big stick.

    (0)
    Reply
  15. sonali singh

    Hi Brad
    your blogs are always use full to me. it gives me great idea thanks for sharing your ideas.
    I love reading your blogs.

    (0)
    Reply
  16. gopi

    nice post …how to optimizing our landingpage…giving great ideas.

    (0)
    Reply
Comments