Lead gen pages are often misunderstood as standalone, single-page designs. There’s a science behind A/B testing and optimizing lead gen pages, but there’s also a component of creative user experience that should not be overlooked as you drill deeply into what drives your users through your conversion funnel.

Some user behaviors make clear sense, while others can confound your expectations. Overall, however, designing a complete experience around a conversion page is best understood taking these 3 “Ss” into consideration:

1. Somewhere—Users get to conversion pages from somewhere, so go there first!
2. Superficial—Good looks matter. Users respond to a particular aesthetic, so try different designs!
3. So Much More—Users engage deeper through community, so get them connected to you and each other! (FYI a Facebook Fan Page is a great ecosystem & it’s free)

Okay, so few weeks ago I posted about a redesign I’m working on for a lead generation page. That project began with a single page, but preliminary outcomes further demonstrated that we needed to step backwards and design for an entire experience, which is where Somewhere, Superficial, and So Much More came into play.

I’ll explain!

First, our initial A/B test is over:

• Good news—we didn’t break the existing conversion rate.
• Better news—we raised the conversion rate a little bit ;-)
• Great news—we blew up our Facebook Fan page by designing a thoughtful “Thank You”! (*We increased fan acquisition from 3 fans per day to 30+ fans per day)

Second, we’re embarking on Phase 2. of our test plan, so let me share what that plan looks like, because A/B testing can be delivered in a number of ways. Here is the 3-phase method I recommend and that we’re currently using:

Phase 1.) Update, Don’t Break

(This phase is optional, in the project I’m working on we did need to update an older design before we could effectively move forward with testing.)

• Update the design to a higher standard that better expresses the brand
• Don’t break existing conversion (50 v. 50 split test, confirmed by a 5 v. 95 follow-up)
• Phase original design out completely

(Current design in the wild, original design)

Phase 2.) Design Different Concepts

• Create 2 more well-informed aesthetically different designs
• Conduct user testing (DIY-style works well!)
• Release new designs into testing cycle in increments (10 v. 90% to start)

(Potential design to test)

Phase 3.) Optimize One

• Select the “winning” design from the 3 that have been tested
• Optimize the winning design with A/B testing of the smaller elements on page (copy, image, steps, etc)

(Potential design to test)

Third, as we prepare for our next test, which will involve 3 very different designs, here are things we considered about the current experience to make sure we covered “Somewhere, Superficial, and So Much More”:

Traffic Sources—

It’s important to learn about where your users are coming from; this is the first step to take in order to reduce your bounce rate.

Are your users coming to your site after clicking an ad? Are users coming to your site to learn something, or have they accidentally gotten there, is the message seductive, on target?

User Testing—

User testing doesn’t have to be expensive, drawn out, or complicated. Do informal (or formal if you can) user testing to gather feedback on the different designs before you release them into the wild.

Form Friction—

At the heart of every conversion page is a form. Determine what variables can be tested, and what variable make sense to test. Some form friction is good!

Let me share an example, for us, it seems like “phone number” is an easy variable to test out. But, it turns out it’s not! While we might get more conversions by taking that element out of the form, we would also open ourselves up to less qualified leads, which we don’t want and also aren’t equipped to scale for. (*Consider your community support team, if you put their phone number on your conversion page can they handle the incoming calls?)

The Thank You—

Never underestimate the opportunity for a second level of conversion that your “Thank You” messaging provides for you to create and facilitate community and further engagement.

Our Thank You experience in our first round of testing, totally changed our approach to how we were looking at this conversion page.

To wrap it all up, throughout this process of redesigning and optimizing a single conversion page (we’ve planned on about 3 months of testing), we’ve really come to understand that the best and most effective lead gen page designs involve an entire experience that goes well beyond a single page. Suddenly, our little conversion page isn’t so lonely or so little.

Take a look at your app’s conversion page, rally your team, and consider the impact of Somewhere, Superficial, and So Much More.

Share on Facebook

