Tag Archives: perhaps

Replacing jQuery With Vue.js: No Build Step Necessary

It’s been impossible to ignore all of the hype surrounding JavaScript frameworks lately, but they might not be the right fit for your projects. Perhaps you don’t want to set up an entire build system for some small abstractions you could feasibly do without. Perhaps moving a project over to a build system and thus, different deployment method would mean a lot of extra time and effort that you might not be able to bill to a client.

Read original article:  

Replacing jQuery With Vue.js: No Build Step Necessary

Hypothesis Testing

hypothesis testing

Hypothesis Testing: A systematic way to select samples from a group or population with the intent of making a determination about the expected behavior of the entire group. Part of the field of inferential statistics, hypothesis testing is also known as significance testing, since significance (or lack of same) is usually the bar that determines whether or not the hypothesis is accepted. A hypothesis is similar to a theory If you believe something might be true but don’t yet have definitive proof, it is considered a theory until that proof is provided. Turning theories into accepted statements of fact is…

The post Hypothesis Testing appeared first on The Daily Egg.

Continue reading here: 

Hypothesis Testing

Developers "Own" The Code, So Shouldn’t Designers "Own" The Experience?

We’ve all been there. You spent months gathering business requirements, working out complex user journeys, crafting precision interface elements and testing them on a representative sample of users, only to see a final product that bears little resemblance to the desired experience.
Maybe you should have been more forceful and insisted on an agile approach, despite your belief that the organization wasn’t ready? Perhaps you should have done a better job with your pattern portfolios, ensuring that the developers used your modular code library rather than creating five different variations of a carousel.

Link to original:

Developers "Own" The Code, So Shouldn’t Designers "Own" The Experience?

Getting Practical With Microcopy

