The fine art of the

landing page
Or how I learned to stop worrying and love webdev as a sales
person.

1
Delightfully borrowed content
Most of the content was delightfully borrowed from a blog by
Oli Gardner on Moz.com. Mr. Gardner runs Unbounce, the
leading company for landing page design. Here’s the link:

http://moz.com/blog/most-entertaining-guide-to-landing-
page-optimization
OR
http://bit.ly/1naZrlf

2
Instapage Google Analytics Crazy Egg
(experiments)
Unbounce Kissmetrics
Optimizely
LeadPages

3
Why are landing pages important?

Attention is fleeting
Homepages suck
A/B testing is awesome
Landing pages solve all problems ever
They are passive sales – worth getting right

4
5
What’s the point?

Conversion
Attention can be Good: potential user or
managed? Yes, three basic customer shows up, clicks on
steps: a call to action
1. Capturing attention (the
ad, SEM)
Bad: potential customer
2. Maintaining attention shows up, doesn’t know or
(landing page) doesn’t care and leaves
3. Focusing attention (oh,
landing page again)
6
What will we be covering today?
• Volume 1: Key concepts
– Attention Ratio
– Conversion Coupling
– Conversion Momentum
Context of Use
Sketching
out your
–
– Friction
– Form design
own
Volume 2: Writing good copy
landing
•
– Headlines
–
–
CTA
Design - Directional Cues
page.
– Design – Contrasting Colors
– Design – White Space

• Volume 3: Interactive Examples 7

 First, think of a business.
Doesn’t really matter what you choose. Made up,
already existing, your startup, someone else’s
startup, a big business, a small business. Whatever.

I will be working on my father’s business. He is a

bankruptcy lawyer in Southeastern Pennsylvania.

8
 Moqups

Drag and drop items

from the left side bar

9
Volume 1
Key Concepts

10
Concept #1: Attention Ratio

11
What is attention ratio?

The ratio of interactive elements on a

page to the number of campaign
conversion goals.

12
Let’s look at two samples:

13
What’s the attention
ratio here?

There are actually a

total of 56 links,
therefore:

The attention ratio is

56:1

14
Attention ratio
here?

1:1!

15
Let’s do a real world example:
Salesforce

16
This is the home
page . . .

59:1
17
But search in
google for
Salesforce . . .

1:1
18
One last example (non web)

Where do you click here? What about here?

19
20
Concept #2: Conversion Coupling

21
What is Conversion Coupling?

The bond that exists between the source of a click and the
landing experience.

Two types:
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.

22
What is Message Match?

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 and removing confusion.

23
Let’s look at the good and bad

Potential landing headline 1: Potential landing headline 2:

Get More Projects Done With Project Management
Less Management Software Without Deadlines
Very bad Much better

24
Don’t forget about sub-headlines

25
How about some real examples . . .

26
27
28
Let’s look at the ad again . . .

• Why shorten management to mgmt?

• Why have both QuickBase and Intuit?
• Good rule of thumb: message before brand.
– Don’t need brand overload
– How many times is brand mentioned in this ad?
– How many times is their USP? What is their USP?
29
What is Design Match?

One of the easiest techniques to master.

Take the design on your display (banner)
ad and repeat it on your landing page.

30
31
32
33
Concept #3: Conversion
Momentum
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.

34
35
The good and the bad
Email example
"Let me show you how our product/ "Let me show you how our product/
service can help." service can help."
"I'm glad you were interested in "We're the best {what we do} in the
learning more about {words that world. Sign Up Now."
were on the link}."
"One of the important things to
know about {words in the link} is that
it can {establish the benefit}."
"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."

36
37
38
Concept #4: Context of Use

Providing a visual demonstration of how your

product or service will be used by a customer.

Best example: Shamwow commercials

39
Case study of two landing pages

From Unbounce again – landing page mecca

40
41
Most common questions

In a post experience survey, these were the most common

questions:
• How much do the templates cost?
• Where can I download them?
• Can I use them in Wordpress?

Problem: Context of Use missing

42
43
 What was the difference?

43% Conversion Lift in New Account Trial Starts

Additional new trial starts (NTS) per month due to this test – 120
NTS over 12 months – 1,440
Average lifetime value of a customer – $706

Impact on revenue, based on a year of additional

acquired customers:

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

44
45
46
Concept #5: Friction

Friction is the barrier to entry (effort) that your form

presents to your visitors. This primarily pertains to forms.
Friction falls into two categories:
1. Perceived Friction
2. Actual Friction

47
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.

48
Actual Friction

