LearnMaking dough or spam? The perplexing case of designing lead generation pages

Treehouse
writes on January 29, 2010

I spend a lot of time working on large-scale site designs, redesigns, and app designs, so it’s kind of fun when the pressure is on to develop a single lead generation page.

For the purposes of this post, let’s define a lead generation as a single page that is:

  • Usually discoverable when a user clicks on an ad
  • A page that precedes a much larger site, or a gateway that refers the user into a larger site
  • Dedicated to rapidly getting users’ email/personal information for follow-up messaging and/or a trial account
  • Almost always makes an offer (discount, trial period, etc.)
  • Not always connected in an obvious way to the larger app’s site (a user might struggle to find it again)

In some ways, a lead generation page, is a micro version of the app’s home page or sales flow.

Companies make substantial investments in Google AdWords (and others) to drive traffic to lead gen pages, so these single page designs have hefty expectations to deliver compelling user experience, design creativity, and form functionality

Lead gen page design is not only short, sweet, and mostly self-contained. It’s also a perplexing balancing act between designing for conversion “the dough” and employing some conventions (e.g. not hyperlinking logos back to the app’s main home page, stock photography, microcopy, offers, etc.) that feel more trickster-like “the spam.”

I’ve divided this post into two parts, 3 tips to follow when designing a lead generation page, and a 3-part redesign of an actual lead generation page that’s currently out in the wild.

Part I. Three Tips to Follow When Designing a Lead Generation Page

1. It’s OK to Design to Dead-end

Your lead generation page has the sole goal of conversion and should be a well-designed dead-end.

By dead-end, I mean that the submit button and legalese (TOS, Privacy Policy, accreditation statement, etc) are the only clickable elements. This means that traditional navigation items like the logo can be there, but should not be clickable. The design drives the user to complete the form without noticing she’s hit a dead-end (which can feel a lot like spam). If a user finds herself clicking about and not getting results, the page isn’t doing it’s main job.

There are plenty of ways to reduce the user’s desire to click items:

  • Add a tasteful degree of “dazzle” to the submit button
  • Decrease the design effects on the logo that would usually look like it was meant to take the user “home”
  • Place the logo in an unusual area: midway down the page, inside the form itself, or towards the lower right corner
  • Add texture and effects to the background instead of onto or within the elements like text or iconography
  • Write great microcopy that answers questions before a user has time to consider navigating away

2. Go Google “Role Play Gaming” & “Online Dating” & Click on the AdWords

Right now, go Google “Role Playing Games” and “Online Dating” and click on the Google Ads. Change your searches up a little by adding your city “new york” or the word “free.”

Social/role play gaming sites like World of Warcraft feature some of the most persuasive user experiences for lead generation design and layout ideas.

Online dating sites like Match, Chemistry, and eHarmony also feature some compelling user experiences on their lead gen pages. I’ve found that they can also inform you about user response (good and bad) towards both overuse and interesting use of stock/posed model photography.

3. Build to A/B Test From Day 1

Design for a lead gen page is never “final.” These pages are among the most important of your stakeholder’s online properties. They are also among the most easily tested, because your stakeholders are sending planned traffic to them.

  • Design for constant optimization
  • Test designs out by geolocation, ad campaign, search query, and hundreds of other scenarios
  • Determine what equals “success,” the mathematical ratio at which you commit to a split-tested change
  • Outline the limits of your design, such as: photo height/width, odd image must-haves and restrictions (e.g. in the use case below we quickly learned that all photos would have elbows showing)
  • Identify what is image copy v. html copy (in case your stakeholder wants to optimize the design herself)

Part II. Use Case: Redesigning a University’s Online Degree Lead Generation Page

For this post, I wanted to concentrate on a single use case, a design for a search query around “masters degree in education online.” I’ve selected this search query for the following reasons:

  • Online degrees are heavily promoted with Google Ads (a major investment for many universities)
  • Online degrees are perceived as “lesser quality” degrees, so they have a somewhat spammy history
  • Online degrees are gaining rapid traction and academic and professional respect
  • Many top 25 universities are both entering and refining the online degree space
  • I happened to be working on this very challenge

*Apologies, this is a client I’m currently working with (and who I love), so I’ve scrubbed the university’s and program’s branding. I can tell you that it is a top 25 university in the U.S. and they are doing some fantastic, extraordinary things with online learning at the university level. In spite of the strike-throughs I think you’ll see what we’ve accomplished.

It’s important note that the current page (below) has been very successful, so our first job was to not break anything that has been working.