The first question clients and stakeholders seek answers to with any digital product and/or service today — and rightly so — is how to establish an effective user experience. We, as designers, however, know that good design and a good user experience are rarely achieved by fixating on one discipline, but rather by adopting a multidisciplinary approach. At best, it’s about finding a balance between UX, UI and interaction design, usability, accessibility, web performance (front end, back end, networking), service design and content strategy (i.

View the original here: 

Getting Practical With Microcopy

9 Landing Pages 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

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:


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.


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.

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?

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.


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.

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 the subhead 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.

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.


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 problematic 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


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!


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


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.

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.

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?


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.

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

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


“GET A FREE $1,250

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 Pages That Pissed Me Off and What I’d Do to Fix Them

Nobody Wants To Use Your Product

Every morning, designers wake up to happily work on their products, be they digital or physical, with an inner belief that people will want to use their products and will have a blast doing so. Perhaps that is a slight generalization; however, as designers, we tend to have a natural desire for each project we work on to be the best it can be, to be innovative and, most importantly, to make a difference.

Nobody Wants To Use Your Product

Here is a little revelation. People are not really into using products. Any time spent by a user operating an interface, twisting knobs, pulling levers or tapping buttons is time wasted. Rather, people are more interested in the end result and in obtaining that result in the quickest, least intrusive and most efficient manner possible. And these are two fundamentally different concepts — usage versus results — which, at the very least, differentiate good product design from poor product design or, on a smaller scale, a good feature from a bad one.

The post Nobody Wants To Use Your Product appeared first on Smashing Magazine.

Read More: 

Nobody Wants To Use Your Product


The Most Entertaining Guide to Landing Page Optimization You’ll Ever Read


Landing pages rule. Blah.

Homepages suck. Blah.

Do some A/B testing. Blah.

Base your optimization strategy on customer feedback. Blah.

All of those statements are true. But they sound boring and being boring is lame. It’s twenty fifteen and I refuse to be lame.

If you want to be a non-lame marketer, it’s really easy. Read this post, have a laugh, and treat everything I say as gospel.

Be warned, however, that I may descend into telling dad jokes in the absence of witty metaphor and charming anecdotal rhetoric.

The experienced adult readers amongst you might remember that “Shit. The condom broke!” moment. Yeah you do. You might also remember that it felt like a good time to run a test. #STDsArentFunny. Perhaps. But, as we go through this epic journey together today, I’ll show you exactly when and how you should really be testing.

But first. The best seven-part list of bullet points you’ll ever read.

The start of the best part of your day begins now with this table of contents:

  1. First I’ll give you the only rationale you’ll ever need to explain why landing pages are to marketers, what Imodium is to an astronaut with diarrhea. Essential.
  2. I’ll prove why context – not content – is king when it comes to conversion.
  3. Following that, I will make you fall in love with forms. FYI, it’s really, really hard to make form love a “thing”.
  4. Mid way through we’ll sip some Canadian Club, get our Don Draper on, and learn how to write copy like the Mad Men (and Women).
  5. “Paint me a pretty picture Johnny!” “Screw you mommy. Design is not just rainbows and unicorns!”
  6. Is it greedy to want a second helping when you’re an orphan? Not if you have my name. (It’s Oliver in case you’re confused). Always ask for more when it comes to conversion.
  7. And finally, I’ll put my art critic hat on and rip into some landing page examples, both good and bad.

Challenge laid down. Challenge accepted (on your behalf).

Chapter I: Why Landing Pages Rule, and Why You Should Never Send Campaign Traffic To Your Homepage

If I’ve got your attention thus far, it’s probably because you can’t bear to tear your eyes away from my enchanting prose.

The only important word in that sentence is ATTENTION.

Attention is a state of mind that you can’t assume your visitors will even enter if you don’t give them the right conversion experience.

A good conversion experience is one in which your visitors are compelled to pay attention and ultimately interact with your conversion goal – clicking the call to action (CTA).

A bad conversion experience is one in which your visitor is compelled to run away.

There are three sides to attention that we need to consider:

  1. Capturing your visitor’s attention
  2. Maintaining your visitor’s attention
  3. Focusing your visitor’s attention

Your ad covers point #1, and landing pages are the answer to solve numbers 2 and 3, so let’s start with number 2.

Genius insight #1 – Attention ratio

Pay attention as I set the scene.


Let’s say you’re running a marketing campaign for a promotion:

“50% off Miley Cyrus Twerkout* DVDs”

*I’m claiming a ™ on that brilliant piece of branding.

Got your attention, right?

Well, let’s see. What is attention ratio?


Attention ratio: The ratio of interactive elements on a page : the # of campaign conversion goals.
Click To Tweet

With that in mind, consider the two diagrams below. The first is a typical homepage, and the second is a campaign-specific landing page.

The homepage


On this homepage, your Twerkout campaign is represented by “promo 2” highlighted by the red circle.

The rest of the page is comprised of a few other Miley promotions, some tour dates, navigation, a general brand proposition about how Hanna Montana is no longer a thing, a photo slider, footer navigation and many other page “leaks.”

If you send people to your homepage – from a paid ad, email or social media – the intended campaign conversion goal has to fight to get their attention with all of the other interactive elements on the page.

A typical homepage has approximately 40 links.

In the example opposite there is actually a total of 56 links, therefore the attention ratio is 56:1.


Hey, don’t just take my word for it. This overstimulus has impacted many other people’s lives according to Princeton University wuuut!

Princeton neuroscientists found out, the more stuff you have around you, the more each piece of stimulation competes for “neural representation”–that is, your attention.

Back to our scientific marketing experiment. Let’s now consider the Twerkout promotion on a dedicated, campaign-specific landing page.

The landing page


On a campaign-specific landing page, the entire page is focused on only one thing, the Twerkout DVD campaign.

The messaging is very tightly related to the campaign goal and has only one interactive element – the CTA.

The attention ratio is 1:1.


Let’s look at an example of someone doing this right. Salesforce is a company with an incredibly complex product offering. Their website is a cacophony of possible pathways.


If you dig deep into the site, their primary goal seems to be to get you signed up for a product demo. Not surprising given the complexity of their software.

So what happens when you search for Salesforce in Google? The first organic result will take you to the homepage. But the first paid ad (right at the top of the page) takes you to a different page entirely. Presumable because you typed in their name and are showing a level of prior knowledge.

The page you arrive at looks like this:


It’s a great landing page. Entirely focused on a single goal. To get you to watch a demo of any of their products. The headline and CTA could use a bit more mention of the purpose of the page (watching a demo). Also, take a look at the button. It’s the same color as the form container. DON’T DO THAT! Use some contrast Salesforce.

Aside from those things, it’s a really nicely designed, focused experience.

One last example. Where would you look/click in this situation?


How about now?


Got it? Never feed your marketing traffic to a peacock, unless you’ve poked his eyes out.

The feather ones, not his actual eyeballs! Wow, you’re sick.

Genius insight #2 – Conversion coupling

You are now 50% of the way to being smarter than 98% of all marketers.

Image source: In Good Company.

Synergy. That’s what I’m talking about. Uck. What a gross word.

Here’s the second piece of most of almost everything you need to know to be the cleverest person in the room at any marketing conference. Try saying that fast.


Conversion coupling: the bond between the source of a click and the landing experience.
Click To Tweet

In more detail it’s comprised of one or more of the following:

  1. Message match: Matching the copy of your ad to the headline of your landing page.
  2. Design match: Matching the design of your display ad to the design on your landing page.

Let’s look at the good and the bad of them.

Message match

To expand, message match is the idea of matching the pre-click message to the post-click message on your landing page, with the goal of making people think they made a “good click”.

The messaging on the page reinforces the reason for their click, reducing/removing confusion.

Here’s an ad for a startup I’ll be working on after Unbounce:


If that link sent you to a homepage, the target headline may look something like this:

Get More Projects Done With Less Management

This may or may not be a good headline for expressing the brand value proposition, but it doesn’t match the ad at all. Result? Bad message match.project-management-software-ad

The correct headline in this instance would be:

Project Management Software Without Deadlines

Result? It matches the headline of the ad perfectly, and thus it’s great message match. Ding, ding, ding. Got it?

To build really strong message match, use the subhead of your landing page to reiterate the main point of your ad’s description.


This example introduces aspects of a concept called conversation momentum, which I’ll get to in part 2. But basically you can see that the subhead repeats the end of the ad description “Deadlines are dead.” and finishes the sentence like people do when they’re in the gushy part of a relationship “Choose procrastination instead”.

And it rhymes. #doublerainbow

Here are some good and bad examples of message match from the Google

Carrying on the thread, I searched for “Project management software for teams”.

Here’s what I found:


Excellent match for the headline and the form header (Try it Free >> Try Smartsheet For Free).

Let’s do that again:


There’s no message match here. I was expecting “Project Management Software” and I got “DIY Custom Apps For Improving Team Productivity.”

Not to mention the attention ratio, which is a whopping 35:1 not including the 40 links in drop-down menus.

Take a look at the page if we remove all of the distractions:


So much better! The attention ratio is 1:1 and it’s much clearer what you’re supposed to do.

And going back to the ad:


Why shorten “management” to “mgmt” just to throw both Intuit AND Quickbase in there. To me that’s brand overload. I like to think of paid ads that are not based on a branded search as needing an application of “Message Before Brand.” Your brand experience will be introduced after they sign up or through the communication of your page copy. Throwing your name in the ad is wasting precious space with a name that people might not be familiar with.

Now I say this based on most companies that don’t have a pervasive brand that could benefit from this tactic, but if you are doing TV ads and a lot of other brand exposure work, then this could be a beneficial tactic to catch people’s eye. But I’d rather add 2-3 more value based words in the headline and relegate the brand name to the 2nd or 3rd row of the ad.

Sidenote: I would love to know some results of this level of branding in paid ads if someone has tested it.

I dare you to search for something that is of importance to your life and do a clickathon. The experiences are shockingly shocking.

So that’s message match!

Boom. Insights. You’re so lucky to be reading this. Next.

Design match

This is one of the easiest techniques to master. Take the design on your display (banner) ad and repeat it on your landing page.

Deep breath.

This time I’ll start with the good side of the force. Example courtesy of RBC Canada via Facebook.

The Facebook ad:


The landing page:


Not only is the message match perfect (100% perfect – can perfect be less than 100%?), the design match also kicks ass. That little dude is following you around with his little sign, letting you know he cares.

HOWEVER. Take a look at the landing page in detail, the page does suffer from attention ratio deficiencies (7:1) and the CTA is horribly small. If you did a squint test (squint your eyes from a distance and see what stands out on the page) – you’d see the trust seal, not the CTA.

To improve this, the different options for applying for an account could be on the next page after the click has confirmed interest.

And the CTA would be a lot clearer if it was designed to be bigger with a strongly contrasting button color.

Brain break! Go smoke, pee, or text your life partner. I’ll wait ‘til you’re back.

Chapter II: Context is King, Queen, Emperor and Boss

The more testing I do the more I keep coming back to one central concept. Context. In this section I’ll show you a few examples of context in action.

But first, a couple of definitions with names that I invented. #yourewelcome #payattention.

2.1 Conversation momentum

The purpose of conversation momentum is to remove the break in communication that can occur when the click is made. If you’re wooing someone in an email or blog post, it makes sense to continue to do so on the landing page.

You wouldn’t invite someone into your house then act like you had never met them would you?

A big portion of this concept is respect. Respecting the click, respecting the time you want your visitor to invest.

Imagine this line is in your email.

“Let me show you how our product/service can help.”

Sometimes a good way to preserve momentum is to express gratitude to your visitor for showing up.

“I’m glad you were interested in learning more about words that were on the link.”

Creating a delightful experience humanizes the relationship and shows you care.

It’s important to get to the point quickly (like a short email), but you should do so in a way that flows naturally.

“One of the important things to know about words in the link is that it can establish the benefit.”

Getting warmer.

“What our solution does is to make words in link much easier to do. If you want to take it for a spin, I’ll pay the first month for you. And I’m personally available if you fancy a chat about the best way to use it.”

How yummy is that?

Now consider the lame-o, commonplace and rude approach:

“Let me show you how our product/service can help.”

“We’re the best what we do in the world. Sign Up Now.”

What? You stopped caring about me, and now you sound generic and only interested in yourself.

Conversation momentum case study – Ecourse to landing page

To show how Conversation Momentum works in action, take a look at the CTA in the top-right corner of the page below.


Establishing context

This page is from an 11-part course about landing page optimization, primarily written by me. It’s driven by an email drip campaign where I speak to people in a very personal way. So anyone who is on a course page has received between 2-13 emails from me. My mugshot is also in the sidebar of every page.

At first I was sending this traffic to a rather generic landing page that has our standard value proposition headline:


The conversion goal of this page was a simple click on the orange call to action.

To improve the sense of context, I made three changes to the page design, producing the version below:


The changes were:

  1. A co-branded header. The idea here is represent the before and after of the experience. You came from the ecourse, expressed interest in Unbounce, and are now having Unbounce presented to you.
  2. A conversational headline that again connects with where you came from and introduces the purpose of the page.
  3. A personal message from me (the familiar face of the ecourse).

The result? A 77% lift in conversions.

2.2 Context of use

Context of use can be defined as providing a visual demonstration of how your product or service will be used by a customer.

And I can’t underline strongly enough how important it is for conversion. Actually I can – how important it is for conversion << that’s not a link.

Here’s an example:

Think of that guy Vince from the Slap Chop and ShamWow commercials. Annoying? Definitely. A role model for your children? Absolutely not. Excellent illustrations of context of use? Mos def.

You know exactly how to use them and what the outcome and experience will be like.

That’s context of use. Check out this next case study:

Context of use case study – Landing page templates

We all know that research is key when beginning an A/B test. It can tell you when you’re delivering the wrong marketing message, and it provides insight into opportunities that could change your business.

So, I did some research.

I wanted to know how people were interpreting and reacting to the landing page templates page on Unbounce.com, so I added a Qualaroo survey widget to the page to ask a simple question:

What do you think of our templates?

  • They look great: [ text box for extra info ]
  • I don’t understand how to use them: [ text box for extra info ]
  • They don’t meet our needs: [ text box for extra info ]

I ran this survey for about two months, and received 1,771 responses.

Analyzing these responses I spotted three consistently recurring questions from the freeform text entry fields that appeared when you submit a response.

The most common questions were:

  1. How much do the templates cost?
  2. Where can I download them?
  3. Can I use them in WordPress?

Wuuuuut?! They exist inside the Unbounce product. You can’t buy them, you can’t download them, and you certainly can’t use them with WordPress!

Epic fail followed by big opportunity.

Clearly visitors (a large portion of whom were arriving via organic search), were getting an entirely incorrect impression from this page. They didn’t understand the context within which you can use the templates.

How do you fix a broken experience like this?

First, let’s take a look at the original page:


Templates right?

Sure, but for what? In what? How much what?

When someone arrives on your landing page, the first thing they do is to look around and subconsciously ask for help.

“I know why I came here, but I’m not sure where I am or what this is.”

Your job as a business, is to understand the mindset of your potential customers when they arrive at your landing page, and communicate appropriately.

In this instance, like I said, there are a large number of organic search visitors showing up who have absolutely zero context. They searched for “landing page templates” and are thinking about templates and templates alone – not restrictions of where or how they can be used.

To answer the questions of these visitors, we created a two-step diagram to illustrate context of use:


The context of use we designed for this circumstance worked as follows:

  • You can view the template library in the app when you choose to build a new landing page.
  • When you choose a template, you are taken to the page builder where you can customize and edit it.

Test Results

  • Page A [Control] – No context of use: The conversion rate for people who see the templates page is 2.1%.
  • Page B [Treatment] – With context of use diagram: The conversion rate of people who saw the new version of the page was 3%, a conversion rate lift of +43%.

EPIC WIN! 43% conversion lift in new account trial starts.

A really impressive result. But this type of number is thrown around all the time. What does it actually mean to a business? What is the impact on revenue?

Impact on Revenue

To figure out the affect this win had on the business I took into account all of the relevant numbers.

  • Additional new trial starts (NTS) per month due to this test — 120
  • NTS over 12 months — 1440
  • Average lifetime value of a customer — $706

Incremental impact on revenue based on a year of extra acquired customers:

1,440 x $706 = $1,016,640

That’s what happens when you help visitors to understand where they are and how the world works while they are there.

Chapter III: How to Make Friends Forms and Influence People

I f**#ing hate forms! They ruin everything.

That was the reaction from our Art Director Denis Suhopoljac the last time we designed some landing page templates.

Unfortunately, forms are a landing page staple, and because they represent your conversion goal, your ability to understand their nuances is the key to success.

Remember this:


Friction hurts & size does matter. Provide conversion lube for visitors when designing forms.
Click To Tweet

Friction is the barrier to entry (effort) that your form presents to your visitors. Friction falls into two categories and has one solution:

3.1 Perceived friction

This is the shock factor of suddenly being faced with a long form. The perception of having to fill out such a long form can be daunting and cause people to change their mind. A solution to this can be to either shorten the form or split your form over more than one page.

3.2 Actual friction

This is the time and trouble it takes to actually *fill in* the form, and it can cause pretty serious abandonment issues if it’s not considered. Things that can slow down – or cause frustration during – the process of form completion include:

  • Too many open-ended questions that people have to think about.
  • Drop-down menus that don’t include a viable option for the visitor. An example of this is the commonly asked, “What industry is your business in?” If there isn’t an answer available and you don’t provide a way out (like an “Other industry” option) then frustration can occur.
  • Captcha security input fields. This is when you have to read strange looking words or letters and type in what you think they say in order to proceed. Anyone not hate those?

3.3 The solution: reducing friction with conversion lube

You probably thought that was a passing reference. Nope. Conversion lube is whatever you can give to your visitor to ease the transaction.

Method one: Ask the data for help

One approach to improvement is to analyze the results you get and adapt your form accordingly. When looking at your form data, ask yourself:

  • Are a high percentage of drop-down results the first option in the list? If so, you should try to make the answers as short and clearly distinguishable as possible. If people can easily/quickly read the option that applies to them without lots of hunting/scrolling, they will be more inclined to select it.
  • Are the responses to open-ended questions actually real answers? Or are they nonsense (such as “asdfasdf”) designed to get through the form as quickly as possible? If so, you should make the questions more direct and easier to answer. Examples would be: “Tell us about your biggest marketing problem” (requires a short story as an answer) vs. “What is the biggest barrier to your marketing success?” (which could often be answered in a few words like “Not enough traffic.”).

Method two: Apply some balance

“The prize” is the incentive you offer up in exchange for personal data. Your goal is to balance the size of the prize with the amount of friction.

There are many incentives for a user to give up their personal information: Digital documents: Ebook/whitepaper/report, webinars, newsletters, consultations for professional services, discount coupons, contest entries, free trials, product launch notifications.

The rule here is: Don’t be greedy.

Only ask from your visitors what you would be willing to give up if the roles were reversed.

Okay, be a little more greedy than that, but not much.

For instance, if you will be sending an automated newsletter to registrants, email or email/name are all that’s needed. Whereas if you have a product/service that requires a follow-up sales call, you would want more information to qualify the level of interest, and sometimes extra friction can actually help to remove the looky loos from your funnel and improve lead quality. Like I said, it’s a balancing act.

When in doubt, don’t get ahead of yourself. Remember that you should always start by asking for a kiss before trying to get in someone’s pants.

I just got a sad feeling.

I don’t think I’ve done enough to make you fall in love with forms.

You should take a trundle over to this page where it’ll all fall into place.

How to design the ultimate lead gen form

Now we’ve covered some of the theory behind forms, you might be wondering exactly how to go about creating a rockstar form.  We can do this by designing our form as if it’s the only thing we’re allowed to put on our page.

Your form consists of the following elements:

  1.    A headline to introduce the reason for the form
  2.    A description with bullets to highlight the benefit and contents of what you’re giving away upon completion
  3.    The form with descriptive form fields (original label names and questions can capture attention)
  4.    A call to action
  5.    Trust statements or links
  6.    A closing urgency or context-enhancement statement

Below is a sketch of how a form designed using this method might look:


How was that? All loved up on forms? Not yet? Maybe we need some real examples. Below are some examples of lead gen landing pages (#withforms) that I happen to like.

The short and sweet signup form


The ebook download form


The request a callback form floating over a guy’s crotch


The super long form with a happy guy at the end



Chapter IV: The Mad Men Pitch – Writing Copy that Converts

Your words are the first thing people pay attention to when the page loads, and the last thing they read before deciding whether or not they will complete your conversion goal.

You would be a mad man (or woman) not to heed this next piece of advice.


Spend 50% of your time writing your headline and the rest writing your call to action.
Click To Tweet

Of course, that’s an exaggeration, you should at least spend 5% of your time writing the body copy of your landing page, but that grandiose statement should at least give you a sense of the relative importance of page elements when it comes to conversion rate optimization. For this reason, I’m going to stick to these two elements (headline and CTA) and try to get you outta here before the bell rings. You are still in school right?

Start with your headline

Chances are you’ve had to go for a job interview at some point. Either that, or you’re an entrepreneur begging to be heard by either potential customers or potential investors.

Regardless, the most and ONLY important thing when you start a conversation with someone, is to get your foot in the door.

That’s what your headline does.

If you can write a headline interesting and useful enough to hold someone’s attention, you’ve got your foot in the door of conversion. Now that you’re in the elevator, you have those precious extra seconds to communicate/pitch your idea.

Copywriter Roberta Rosenberg offers this sage piece of advice:

Your headline has one job and one job only. To get your visitors to continue engaging with your message, increase their desire for what you’re offering, and motivate a call to action click.

That’s why when it comes to crafting effective landing page headlines, choose clarity over clever.

Clever calls attention to itself at the expense of the message. Clarity smooths the way to conversion.

I can verify the part about clarity over clever. Whenever we A/B test email subject lines, the clear version beats the funny or clever one. Stupidly, we still carry on testing them. ;)

There’s an art to crafting an effective headline, but there are also some techniques and formulas you can lean on to help you get started.

To be very clear though. These are formulas for the construction of writing, not formulas for success – because there are no formulas for success. If there were, I’d be sitting behind a diamond studded Macbook Pro, eating beef jerky and telling stories about eating beef jerky while being successful…

Point being. Use these constructs to do exactly that. Construct your headline. The success depends entirely on your idea plus your will and enthusiasm.

So back to the writing:

Joanna Wiebe from Copyhackers suggests these headline writing formulas:

The Only Way to [Do Something Desirable] Without [Doing Something Undesirable]
The Only Way to Turn Off the Lights Without Clapping or Getting Out of Bed

[Do Something Hard] in [Period of Time] or [Promise]
Tune Your Piano in 15 Minutes or “Piano Tuner App” Is Free

[Do Something Desirable] Like [an Expert] Without [Something Expected & Undesirable]
Learn to Play Chess Like Bobby Fischer – Without Any of the Crazy!

They’re not going to work for everything, but they will get you thinking.

I often like to write the landing page value proposition as a sequence of 3 headlines split throughout the page, like a classic story arc of beginning, middle, and end.

  1. The main headline
  2. The reinforcement statement
  3. The closing argument

You can construct your story like this:

Statement of uniqueness
Backed up with a supporting statement to establish credibility

Expand on the experience
And explain how you solve a pain point

Close with urgency to encourage a call to action click

For example, if you are advertising a luxury resort in Costa Rica (cos like, we all do that right?), your 3 part headlines might read something like this:

The Only Luxury Rainforest Retreat in Costa Rica
Dedicated to preserving our wild jungle paradise

Indulge Your Senses in Our Hot Spring Jungle Spa
Without the crowds and distractions of the large tourist resorts

Escape to Costa Rica for a Luxury Experience in One of the World’s Last Remaining Rain Forests

What this does is provide big, bold statements for people who are quickly scanning your page.

You can see how it’s broken down in the screenshot below:


And don’t bother asking where the Pura Vida resort is.

I made it up.

You’re welcome.

Now write your call to action (CTA)

As Mr. Draper and I pointed out earlier, your CTA is of prime importance because it represents the final tipping point between the success and failure of your campaign.

To click, or not to click. That is the question.

You can break a CTA down into many factors, such as:

  1. Description (being explicit about what I’ll get)
  2. Actionable phrasing (using verbs like ‘get’)
  3. Possessives (choosing ‘my’ vs. ‘your’)
  4. Subtext (supporting information)
  5. Urgency (a reason to act now)

To expand on that. I’ll rattle off a paragraph of words that you should memorize while holding your breath:

george-bush-meme-300Every time you add a button to your landing page you need to write down exactly what will happen when the button is clicked, then write those words on the button. It should be specific and driven by the desire to click it. Add words like ‘Get’ at the start to amplify the fact that you will get something by clicking it. Use ‘my’ instead of ‘your’ to personalize the connection. Tell people how long they have to click the button to encourage them to do it NOW! And provide extra context and detail in subtext either inside the button or as an addendum beneath it.

Here’s an example call to action based on these five factors:


Breaking the button apart you can see how the components work together in beautiful harmony.

  1. Description: “Get My Free SaaS Project Management Guide” – Describes what you’ll get by clicking.
  2. Actionable phrasing: “Get” – Describes that you will receive something.
  3. Possessives: “My” – Personalizes it.
  4. Subtext: “A quick 5 minute read with 10 top tips!” – Lends extra benefit to the offer as it’s easily digestible.
  5. Urgency: “Every day you don’t implement these tips you’re losing productivity and money” – Connects with the pain of your prospect and how the offer will help them more if they get it now.

Okay, I get the structure, now how do I write the CTA copy?

Michael Aagaard from ContentVerve.com recommends asking yourself 2 questions in order to optimize your call to action copy:

  1. What is my prospect’s motivation for clicking this button?
  2. What is my prospect going to get, when he/she clicks this button?
Genius takeaway number 412:

A call to action that conveys the value of your offering and its relevance to your prospect will lead to more conversions.

Whoa there horsey!! You need to resist the “Let’s just test 10 different CTAs” syndrome. I’ve been there and it’s dangerous. Your CTA is also one of the most sensitive and impactful places to play, both in the positive and negative directions.

So take heed of this next section.

Unexpected CTA conversion killers – The power of negative suggestion


Something I see a lot of (and something I highly recommend) is subtext beneath a button. A little horse whisper to encourage the click. These can range from privacy statements to special offer reinforcements.

However, there is a certain type of statement that you want to avoid at all cost.

I’m talking about the “insert a negative word that I wasn’t even thinking of” type of statement.

Consider this scenario. You’ve filled in a form and are about to click the button, when all of a sudden, your eye sees the word SPAM! Albeit in a well meaning way – “We will never spam you.”

“But I wasn’t thinking about spam until you pointed it out! Now I have ‘cause to pauseTM’.”

Man, I’m getting good at trademarking awesome terms!

What this does is place a seed of doubt in people’s minds at exactly the wrong time.

In an A/B test performed by Michael Aagaard, the inclusion of the word spam bombed conversion rates by 18.7%.


Another example is shown below where the phrase ‘No Gimmicks’ is written right beneath the CTA.


I don’t think I’ve used the word “gimmick” in a sentence in years. Yet now it’s playing in my head and I’m wondering why I’m having second thoughts.

Removing the word “gimmicks” resulted in a 25% lift in conversions!


Be careful how you supplement your CTAs, and please, please, please, test any changes to avoid an unexpected dip in conversions. I’ve been there and it sucks trying to figure out why your business is suddenly experiencing a negative reaction to something you can’t explain.

Chapter V: Design Theory in 3 Minutes

Remember little Johnny from the intro? Don’t get me wrong, I like unicorns and rainbows as much as the next guy – especially double ones. But they have their place.


When people think that design is just pretty pictures. It twangs my sciatic nerve.


Design is a solution. Be it for desire, need, or imagination. Through aesthetic, function & form.
Click To Tweet

As the bloke who’s seen more landing pages than anyone on the planet, I’ve seen my fair share of design trainwrecks. Designs that are so offensive that for some sadistic reason, I love them more than the good ones.

I love critiquing landing pages because it engages my altruistic side. It’s the design equivalent of puppy rescue or freeing Willies.

Oh, right, I said three minutes. Okay, let me give you some Conversion Centered Design theory in 150 seconds. Go.

As I mentioned at the beginning of the post, design is all about attention.

Your ad captures attention, your headline maintains attention, and your page design focuses attention. As such, your goal with design is to draw attention to the most important element(s) on the page.

Read faster dammit!

Principle #1 – Directional cues

There’s no doubting the power of the image below. It’s an iconic example of the power of directional cues. Uncle Sam is not only staring right into your soul, but he’s pointing at you to reinforce the word “YOU” Or “ME” from a more user-centric perspective.


Here’s another example, this time from the UFC:


And an example from a brick and mortar business:


And an example on a landing page (remember why we’re here Oliver).


As you can see, they leave you in no doubt as to what the purpose of the page is.

The secret is to *combine* design elements so that once you’ve shown people the way – via directional cues – the place where you’re pointing also has clarity of communication.

There’s no point in having the president of your chess club invite people over for a game of Monopoly. The carpet doesn’t match the drapes.

Principle #2 – Encapsulation

You can think of encapsulation as creating a window on your landing page where your CTA is the view. It’s most effective when used to highlight a form #formlove!

Check out the landing page below. What stands out? The form. How hard was that? Pretty damn hard if you look at most people’s lead gen pages.

It’s easy. Just wrap it up…


“If you like it then you shoulda put a ring on it” – Beyonce Knowles

Principle #3 – Contrasting colors

Unless you live in a hole, you’ll have read about a boatload of button color A/B tests. Red is best, green is for go, orange is inviting. Horse excrement. All of it.

It’s as easy as this: Look for the dominant hue of your page, and pick its complement for your CTA. You can see it applied twice in the previous example, where the form container is in very stark contrast to the page and the button then contrasts with that.

If you need help with contrasting colors, check out this color wheel from Tiger Color Lab:


Find your dominant hue and look opposite.

The photo below – which I took on the summit of a barren hill during a lightning storm in Yellowstone – illustrates the power of contrast to suck in your vision.


Button color is irrelevant. Button *contrast* is what matters!
Click To Tweet

Principle #4 – Whitespace

Space things out. And because you can use any color you like, not just white, it’s not as racist a name as it seems. Maybe we should say add gaps. There you go. Gaps.

Look at the photo below:


Your eye is free to wander, floating over the image, until it rests on the subject. The Elk in the lower right corner. And then you go “Ahhhhh.”

In landing page terms, I like the next one for it’s clarity (but it suffers from terrible attention ratio).


Two columns, a smiley face and lots of gap’age. You always need content, but that doesn’t mean you can’t space it out.

And now this:


“You found it!”

Yes I did. By searching for “worst landing page ever.” #truestory

Add some gaps people.


Persuasive design illuminates your failings as a copywriter.
Click To Tweet

What I mean by that is that by applying these Conversion Centered Design principles, you are focusing attention on your call to action. This makes it easier to spot how strong or weak your CTA copy really is. After all, there’s no point in drawing attention to something that’s inherently lame.

Chapter VI: Please Internet, I Want More Conversions


Get this. I’m at a wedding in London in the 70s. I‘m 4. My mother turns to the person next to her after noticing I’d wandered away from the table. “I should go grab him!” she says. “Let him play” is the reply.

A moment later, another lady at the table says, “Look at that boy on the stage!” – pointing at a kid standing up there, hands held out in front of him in a bowl shape – “he should be called Oliver.”

“He is!!!” my mother replies, looking horrified.

That actually happened. No word of a lie. I’ll give you my mum’s phone number. Told you there would be charming anecdotes.

What’s my point? Isn’t it enough that you’re all like “I’m listening to Oliver Twist’s life story!”?

I’ll make it easy for you. You should behave like you are Oliver Twist (me), and ask for something more after every conversion.

When you acquire a lead – when someone fills in your form – the results you can get by asking for more will blow your mind. Or refill your bowl of gruel.

Your marketing doesn’t end with a conversion. Where there is intent there is opportunity.
Click To Tweet

Post-conversion marketing (PCM)

The act of asking for – and getting – more from your leads, is known as post-conversion marketing. It’s the process of continuing the conversation with your new lead on the confirmation page they see after filling out your form.

PCM in action – What should you do?

Imagine this scenario in your head brain.

Dude fills out your form to download an ebook about snowboard designs. You say, “Thanks dude! If you like that ebook about snowboard design, you should come watch our live demonstration of 3D printing snowboard design transfers!”

That scenario can be applied to almost any online business model. You establish interest, then you prompt for a subsequent interaction.

How to use confirmation pages to double your lead gen potential

Here’s a quick and easy case study for you that you can copy to give an instant boost to your lead gen numbers.

We changed the thank-you page for our webinar registration landing pages from asking for a social share, to asking people to subscribe to our blog newsletter.

Here’s the confirmation page in question:


2,500 people registered for the webinar, and of those 40% subscribed to the blog! That’s 1,100 extra blog subscribers just by adding a CTA to the confirmation page of a webinar lead gen form.

Here’s another example of a great confirmation page. In this example, Derek Halpern engages in a conversation and asks people to do 1 or two optional tasks. Remember, all you need to do is ask, and you will get some post-conversion conversions.


That’s smart post-conversion marketing! Go do it yourself.

Chapter VII: The Art Critic – 4 Honest Landing Page Critiques

Now that you’re a pro landing page optimizer, I’m going to rip into a few bad landing pages so you can see where people are going wrong. To be helpful, I’ll also make suggestions for how to make them more effective.

Here’s a B2C example search that most of you will be familiar with:


The ad is a great match for the search query so we’re firmly on a positive scent trail. Now take a look at the resulting landing page:


Wow. What a train wreck! We have three magic words here. “next,” “day,” “delivery.” Take a look around. The word “next” only appears once on the page and it’s so hidden (top-right corner) that the chances of you finding it are absurdly low.

Attention ratio: Over 120:1

Conversion coupling: “Next day flower delivery” >> “Flowers, Plants and Gifts.” Zero message match.

If you decide to stay on this site you’re going to have to do a lot of work to find what you want.

So how would we go about fixing this broken experience? Take a look at the wireframe below:


Now that’s a simple landing experience. You’re probably wondering why there are 5 CTAs giving an attention ratio of 5:1. Why am I breaking my own rules?

I’m using this example because ecommerce presents a different type of problem and the solution needs to be altered to address this particular circumstance.

The reason why this is a good approach is that there is still a single goal on the page – each CTA represents exactly the same action. The difference here is that you are now segmenting by category while maintaining the goal of the page – to get next day flower delivery.

Breaking down the page, you can see that the search scent is maintained as the headline matches the search query and ad copy perfectly – creating great conversion coupling. As soon as you arrive on this page, you know you are in the right place.

The subhead backs up the value proposition of the headline, and the question above the flower categories explains the purpose of the CTAs. Once you’ve selected your category you would be pushed through to the category page on the website so you can select the flowers you want to order.

Isn’t that a delightful experience? And it’s so bloody simple there’s no reason not to deliver a page like this to the people who click on your ads.

This can translate to virtually any ecommerce situation.

How about a search for “iPad keyboards”?


If you look at the display URL you can probably guess what’s about to happen. #ISmellHomepage


OMFG shoot me now! Why would you do that?! That is the epitome of disrespecting my click and my time.

Fixing this is just as easy as it was last time. Have a headline that says “iPad Keyboards” and then have a selection of thumbs for the top selling keyboards that click through to a shopping cart page.

Remember, ecommerce landing pages are one of a few exceptions for attention ratio if and only if you maintain a single goal – to buy/order one of a selection of the same thing.

How about an organic search result?

Consider the following search and resulting organic result:


The first goes to a blog post which is helpful, but you need to read or scroll through the post to find a link to the guide, and it suffers from attention ratio problems due to main and secondary navigation.


The second result points to a landing page as shown below:


That’s a perfect landing experience. Fine, it’s a page that I put together but you can see why it would be effective.

I’m showing this page to demonstrate another scenario where you’d use more than one CTA. The goal of both is the same – to download the ebook. However, the content marketing strategy here is designed to allow alternative social currencies with which to pay for the ebook. First there is the standard email approach which gathers a lead for you. The second is to pay with a tweet.

The purpose of the pay with a tweet option is to let people who are wary of giving up their email get the ebook. At the same time, the goal for the author of the book is to create momentum for the campaign.

Every time a tweet goes out you have the potential to get more people coming back to the page – creating a momentum loop. Clever right?

What isn’t clever is that I neglected to include any social proof on this page. For an ebook, you’ll want to do a search on your social networks to see if anyone tweeted about the ebook. You can then either use that as a testimonial or reach out to the person directly to ask for a more in depth one.

Here’s a search for “SEO research tools.”


The corresponding landing page looks like this:


At first glance it looks like a good landing page. However breaking it down you can see that:

  1. The message match is pretty terrible. It doesn’t repeat the ad at all.
  2. The goal of the page is to download an ebook which wasn’t what I was looking for.
  3. The attention ratio is pretty great. I’d ditch the social share buttons at the bottom as most people will not give a crap about sharing the page at this point. You should ask them to do that on the form confirmation page as we discussed in part 6. Note that for paid search landing pages, it’s often important to include a link to your privacy policy (in the footer) as a trust signal to the ad bots. It can sometimes give your Quality Score a boost.
  4. The CTA is bloody horrible. “Submit” is the single worst CTA copy you can have. It tells you nothing about what is going to happen when you click it. In this case it should be something like “Download my free Searchlight SEO platform product sheet.”
  5. Ideally you’d be using a feature such as dynamic keyword insertion to pass the search keywords through to the page. You could change the headline to read something like this for a better match: “Out of the leading SEO research tools, leading marketers are making Searchlight their SEO platform of choice.”
  6. For the form subhead, the request to fill in the form has zero value to your visitors. As we learned in part 3, you need to tell a story with your form design (as if it were the only element on the page). This subhead content could be used to add an extra benefit statement about what you’ll get from reading this product sheet.

And We’re Done! Feel Smarter?

Thanks for reading all the way to the end! I hope you found this guide helpful and entertaining. Learning should be fun after all.

To recap what we’ve learned:

  1. As attention ratio goes down, conversion rates go up.
  2. The stronger the coupling between ad (or any link really) and the landing page it takes you to, the more likely your visitor will be to understand they are in the right place and stick around as a result.
  3. Context is one of the most powerful ways to create an experience that will convert your visitors into customers. Start a conversation before the click and continue it after the click in a personal way.
  4. If you need to show an image/photo of your offering, try to show it being used in practice to show context of use.
  5. For lead gen landing pages, you can design the form as a standalone unit by ensuring it has 6 elements that tell a complete story around your offering. And form love can be a real thing.
  6. The copy on your page is essential to the success of your campaigns, and you should focus the majority of your time on crafting a compelling headline and an actionable CTA that inspires a click.
  7. Remove incongruent words from your page. Particularly when placed close to your CTA. Words like “spam,” “gimmicks” can be detrimental to your conversion rates.
  8. Design is more than the visual treatment of your landing page, it’s about creating an experience that focuses attention on the goal of your page.
  9. Persuasive design will illuminate your failings as a copywriter, which is a good thing.
  10. Always ask for a second conversion on your confirmation pages.
  11. It’s okay to have multiples CTAs only when the page goal is exactly the same for each.
  12. Take a walk through your own ad to landing page experiences and give yourself an honest critique.

Phewf! I’ll leave you with a short story to round out our time together.

I was walking down St. Catherine Street in Montreal (my new home) a few weeks ago, when a man came running up to me, sweating and out of breath.

He stopped and said, “Can you help me!”

“Sure, what do you need?”

“Do you know ANYWHERE I can get really good chicken right now?!”

Definitely one of the more bizarre requests I’ve had.

If you think about it, this is the real world equivalent of a search query. Now it was up to me to provide a landing experience that solved his problem. I could do this in one of two ways:

  1. “If you go three blocks that way (pointing), then go up 4 and a half blocks, you’ll see a Portuguese place on the right side of the street which has the absolute best chicken in the city”

That’s a delightful experience, and most likely a customer for life.

  1. “There’s a KFC about 9 miles across town. But it’s closed.”

That’s utterly useless. First I didn’t give him specific enough directions to be helpful, and I ignored a crucial part of his search query. Urgency. Sending someone to a result that can’t result in a conversion is a waste of their time. If I can’t get immediate access to chicken (akin to same day flower delivery) then I’m going to leave.

#true story

Alrighty, if you’ve followed along closely, I’ll see you on the other side of more delightful and high-converting landing page experiences. If you feel like sharing some examples from your own marketing in the comments I’d love to discuss them.


This post originally appeared on Moz and was republished with permission.


Read this article:  

The Most Entertaining Guide to Landing Page Optimization You’ll Ever Read

The Mystery Is Resolved: A Story Of Muffin Crumbs, Shady Characters And Invisible Letters

We’ve all been there, haven’t we? You find yourself in a coffee shop abroad, sipping cappuccino and chomping a muffin as you realize that your laptop’s battery charge is just about to crush your creative session to dust. Well, perhaps you’ve got your power adapter with you but, of course, it isn’t the right one for foreign power sockets.
So you end up looking around and chatting up with strangers asking for help.

Originally posted here: 

The Mystery Is Resolved: A Story Of Muffin Crumbs, Shady Characters And Invisible Letters

Don’t Forget The Small Stuff This Year

Whether a designer, developer, blogger, or freelancer, you surely have a to-do list on which certain items slowly inch their way down. These forgotten items add up fast! Think of all the items that you’ve discarded from your to-do list to save time. Even more frightening, what items might you have overlooked to meet a deadline? What have you left on the proverbial cutting-room floor yet again?
What better time than the new year, or new decade for that matter, to tackle your neglected checklist?

Taken from: 

Don’t Forget The Small Stuff This Year