A few weeks ago, I wrote up a case study around the perplexing case of designing user experiences for lead generation pages. I’m going to cover the results of our test shortly, but in the meantime I wanted to share part of the conversion funnel that has forever changed the way I’m going to design for sign-ups.

Designers do a lot of work engineering the experience of creating compelling sign-up forms for a variety of reasons (joining communities, requesting more information, age-gating verification, etc.). I’d like to take a closer look at how the Thank You page of the conversion flow can be leveraged more effectively for experiences that aren’t necessarily tied to joining a social network.

That said, social networking sites are full of awesome examples where the Thank You jumpstarts the user’s uptake, if you’re:

• Tumblr, you have your user create her first blog post
• Twitter, you have your user find cool people to follow
• LinkedIn, you connect with your email address book
• Meetup, you have your user join a group

But, let’s say you’re a more traditional (perception = less fun) business like a university, can you do more than guide your user towards more descriptive content about the program or services offered (where bounce rate will be high)? How can you make the most of that transaction? How can you parlay the validation “Thank You” into action that can be both inspiring and measurable?

Thank You messaging is not supposed to feel like the awkward end of a first date “Do I kiss him?” moment.

The user has shared her information with you, triggering a response and follow up campaign. She’s staring at the Thank You page, confirming she submitted her information correctly. This is a powerful moment to turn your Thank You into more than:

• a data verification step
• a reiteration of your brand’s identity and tagline
• a jumping off into content (where the bound rate will be high and not super effective in terms of engagement, relationship development, etc.)

Social marketing channels have helped turn Thank You pages into opportunities for secondary levels of conversion where you can experiment with Facebook Fan Page and/or Twitter acquisition.

This brings me back to the use case at hand, while our lead gen page had a number of design constraints, we found that we had a lot of artistic leeway in creating a Thank You page, so we decided to make the number one goal of the page to excite the user to join our Facebook Fan page.

First, let’s look at the original Thank You page, which did include Facebook & Twitter opportunities:

(Note: I apologize for striking through the brand name, my client is a major university and getting approval to share the brand is a bit of a juggernaut.)

Now, let’s look at the redesign of the Thank You page, which puts primary focus on Facebook Fan acquisition v. promoting both Twitter and Facebook equally:

The design:

• Inspired by the idea of the excitement around an “acceptance letter”
• Focused on the fun of university life and community
• Featured access to current students, faculty, and admissions through Facebook

The results:

• Increased Fan Page uptake from 28 fans per week (a consistent rate for one year) to 300+ fans per week (2+ weeks of ongoing data)
• Increased the quality of interactions on the Fan Page, where we were encouraged to see prospects asking questions that were fielded by students, admissions, and faculty
• Increased interaction with blog content, driving traffic to the parent site and making better use of all editorial collateral

As You Design Conversion Experiences Thank You Messaging is:

• Integral—A necessary part of the conversion experience, it’s no longer just a simple hello/goodbye world
• Instantly Gratifying—If you’re testing a conversion experience the results are ongoing and take time. Adding a secondary conversion exercise like Facebook Fan acquisition is an immediate way to leverage (in real time) effects of your messaging
• Social—Leverages warm fuzzies in innovative ways and gets users connecting with one another
• Sticky—The last thing the user will remember about your brand, and can have the added possibility of taking the conversation even deeper into her personal network

Perhaps, the biggest takeaway from designing a great Thank You experience is that the more you can leverage the Thank You, they more you can get your users to connect with your app and with each other the less money you’ll need to spend on post conversion campaigns, marketing, and more.

Thank you!

*Design by my brilliant partners at jjomedia.com

Share on Facebook

I use both Flash and jQuery when designing interactions for data visualization projects. A great opportunity came along to experiment with ways jQuery could be used to develop an interactive map. Before I go further, I admit that mistakes were made, but no pandas were harmed at any point and our team learned a lot, so it ended up a win-win (for us and the pandas).

The project we started out with was simple, we had a comp and a request to create a flash map that could display some static data. After diving in a little deeper, it became clear that the data source would change on a regular basis, so I recommended that we try to create a small ecosystem with various pieces of the project:

