How to Design Email Landing Pages That Convert

How to Design Email
Landing Pages That Convert
BROUGHT TO YOU BY
+

EMAIL MARKETERS ARE
DISRESPECTING
OUR TIME AND CLICKS

averageit’s not good enough yet it’s an epidemic in most online advertising. that’s why I’m here at
#emaillp to share how to take your marketing campaigns from average to exceptional.
businesses acquire customers. brands acquire fans followers partners & peers. conversion is
not enough. we need to add the elixir of delight to every conversion experience. to convert and
delight we need genuine love for our customers. delight is now the default, not the exception.
the simple truth is that most landing pages do not deliver on the promise made prior to the
click. they disrespect our visitors time and clicks and are an abuse of advertising. when was
the last time you invited someone to a wine party and served only beer? if you have 30 products
and your ads for one of them send me to the whole collection, why do I have to then re-search
through your site despite having clicked on an ad that promised exactly what I’d searched for?

the 7 principles of conversion-centered designDELIGHT
friction

friction
attention

friction
attention
context

friction
attention
context
clarity

friction
attention
context
clarity
congruence

friction
attention
context
clarity
congruence
credibility

friction
attention
context
clarity
congruence
credibility
closing

friction
attention
context
clarity
congruence
credibility
closing
continuance

#1
ATTENTIONUSING ATTENTION-DRIVEN DESIGN TO APPLY
FOCUS TO YOUR CONVERSION GOAL

ATTENTION RATIO
86:1IN THE EMAIL!

ATTENTION RATIO
130:1INCLUDING THE EMAIL INTERFACE

PROXIMITY
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
ANOMALY
AFFORDANCE
ALIGNMENT CoNsIsTeNcY
CONTINUATION……
CONTRAST
DIRECTION >>
DOMINANCE
ENCAPSULATION
HIGHLIGHTING
INTERRUPTION
MOTION
NESTING
NESTING
NESTING
NESTING
NESTING
NESTING
PERSPECTIVE
REPETITION
REPETITION
REPETITION
SIZE
CONTACT
W H I T E S P A C E
OVERLAPPING
SYMMETRY SYMMETRY
GROUPINGGROUPING
GROUPINGGROUPING
GROUPINGGROUPING
GROUPINGGROUPING
DISTRACTION
23 PRINCIPLES OF
ATTENTION-DRIVEN DESIGN

understanding A.D.D. principles
makes design more fun
and more effective
because it creates a
common design vocabulary

a
d
d
attention
driven
design
distraction
principle #1

best 24hr plumbers in Edinburgh
Plumber Edinburgh

www.patrickmunroedinburgh.co.uk/
0131 610 0113
From Repairs To Installations, Call
Us For A Competitive Quote Today.

What service does this company offer?
30% got it right

40% got it right

80% got it right

the nsamcwadlp principle
Never. Start. A. Marketing.
Campaign. Without. A.
Dedicated. Landing. Page.
#EmailLP
@oligardner

1
13.80%
2
11.74%
3
10.32%
4
8.63%
5
9.17%
6
8.70%
7
7.62%
8
9.58%
9
6.86%
10
5.86%
Conversion Rate vs. Number of Links on the Page
CONVERSION
RATE
Data pulled from Unbounce landing page database - Pages with forms on them - excluding links for terms & conditions and privacy policy
# OF
LINKS
average # of links is 4.39

1
13.80%
2
11.74%
3
10.32%
4
8.63%
5
9.17%
6
8.70%
7
7.62%
8
9.58%
9
6.86%
10
5.86%
CONVERSION
RATE
# OF
LINKS
7,923 businesses doing “average“
marketing could increase
conversions by 50%
by removing 3 links

distraction is the
enemy of conversion
As your landing page Attention Ratio
goes down (closer to 1:1) your
conversion rates go up.
#EmailLP
@oligardner

1
13.80%
CONVERSION
RATE
# OF
LINKS
Conversion Rate vs. Number of Links on the Page