This is the time and trouble it takes to actually fill in the form.
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.
• Dropdown menus that don't include a viable option for the visitor.
E.g. "What industry is your business in?". Without a viable solution or an “other industry” way
out, bring on the frustration.

• Captcha security input fields.

49
Fix friction method 1: Ask the data
for help
Are a high percentage of dropdown results the first option in the list?

Make the answers as short and clearly distinguishable as possible. If people can
easily read the option that applies to them without lots of hunting and scrolling, they
will be more inclined to select it.

Are the responses to open-ended questions real answers or are they nonsense
("asdfasdf") designed to get through the form quickly?

Make the questions more direct and easier to answer. For example . . .

50
 "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."

51
Fix friction method 2: Apply
balance
"The prize" is the incentive you offer up in exchange for personal
data. Your goal is to balance the prize size with the amount of friction.
• There are many incentives to give:
– 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.

52
53
Concept #6: Form design

Rockstar form design 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

54
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
4. A Call-To-Action
5. Trust statements or links
6. A closing urgency or context-
enhancement statement

55
More examples of rockstar forms

56
57
58
Forms are your friend, love forms

59
60
End of Volume 1
What awesome landing page did you design?

61
Next Time?
• Volume 1: Key concepts
– Attention Ratio
– Conversion Coupling
– Conversion Momentum
– Context of Use
– Friction
– Form design

• Volume 2: Writing good copy

– Headlines
– CTA
– Design - Directional Cues
– Design – Contrasting Colors
– Design – White Space

• Volume 3: Interactive Examples 62

Volume 2
Writing good copy

63
The Only Way To Write A Good Headline
Without Taking Four Years Of Rhetoric

64
Headlines: your first task

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

65
 Copywriter Roberta Rosenberg offers
this sage 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.“

Headlines are close cousins to your

USP
66
 Three good headline examples
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!

67
Construction is important

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

68
Example of construction

Statement of uniqueness The Only Luxury Rainforest Retreat

Backed up with a supporting in Costa Rica
statement to establish credibility Dedicated to preserving our wild
jungle paradise
Expand on the experience Indulge Your Senses in Our Hot
And explain how you solve a pain Spring Jungle Spa
point Without the crowds and
distractions of the large tourist
resorts

Close with urgency to encourage Escape to Costa Rica for a Luxury

a call-to-action click Experience in One of the World's
Last Remaining Rainforests

69
70
71
72
73
CTA

74
Second Task: CTA

Calls to action is extremely important. To click or not to click,

that is the question. Here are some important factors of a CTA
structure:
1. Description (being explicit about what I'll get)
2. Actionable phrasing
3. Possessives (choosing 'my' vs. 'your')
4. Subtext (supporting information)
5. Urgency (a reason to act now)

75
 A generic example:
Description: "Get My Free SaaS Project
Management Guide" - Describes what
you'll get by clicking.
Actionable phrasing: "Get" - Describes
that you will receive something.
Possessives: "My" - Personalizes it.
Subtext: "A quick 5 minute read with 10
top tips!" - Lends extra benefit to the
offer as it's easily digestible.
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.
76
A bit more about CTA

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:
A call-to-action that conveys the value of your offering and its
relevance to your prospect will lead to more conversions.

77
78
Secret CTA Killer: Negativity

79
80
"But I wasn't thinking about spam until you
pointed it out! Now I have 'cause to pause’ "

81
 Removing the word "Gimmicks“
resulted in a 25% lift in conversions!

82
Directional Cues

83
Design – Directional Cues
You would be amazed at how visual cues in design can help a
landing page.
• Design is all about attention.
– Your ad captures attention
– Your headline maintains attention
– Your page design focuses attention

Your goal with design is to draw attention to the most important

element(s) on the page.

84
85
86
87
Contrasting Colors

88
Design – Contrasting Colors

Look for the dominant hue of your page, and pick its
complement for your CTA.

89
90
91
White Space

92
Design – White Space

Space things out. And because you can use any color
you like, not just white.

Calling it white space may not work, call them gaps.

93
94
Volume 3: You’re Experts Now!

95
Let’s try some examples.

• Four examples
• You tell me what’s wrong
• We’ll try fixing a few

96
97
98
99
100
101
102
What did we cover today?
• Key concepts
– Attention Ratio
– Conversion Coupling
– Conversion Momentum
– Context of Use
– Friction
– Form design

• Writing good copy

– Headlines
– CTA
– Design - Directional Cues
– Design – Contrasting Colors
– Design – White Space

• Examples 103
You are now ready
to rock your own
landing page.

104
 Appendix
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.

105