• spreadsheet (our data source)
• CMS (client was using WordPress)
• map of the U.S. (caveat: each U.S. location needed to be able to be displayed in 1 of 3 colors: red, yellow, green for the animation, and ultimately managed as an .SVG)

jQuery as a Substitute for Flash?

We could have accomplished everything with Flash, but we wanted to learn something new and today’s browsers (shame-free plug for Chrome!) speed up DOM manipulations, so Flash isn’t the only or best choice, and there were clear benefits:

• Easy—jQuery is already packaged into WordPress
• Styling—design can be easily restyled by almost any team member
• Integrated—everything lives integrated within the page v. living in layers
• UX first—end users never need to install a plugin
• Recession proof—we didn’t have to buy another Adobe product

Other things we kept in mind:

Smart architecture: All of the data is stored in a simple spreadsheet. jQuery, CSS, and simple variable placement determined by a PHP script takes the data and displays it both properly and in multiple places (click over to teachingjobsportal.com to see it in action).

Developer-free updates: The little ecosystem we created allowed us to use one data source to update both the map and each of the locations’ corresponding pages (51 pages for 50 states & DC) that are stored in WordPress. This keeps things simple, reduces the chance for user error, saves a ton of time because a user doesn’t have to open all the individual files, and doesn’t require involving a developer.

SEO-friendly: jQuery allowed us to represent all of the data in HTML, so Google and other search engines can gobble it up and help us make it more discoverable.

Joel Sutherland: Joel Sutherland of New Media Campaigns wrote an awesome post on building an interactive map with jQuery over Flash in January 2009, and he made me believe we could do it too (albeit on a far simpler scale).

Like I Said, Mistakes Were Made

We got too fancy

At a point while we were executing, we decided to convert the data export from the CSV into XML (this also converted the .SVG and made it dynamic). While XML was easier to work with on the developer-side, it added steps and complexities to the process

Additionally, the map’s point-by-point coordinates, complex outlines (U.S. states are not nicely designed with 90 degree angles), and dynamic states required that we use software to both build the map and manage the images in an alternate library, enter ImageMagick. Simple enough, but the problem using ImageMagick to manage the library of the various U.S. state colors we also introduced “Imagick” a truly nasty PHP extension into the mix, which caused a new set of issues.

We descended into dependency hell

Installing PHP extensions can be tough, and Imagick is a huge pain in the a$$. During installation, it requires that you be prepared to manage a large set of spaghetti-like dependencies. There’s also a small bug that we ran into, which prevented compiling, so our Debian-friendly team found ourselves in Unix-land attempting to execute YUM (which usually solves the problem of “dependency hell”), and ultimately lost the battle and had to compile ImageMagick manually (both annoying and a time-suck).

We created simple, but stubborn architecture

Our little ecosystem (the one I’ve touted as mostly simple) is quiet stubborn and set in her ways. We can make updates to the data anytime, but because we didn’t build the data source as a database, we cannot easily add new fields without having to update everything.

We overlooked Hawaii & Alaska

I threw this one in for fun, but whoa! Big oversight! We accidentally forgot to include HI and Alaska and essentially redesigned the U.S. without them.

So, to wrap it all up . . .

jQuery was a great substitute to Flash for us, making TeachingJobsPortal’s map. Furthermore, the execution was mostly simple, our client can control the map and its related pages’ content without having to hire a developer. (*I also didn’t have to learn Flash on the fly)

Though our animation designs are ongoing, we’ve created a new and much nicer hover state, we really like the way that the gauge works (it’s connected to the image library and as the states change color it automatically updates as well), and, as planned, the map smoothly changes colors when the data source is updated.

We’re considering ways we can eliminate using ImageMagick for the library, because we want to use the map on another project and lighten up the load on the CMS, so I’d love your thoughts on that as well as any other ideas you have on jQuery v. Flash!

I owe a lot to Joel Sutherland for sharing his team’s work, so we could learn from it, and for releasing a fantastic jQuery plug-in that I encourage you to use if you ever create zoomable interactive maps.

*Production by my brilliant partners at jjomedia.com