We noticed that:

  • Adding the word “prestigious” didn’t make the design feel prestigious, but we felt that the adjective was important enough to provide us with an opportunity to express prestige in a more visual but ambient way
  • Aspiring Teachers and Current Teachers were both outlined in yellow, so they looked like clickable buttons, but weren’t, which could be frustrating to a user clicking on them looking for more information
  • The color red felt overused and without focus on “action,” there was an added challenge because red is a major part of the university’s brand
  • The blackboard made sense, but it added extra noise to the design which was already full of lots of copy competing for the user’s attention
  • The design was left justified and didn’t make the best use of the full-screen experience

Design Round #1. — Maintain consistency with the original design elements

For this first revision, we were asked to stay as close as possible to the “control,” we found this challenging, but we did stick to the core elements (chalkboard, teacher, etc.), so we:

  • Used different stock photos and incorporated a green chalkboard v. black to add a sense of “friendliness” to the design and make the reds and yellows really pop
  • Placed more emphasis on the university and program brands
  • Reversed the form color from red to yellow, so that red became our action color and was more balanced by the red in the brand’s logo
  • Eliminated the number of items that looked clickable to keep the user focused on the form, but added texture to the background of the page to convey dimension and depth
  • Reorganized and tightened up copy
  • Added inline validation (which we plan to test)
  • Replaced a dropdown menu with two radio buttons and plan to default to aspiring teacher (which is the largest audience) therefore reducing more than 75% of our base user’s need to check off that step
  • Added a little “dazzle” to the submit button to make feel like it just had to be clicked
  • Added “We promise never to spam you” below the button to reduce fear of sharing information

Design Round #2 — Lose the blackboard and incorporate more authentic imagery

For this second revision, we were asked to try a design without the blackboard and to try to find stock photography that looked more authentic, so we applied some lessons learned around using stock imagery:

  • When in doubt choosing stock photography, I recommend going with kids v. adults. Kids are cuter, and it’s easier to get away with a cute child, puppy, or panda, than with an obvious stock shot featuring an adult
  • To make the stock photo work better, subtract the original background, integrating it a little more deeply into the design’s background
  • Tightened up copy again (I don’t think you can do this enough, and recommend that you revisit microcopy again and again when in the design phase)
  • Outlined a testing plan, and made the client aware that any photos in the photo space would need to have arms and elbows, which does limit to some extent the types of images we can test

Design Round #3. Determine restrictions of stock imagery & develop an A/B test plan

For this third revision, we created a formal test plan and outlined restrictions for swapping out images on the page, namely we learned that this particular design will always need to have arms with pointed elbows.

Lead gen pages do a lot of heavy lifting in terms of converting users to paying members, and yet are easily able to slip into the world of spam-worthy design. I’ll report back on this page’s progress as we test it out in the coming weeks and months. Meanwhile, I’d love to hear your tips and tricks, where you go for inspiration for lead gen user experience, and any design debacles you’ve experienced in lead gen page design.

*Design by my brilliant partners at jjomedia.com