Download the
A.D.D. ebook now
bitly.com/add-ebook

#2
CONTEXTDESIGNING POST-CLICK EXPERIENCES THAT SPEAK DIRECTLY
TO THE DESIRES, EXPECTATIONS, AND DATA ESTABLISHED
PRIOR TO THE CLICK.

EVERY inbound channel has A different level of context
ADWORDS
FACEBOOK
REMARKETING
LEADEMAIL
TWITTER
ORGANIC
CUSTOMEREMAIL

the first rule of headlines
have a freaking
headline!

Excellent Message & Design Match

Click Me Now
Inline ﬁeld labels
are bad
because…
__ tabbing sometimes hides context
__ multi-tasking distractions
__ hidden context makes it impossible
to double check work before submit

http://mds.is/float-label-pattern/

#3
CLARITYCOMMUNICATING YOUR UNIQUE CAMPAIGN PROPOSITION ON A
LEVEL WHERE THE QUESTION “WHAT IS THIS PAGE ABOUT?”
DELIVERS

THE secret to the
clarity of your value
proposition lies in the
INFORMATION HIERARCHY
of your page headlines

Deﬁnitely not your Everyday Product Demo
See How HubSpot Can Help You Grow Trafﬁc, Leads and Sales

What does your headline and
subhead say about what you do?
Find out with a 5-second test

What does the product do?
0% got it right

See How We Can Help You Grow Traffic, Leads and Sales
See How We Can Help You Grow Traffic, Leads and Sales
flip the headline
and subhead

What does the product do?
60% got it right

CONVERSION
RATE
TIME0%
60%
CONVERSION LIFT
OF INFINITY

FLIP YOUR HEADLINES
Reverse the order of your headline
and subhead to uncover extra
clarity in your value proposition.
#EmailLP
@oligardner

#4
CONGRUENCEALIGNING EVERY ELEMENT ON YOUR LANDING PAGE
WITH – AND ONLY WITH – YOUR CAMPAIGN GOAL

Page Element Content Score
Headline
Subhead
Hero shot
Intro
Bullets
Bullets
Form header
Testimonial
Form ﬁelds
Why
Privacy statement
Call-to-Action
TOTAL 0/24

Headline Ocean of data instantly become security intelligence
Subhead Whitepaper download: the next generation firewall is here
Hero shot Photo of a man holding some paper which is obscured
Intro
Watchguard XTM is the next generation firewall of choice for businesses
and enterprises alike providing best in class network security at affordable
prices.
Bullets Blazing fast throughput
Bullets Advanced networking features
Form header Download your whitepaper! Complete the required fields
Testimonial It’s about the product not the value in the whitepaper
Form fields Country, province/state, phone number
Why About the product, not the form goal which is whitepaper
Privacy statement sell, nasty, spam
Call-to-Action Get my offer
TOTAL 0/24

campaign goal
download a white paper

Headline Ocean of data instantly become security intelligence 0
Subhead Whitepaper download: the next generation firewall is here 1
Hero shot Photo of a man holding some paper which is obscured 1
Intro
Watchguard XTM is the next generation firewall of choice for businesses
and enterprises alike providing best in class network security at affordable
prices.
0
Bullets Blazing fast throughput 0
Bullets Advanced networking features 0
Form header Download your whitepaper! Complete the required fields 1
Testimonial It’s about the product not the value in the whitepaper 0
Form fields Country, province/state, phone number 0
Why About the product, not the form goal which is whitepaper 0
Privacy statement sell, nasty, spam 0
Call-to-Action Get my offer 0
TOTAL 3/24

-14% people starting the course

Congruence = proximity + relevance

#5
CREDIBILITY
DEMONSTRATING
AUTHENTIC AND VERIFIABLE TRUST SIGNALS

Nobody is holding a camera.
They are all women. Is it for me?
Where is the evidence of their success?