Share on Facebook

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

Share on Facebook

As a user experience designer, A/B testing is not only something I design for, but something I advocate that all my clients implement. It’s one of the best ways we can both provide users with the best and most effective experience and provide businesses with ongoing opportunities to optimize.

The reality is that like almost anything in design, some do it really well, while others fail in appalling and reasonably smile-inducing ways. Getting caught doing A/B testing by your most unassuming and uninformed user is like getting caught with your pants down—embarrassing.

One of the great examples of this occurred in 2000 when Amazon customers found themselves paying different prices for the same DVDs. Ouch!

This brings me to eHarmony, an online dating site that advertises some well-known commercials on television. If you’ve watched TV in the past year on a TV chances are you know the Dr. Neil Clark Warren mantra I’m talking about;)

Throughout 2009 I found myself in a position where I experimented with online dating for two reasons:

• the experience of how dating companies message and market to people
• the dates (er, yes, I do mean the actual dates themselves)
  

Both taught me quite a bit.

Match, Chemistry, and a handful of others never shocked me with their emails (some of the usernames that men choose did). However, eHarmony stood out of the crowd for a few reasons:

• rapid-fire morning messages, usually between 4 and 8 in a row (like I was under fire from the “matchmaking tool”)
• radically different branded email templates
• really bad subject lines, all different, but with the same purpose

It’s the really bad subject lines that I’d like to focus on, and they relate to the rapid-firing in a row, because together they produced an experience that killed the romance.

Here’s a typical morning from 2009:

All of these messages, though different, say the same thing: “Get to know so-and-so.” They would have been more scanable and less distracting if they used the same subject line emphasizing the users’ names.

I never wanted to share these observations with anyone in my profession, because it’s inevitably tied to a much larger issue of my love life, and was ready to let this go on January 4 at the same time as my subscription ran out, except then eHarmony took thing a step further.

Beginning January 4, 2010, my inbox filled with an even more challenging set of differing subject lines. More challenging because the messaging was all over the place. Was I a user more interested in “activities,” “spark,” “unique,” “common,” or greatness? I felt like it was eHarmony having the problem ordering off a menu of men and not me. I wanted simple and given to me straight up.

Here’s a typical morning in 2010 (*pardon that they’re all in my trash now):

Distracting and disruptive, right?

This kind of A/B testing made me feel more like an experiment and less like a client. Moreover, my perception of eHarmony became characterized by the realization that this was not a thoughtful process that took pride in emotionally connecting, but that it was more of a massive warehouse churning out widgets.

A/B Testing Should Not Be:

• Transparent
• Radical
• Isolated
• Hurried
• Fleeting

A/B Testing Should Be:

Subtle—User shouldn’t be aware that they are being tested.

She should feel like she’s experiencing the very best your company has to offer from personalization to copy to look and feel. You’re learning from her actions, so make it impossibly easy for her to accomplish tasks that teach your team without drawing attention to your team.

Incremental—Don’t break things that are currently working well.

Change the text on the button v. changing the button entirely simultaneously altering its shape, color, size, and text.

Aware—Web apps don’t exist alone the world.

News events, seasons, weather, traffic sources, search engine patterns, and even the economy shape the ways in which users discover, interpret, and engage with information.

As you A/B test you should make decisions based on data that’s measured and tracked over time and interpreted with a sensitivity to the world-at-large.

Paced—It’s not a sprint, and when developing apps there is no finish line online.

A/B testing takes time and you need to understand your data in terms of mathematical relevance (e.g. how many unique visitors to sales conversions will it take based on traffic patterns to make a relevant sample size?).

Ongoing—Make user testing an ongoing part of your budget, design, and development.

The best A/B testing occurs when you’re constantly learning from your users. As you grow your user base or expand your offerings new aspects of interaction will be introduced, and as web technologies change users will change predictable patterns.

Both large and small companies can A/B test successfully, but the same rule applies for making mistakes. Executing A/B testing isn’t rocket science, and it’s certainly not supposed to be harder than finding a great love in this life—e’hem eHarmony.

Share on Facebook