29 Responses to “Making dough or spam? The perplexing case of designing lead generation pages”

  1. Mark Donington on July 29, 2013 at 3:51 am said:

    Nice article. It’s always an interesting brief when combining design and lead generation. Check out this article which sheds more light on the matter: http://goo.gl/z9bKr7

  2. Excellent article . I really love to read this and everything you mention in this site is great. Thanks for sharing this great information with us. Keep sharing your articles with us.

  3. haha awesome. I work for Match.com and I was doing research for some new landing page design ideas and found this.

  4. In a single word: awesome!

  5. That was a very nice read. I will definitely look up your other articles and check them out too. Thanks for sharing.

  6. Loved the part about developing an A/B Test plan. Have any of them you can share/upload?

  7. Is designing a locked-in landing page really a good idea? What if the user is dealing with an unfamiliar brand? Wouldn’t he/she like to take an overview of the site and establish familiarity before registering interest?

  8. Chrissie,

    Smashing post! I’m pleased to be reading this just as we’re considering launching a new product which we’ve concluded would work best in this way. We’ve been “perplexed” with extremely spammy looking options, so this has been a wonderful, refreshing read for me this morning.

    Thanks for the inspiration!

    Cheers,

    .nate

  9. Awesome post, thanks! Been helping some of my clients get started with their landing pages and your walkthrough was extremely helpful.

  10. Nice article Chrissie on landing page optimization. I’m glad this type of discussion has made its way to Carsonified.

    For anyone interested in landing page optimization, I’d recommend taking a look at http://abtests.com – it’s not strictly about landing pages, but it does have a lot of case studies on how designers and developers have successfully implemented A/B testing to improve conversation rates.

  11. Awesome post! I’ve been spending a lot of time on LP’s lately and love to see posts as specific as this one.

    • I was wondering the same thing…Why do the stock photos need to include arms and elbows?

      I can only guess it’s to make them look more human, friendly, “real”, etc?

      Great article though!

    • Yes, I’m intrigued too. Is it the result of past A/B testing?

      • Lolz. Ali, David, and Raoulw,

        The reason we feel that we need elbows is that the design lends itself best to a “desk,” which cuts off other key elements that make the stock images look less awkward. Elbows add just enough angle to make up for the shortcomings caused by the “desk” cutoff line. Strange right?

        When I post the results of the A/B testing (which starts next Monday), I’ll let you know what we learn about these elements and share a comp without elbows.

        What’s most important though, is that we didn’t realize how much an elbow could matter until we started to play with the A/B versioning – it showed us that the design had limitations that were going to be harder to test and explain to the client who thought we could just add “anything” in the image spot.

        Cheers!
        :)CB

  12. Fantastic article – thanks for sharing.

  13. Ryan Dennler on January 30, 2010 at 11:42 pm said:

    Very informative read, thanks!

  14. Jonathan Rivera on January 30, 2010 at 8:19 pm said:

    I work for a craptastic company that specializes in cheesy lead generating one pagers. I have to design a billion of these things all of them basically promoting the same thing: Either offline dating services, or cash loan services. I thank you for posting this. It is the first quality post I’ve seen that dealt with this type of web design. Thumbs Up! It’s a god send! I’m going to share this with our other designers ASAP!

    • Jonathan,

      This was my first time designing these kinds of pages, and during my research process I was sort of stunned that there weren’t a lot of best practices or helpful tips out there. I was also surprised to learn how well my client’s current design is working, because it felt a lot like spam to me. These pages do heavy-lifting, have lots of power, and are so easily testable because of the ad dollars/predictable traffic patterns – that I’ve developed new respect for awesome designers who pull them off successfully (and that includes the ones that feel like spam but are successful).

      Thanks for your note!
      -CB

  15. Enjoyed this and have to admit to not being up to speed with this area of web design but I feel I am now, hell I think I’ll even have a play with some ideas. Thanks! d

  16. I love this. Can’t wait to see the results of the tests. Thanks for sharing your process!

  17. Fantastic article.

    I’m actually a designer at a marketing agency and lead gen pages are nearly all that I do. We’re also primarily involved in the education space so it’s great to read about someone who’s going through the same things.

    A roadblock of ours at one point is the length of these forms and the amount of information these schools wanted to capture. Obviously, a lengthy forms substantially lowers conversions. To help increase our page’s success, we’ve separated the form into several different parts and incorporated a “steps” system where users would click “next” and “back” to move forward or back, with only a few fields to fill out on each step. A progress meter helped determine steps towards completion. This has increased our conversions dramatically. Definitely worth considering if your form is lengthy.

    Look forward to your results.

    • Jordan,

      I’ve been fascinated to study University of Phoenix’s approach to marketing their online degrees, and in the recent weeks they’ve moved into the user flow you mentioned (here’s an example http://ow.ly/12hkX).

      I’m going to mention this to my client because the actual application process is quite lengthy and that small trick might work for enhancing the experience and reducing the abandonment rate.

      :)CB

  18. This is obvious, but the biggest issue I see with the last example is to NEVER to use the word “SUBMIT” in a button, this is more important than the design of the button. Instead, it should say “Get your XYZ now” or whatever it is you are requesting.

  19. Look forward to seeing the results of the tests – always a tough gig when the current page is converting quite successfully.

    These lead gen pages are good for people who do not need a greater level of information before they sign up. It’s very important to cater for the people that need more information and give them easy enough access to the main website.

    Great article though – thanks

  20. “Identify what is image copy v. html copy (in case your stakeholder wants to optimize the design herself)”

    That’s a bit presumptuous, assuming that all stakeholders in dating websites are women. I don’t know the statistics, but I would imagine the sentence would be more PC ending “optimize the design themselves”. 😛

    • Stuart 😉 Because I feel like there aren’t enough references to women in web development, I tend to write in a way that is gender-favoring towards “she” and “her” – I think that’s kind of awesome that you noticed!

      :)CB

  21. I don’t know about you, but I suddenly have this desire to join the GuildWars realm.
    Seems like the best way to hook someone is give the indication that what is in the back of their minds can be found one click further into the website.

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more