THE success of your
social proof lies in
your ability to demonstrate
the transformative effect
of the user journey created
by your product or service

Testimonial from https://rwd.aiux.co/

a
d
d
proximity
attention
driven
design
principle #4

Credibility = proximity + believability

people don’t believe
in free anymore

vsFree no mention of free
9.24% 10.79%
+16.8%
data from analyzing
call to action copy
from 20,000 unbounce
customer landing pages

vsGet Started Get Started for Free
33.39% 31.81%
-4%

Download the
free ebook now
bitly.com/add-ebook

friction
attention
context
clarity
congruence
credibility
? ?

Scott Stratten - “QR Codes Kill Kittens”

the first rule of
calls to action
have a freaking
call to action!

#6
CLOSINGCALL TO ACTION DESIGN AND COPY

a
d
d
affordance
attention
driven
design
principle #2

Button Button Button
Button Link
button button-esque rectangle
grrr ghost buttons just a word

vsMy Your
12.76% 8.85%
-45%
data from analyzing
call to action copy

vsClick no mention of click
15.51% 10.51%
-48%
data from analyzing
call to action copy

vsClick Click here
15.51% 17.49%
+12.8%
data from analyzing
call to action copy

vsDownload Download Now
12.01% 13.06%
+8.7%
data from analyzing
call to action copy

vsGet Started Get Started Now
7.78% 9.35%
+20.2%
data from analyzing
call to action copy

@oligardner
#EmailLP
design for ideal
Don’t design to acquire any old
customers. Design to acquire your
ideal customers.

Email Address
START THE COURSE NOW
41%
65% +59%
+15%Your Best Email Address
Work Email Address
Business Email Address
47%
50% +22%

1
17%
2
15.11%
3
11.61%
4
7.18%
5
7.82%
6
7.61%
7
7.58%
8
9.87%
9
10.75%
10
14.69%
Conversion Rate vs. Number of Form Fields
CONVERSION
RATE
Data pulled from Unbounce landing page database
# OF
FORM
FIELDS

1
17%
2
15.11%
3
11.61%
4
7.18%
5
7.82%
6
7.61%
7
7.58%
8
9.87%
9
10.75%
10
14.69%
CONVERSION
RATE
Data pulled from Unbounce landing page database
# OF
FORM
FIELDS
if you’re going to have 4 form
fields, you should test the
business impact of having 7

#7
CONTINUANCEAMPLIFYING CONVERSION OPPORTUNITIES USING POST-CONVERSION
MARKETING & MOMENTUM LOOPS

delightfulto acquire, fans, followers, partners, & peers, think beyond the conversion. designing for ideal
is the baseline of delight. disappoint one to delight one thousand. bury yourself in feedback to
rebel against your own creations. design in reaction to the forceful rejection of your mistakes.
to understand our customer’s pains, we must be willingly hurt by their feedback. humility is
being humbled by the stumbling of our family’s actions. delight is the default, not the exception.
delight is your one and only campaign goal. your ads are a promise built on the integrity of
your brand. commit to your promises. ”clicks are people” (wil reynolds). each click deserves
the respect of your time, your budget, and the belief that with each click you are creating
value. the burden of responsibility lies with us, not our customers. chase delight in your
intentions, copy, and design. excellence isn’t accidental it’s a purposeful and personal act.

Preview your emails…and
landing pages with Litmus
Try Litmus free for 14 days!
Visit: litmus.com/coupon/LANDINGPAGES

Build, publish & A/B test landing pages without I.T.
The mobile responsive landing page builder for professional marketers
unbounce.com/litmus-webinar
Get 50% off Unbounce for 3 months
After your 30-day free trial

Thank you!
Questions?
Submit questions via the Q&A panel
@oligardner - @meladorri
+

How to Design Email Landing Pages That Convert

More Related Content

What's hot

Viewers also liked

Similar to How to Design Email Landing Pages That Convert

More from Litmus

Recently uploaded

How to Design Email Landing Pages That Convert