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

How to Design Email Landing Pages That Convert

  • Upload
    litmus

  • View
    2.125

  • Download
    0

Embed Size (px)

Citation preview

Page 1: How to Design Email Landing Pages That Convert

How to Design Email Landing Pages That Convert

BROUGHT TO YOU BY

+

Page 2: How to Design Email Landing Pages That Convert
Page 3: How to Design Email Landing Pages That Convert
Page 4: How to Design Email Landing Pages That Convert
Page 5: How to Design Email Landing Pages That Convert

EMAIL MARKETERS ARE DISRESPECTING OUR TIME AND CLICKS

Page 6: How to Design Email Landing Pages That Convert

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?

Page 7: How to Design Email Landing Pages That Convert

how do we fix this?

Page 8: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 9: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

Page 10: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

Page 11: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

Page 12: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

cong

ruen

ce

Page 13: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

cong

ruen

ce

cred

ibili

ty

Page 14: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

cong

ruen

ce

cred

ibili

ty

clos

ing

Page 15: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

cong

ruen

ce

cred

ibili

ty

clos

ing

cont

inua

nce

Page 16: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 17: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 18: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 19: How to Design Email Landing Pages That Convert

#1ATTENTION

USING ATTENTION-DRIVEN DESIGN TO APPLY FOCUS TO YOUR CONVERSION GOAL

Page 20: How to Design Email Landing Pages That Convert
Page 21: How to Design Email Landing Pages That Convert
Page 22: How to Design Email Landing Pages That Convert
Page 23: How to Design Email Landing Pages That Convert
Page 24: How to Design Email Landing Pages That Convert
Page 25: How to Design Email Landing Pages That Convert
Page 26: How to Design Email Landing Pages That Convert
Page 27: How to Design Email Landing Pages That Convert

ATTENTION RATIO

86:1IN THE EMAIL!

Page 28: How to Design Email Landing Pages That Convert
Page 29: How to Design Email Landing Pages That Convert

ATTENTION RATIO

130:1INCLUDING THE EMAIL INTERFACE

Page 30: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 31: How to Design Email Landing Pages That Convert

PROXIMITYDISTRACTION

DISTRACTION

DISTRACTION

DISTRACTION

DISTRACTION

DISTRACTIONANOMALY

AFFORDANCE

ALIGNMENT CoNsIsTeNcYCONTINUATION……

CONTRAST

DIRECTION >>

DOMINANCEENCAPSULATION

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

GROUPINGGROUPINGGROUPINGGROUPING

GROUPINGGROUPINGGROUPINGGROUPING

DISTRACTION

23 PRINCIPLES OF ATTENTION-DRIVEN DESIGN

Page 32: How to Design Email Landing Pages That Convert

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

Page 33: How to Design Email Landing Pages That Convert

a d d

attention driven design

distraction

principle #1

Page 34: How to Design Email Landing Pages That Convert

best 24hr plumbers in Edinburgh

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

Page 35: How to Design Email Landing Pages That Convert
Page 36: How to Design Email Landing Pages That Convert
Page 37: How to Design Email Landing Pages That Convert

HPIP LP

Page 38: How to Design Email Landing Pages That Convert
Page 39: How to Design Email Landing Pages That Convert

What service does this company offer?

30% got it right

Page 40: How to Design Email Landing Pages That Convert
Page 41: How to Design Email Landing Pages That Convert
Page 42: How to Design Email Landing Pages That Convert

What service does this company offer?

40% got it right

Page 43: How to Design Email Landing Pages That Convert
Page 44: How to Design Email Landing Pages That Convert
Page 45: How to Design Email Landing Pages That Convert
Page 46: How to Design Email Landing Pages That Convert

What service does this company offer?

80% got it right

Page 47: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 48: How to Design Email Landing Pages That Convert

the nsamcwadlp principleNever. Start. A. Marketing. Campaign. Without. A. Dedicated. Landing. Page.

#EmailLP

@oligardner

Page 49: How to Design Email Landing Pages That Convert

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 PageCONVERSION

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

Page 50: How to Design Email Landing Pages That Convert

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

Data pulled from Unbounce landing page database - Pages with forms on them - excluding links for terms & conditions and privacy policy

# OF LINKS

7,923 businesses doing “average“ marketing could increase

conversions by 50% by removing 3 links

Page 51: How to Design Email Landing Pages That Convert

distraction is the enemy of conversionAs your landing page Attention Ratio goes down (closer to 1:1) your conversion rates go up.

#EmailLP

@oligardner

Page 52: How to Design Email Landing Pages That Convert

pretty simple, right?

Page 53: How to Design Email Landing Pages That Convert

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 PageCONVERSION

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

Page 54: How to Design Email Landing Pages That Convert

1

13.80%

CONVERSION RATE

Data pulled from Unbounce landing page database - Pages with forms on them - excluding links for terms & conditions and privacy policy

# OF LINKS

Conversion Rate vs. Number of Links on the Page

Page 55: How to Design Email Landing Pages That Convert

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

Page 56: How to Design Email Landing Pages That Convert

#2CONTEXTDESIGNING POST-CLICK EXPERIENCES THAT SPEAK DIRECTLY

TO THE DESIRES, EXPECTATIONS, AND DATA ESTABLISHED PRIOR TO THE CLICK.

Page 57: How to Design Email Landing Pages That Convert

EVERY inbound channel has A different level of context

ADWORDS

FACEBOOK

REMARKETING

LEAD EMAIL

TWITTER

ORGANIC

CUSTOMER EMAIL

Page 58: How to Design Email Landing Pages That Convert
Page 59: How to Design Email Landing Pages That Convert
Page 60: How to Design Email Landing Pages That Convert
Page 61: How to Design Email Landing Pages That Convert
Page 62: How to Design Email Landing Pages That Convert
Page 63: How to Design Email Landing Pages That Convert

the first rule of headlines

have a freaking headline!

Page 64: How to Design Email Landing Pages That Convert
Page 65: How to Design Email Landing Pages That Convert
Page 66: How to Design Email Landing Pages That Convert
Page 67: How to Design Email Landing Pages That Convert
Page 68: How to Design Email Landing Pages That Convert
Page 69: How to Design Email Landing Pages That Convert
Page 70: How to Design Email Landing Pages That Convert
Page 71: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 72: How to Design Email Landing Pages That Convert
Page 73: How to Design Email Landing Pages That Convert
Page 74: How to Design Email Landing Pages That Convert
Page 75: How to Design Email Landing Pages That Convert
Page 76: How to Design Email Landing Pages That Convert
Page 77: How to Design Email Landing Pages That Convert

Excellent Message & Design Match

Page 78: How to Design Email Landing Pages That Convert

But did you see the form?

Page 79: How to Design Email Landing Pages That Convert

But did you see the form?

Page 80: How to Design Email Landing Pages That Convert

Click Me Now

Inline field labels

are bad

because…

__ tabbing sometimes hides context

__ multi-tasking distractions

__ hidden context makes it impossible to double check work before submit

Page 81: How to Design Email Landing Pages That Convert

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

Page 82: How to Design Email Landing Pages That Convert

#3CLARITY

COMMUNICATING YOUR UNIQUE CAMPAIGN PROPOSITION ON A LEVEL WHERE THE QUESTION “WHAT IS THIS PAGE ABOUT?”

DELIVERS

Page 83: How to Design Email Landing Pages That Convert

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

Page 84: How to Design Email Landing Pages That Convert

Definitely not your Everyday Product Demo See How HubSpot Can Help You Grow Traffic, Leads and Sales

Page 85: How to Design Email Landing Pages That Convert

What does your headline and subhead say about what you do?

Find out with a 5-second test

Page 86: How to Design Email Landing Pages That Convert
Page 87: How to Design Email Landing Pages That Convert

What does the product do?

0% got it right

Page 88: How to Design Email Landing Pages That Convert

WAIT…WHAT…NOW?

Page 89: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 90: How to Design Email Landing Pages That Convert

Definitely not your Everyday Product Demo See How We Can Help You Grow Traffic, Leads and Sales

See How We Can Help You Grow Traffic, Leads and Sales Definitely not your Everyday Product Demo

flip the headline and subhead

Page 91: How to Design Email Landing Pages That Convert

What does the product do?

Page 92: How to Design Email Landing Pages That Convert

What does the product do?

Page 93: How to Design Email Landing Pages That Convert

What does the product do?

Page 94: How to Design Email Landing Pages That Convert

What does the product do?

Page 95: How to Design Email Landing Pages That Convert

What does the product do?

60% got it right

Page 96: How to Design Email Landing Pages That Convert

CONVERSION RATE

TIME0%

60%CONVERSION LIFT

OF INFINITY

Page 97: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 98: How to Design Email Landing Pages That Convert

FLIP YOUR HEADLINESReverse the order of your headline and subhead to uncover extra clarity in your value proposition.

#EmailLP

@oligardner

Page 99: How to Design Email Landing Pages That Convert

#4CONGRUENCE

ALIGNING EVERY ELEMENT ON YOUR LANDING PAGE WITH – AND ONLY WITH – YOUR CAMPAIGN GOAL

Page 100: How to Design Email Landing Pages That Convert
Page 101: How to Design Email Landing Pages That Convert

Page Element Content Score

HeadlineSubheadHero shot

Intro

Bullets

Bullets

Form headerTestimonialForm fields

WhyPrivacy statement

Call-to-Action

TOTAL 0/24

Page 102: How to Design Email Landing Pages That Convert

Page Element Content Score

Headline Ocean of data instantly become security intelligenceSubhead Whitepaper download: the next generation firewall is hereHero shot Photo of a man holding some paper which is obscured

IntroWatchguard 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 fieldsTestimonial It’s about the product not the value in the whitepaperForm fields Country, province/state, phone number

Why About the product, not the form goal which is whitepaperPrivacy statement sell, nasty, spam

Call-to-Action Get my offer

TOTAL 0/24

Page 103: How to Design Email Landing Pages That Convert

campaign goal download a white paper

Page 104: How to Design Email Landing Pages That Convert

Page Element Content Score

Headline Ocean of data instantly become security intelligenceSubhead Whitepaper download: the next generation firewall is hereHero shot Photo of a man holding some paper which is obscured

IntroWatchguard 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 fieldsTestimonial It’s about the product not the value in the whitepaperForm fields Country, province/state, phone number

Why About the product, not the form goal which is whitepaperPrivacy statement sell, nasty, spam

Call-to-Action Get my offer

TOTAL 0/24

Page 105: How to Design Email Landing Pages That Convert

Page Element Content Score

Headline Ocean of data instantly become security intelligence 0Subhead Whitepaper download: the next generation firewall is here 1Hero shot Photo of a man holding some paper which is obscured 1

IntroWatchguard 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 1Testimonial It’s about the product not the value in the whitepaper 0Form fields Country, province/state, phone number 0

Why About the product, not the form goal which is whitepaper 0Privacy statement sell, nasty, spam 0

Call-to-Action Get my offer 0

TOTAL 3/24

Page 106: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 107: How to Design Email Landing Pages That Convert
Page 108: How to Design Email Landing Pages That Convert
Page 109: How to Design Email Landing Pages That Convert

-14% people starting the course

Page 110: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

Page 111: How to Design Email Landing Pages That Convert
Page 112: How to Design Email Landing Pages That Convert

Congruence = proximity + relevance

Page 113: How to Design Email Landing Pages That Convert

Congruence = proximity + relevance

Page 114: How to Design Email Landing Pages That Convert

#5CREDIBILITY

DEMONSTRATING AUTHENTIC AND VERIFIABLE TRUST SIGNALS

Page 115: How to Design Email Landing Pages That Convert
Page 116: How to Design Email Landing Pages That Convert
Page 117: How to Design Email Landing Pages That Convert
Page 118: How to Design Email Landing Pages That Convert

Nobody is holding a camera.

They are all women. Is it for me?

Where is the evidence of their success?

Page 119: How to Design Email Landing Pages That Convert

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

Page 120: How to Design Email Landing Pages That Convert

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

Page 121: How to Design Email Landing Pages That Convert

trust seal lost by -12%

Page 122: How to Design Email Landing Pages That Convert

a d d

proximity

attention driven design principle #4

Page 123: How to Design Email Landing Pages That Convert
Page 124: How to Design Email Landing Pages That Convert

Credibility = proximity + believability

Page 125: How to Design Email Landing Pages That Convert

my face lost by -14% .

Page 126: How to Design Email Landing Pages That Convert

people don’t believe in free anymore

Page 127: How to Design Email Landing Pages That Convert

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

Page 128: How to Design Email Landing Pages That Convert
Page 129: How to Design Email Landing Pages That Convert

vsGet Started Get Started for Free

33.39% 31.81%-4%

Page 130: How to Design Email Landing Pages That Convert

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

Page 131: How to Design Email Landing Pages That Convert

the 7 principles of conversion-centered designDELIGHT

friction

atte

ntio

n

cont

ext

clar

ity

cong

ruen

ce

cred

ibili

ty

? ?

Page 132: How to Design Email Landing Pages That Convert
Page 133: How to Design Email Landing Pages That Convert
Page 134: How to Design Email Landing Pages That Convert
Page 135: How to Design Email Landing Pages That Convert
Page 136: How to Design Email Landing Pages That Convert
Page 137: How to Design Email Landing Pages That Convert
Page 138: How to Design Email Landing Pages That Convert
Page 139: How to Design Email Landing Pages That Convert
Page 140: How to Design Email Landing Pages That Convert
Page 141: How to Design Email Landing Pages That Convert
Page 142: How to Design Email Landing Pages That Convert
Page 143: How to Design Email Landing Pages That Convert
Page 144: How to Design Email Landing Pages That Convert
Page 145: How to Design Email Landing Pages That Convert

Scott Stratten - “QR Codes Kill Kittens”

Page 146: How to Design Email Landing Pages That Convert

…?

Page 147: How to Design Email Landing Pages That Convert

the first rule of calls to action

have a freaking call to action!

Page 148: How to Design Email Landing Pages That Convert

#6CLOSING

CALL TO ACTION DESIGN AND COPY

Page 149: How to Design Email Landing Pages That Convert

a d d

affordance

attention driven design principle #2

Page 150: How to Design Email Landing Pages That Convert

Source: Gary Larson

Page 151: How to Design Email Landing Pages That Convert

Button Button Button

Button Link

button button-esque rectangle

grrr ghost buttons just a word

Page 152: How to Design Email Landing Pages That Convert
Page 153: How to Design Email Landing Pages That Convert
Page 154: How to Design Email Landing Pages That Convert

+600% clicking non-buttons

Page 155: How to Design Email Landing Pages That Convert

vsMy Your

12.76% 8.85%-45%

data from analyzing call to action copy from 20,000 unbounce customer landing pages

Page 156: How to Design Email Landing Pages That Convert

vsClick no mention of click

15.51% 10.51%-48%

data from analyzing call to action copy from 20,000 unbounce customer landing pages

Page 157: How to Design Email Landing Pages That Convert

vsClick Click here

15.51% 17.49%+12.8%

data from analyzing call to action copy from 20,000 unbounce customer landing pages

Page 158: How to Design Email Landing Pages That Convert

vsDownload Download Now

12.01% 13.06%+8.7%

data from analyzing call to action copy from 20,000 unbounce customer landing pages

Page 159: How to Design Email Landing Pages That Convert

vsGet Started Get Started Now

7.78% 9.35%+20.2%

data from analyzing call to action copy from 20,000 unbounce customer landing pages

Page 160: How to Design Email Landing Pages That Convert
Page 161: How to Design Email Landing Pages That Convert

GAS

Page 162: How to Design Email Landing Pages That Convert

G.A.S.

Page 163: How to Design Email Landing Pages That Convert

G.A.S.giving. A. sh*t.

Page 164: How to Design Email Landing Pages That Convert
Page 165: How to Design Email Landing Pages That Convert
Page 166: How to Design Email Landing Pages That Convert
Page 167: How to Design Email Landing Pages That Convert
Page 168: How to Design Email Landing Pages That Convert
Page 169: How to Design Email Landing Pages That Convert
Page 170: How to Design Email Landing Pages That Convert
Page 171: How to Design Email Landing Pages That Convert

@oligardner

#EmailLP

design for idealDon’t design to acquire any old customers. Design to acquire your ideal customers.

Page 172: How to Design Email Landing Pages That Convert
Page 173: How to Design Email Landing Pages That Convert

Email AddressSTART THE COURSE NOW

41%

65% +59%

+15%Your Best Email AddressSTART THE COURSE NOW

Work Email AddressSTART THE COURSE NOW

Business Email AddressSTART THE COURSE NOW

47%

50% +22%

Page 174: How to Design Email Landing Pages That Convert

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 FieldsCONVERSION

RATE

Data pulled from Unbounce landing page database

# OF FORM FIELDS

Page 175: How to Design Email Landing Pages That Convert

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

Page 176: How to Design Email Landing Pages That Convert

#7CONTINUANCE

AMPLIFYING CONVERSION OPPORTUNITIES USING POST-CONVERSION MARKETING & MOMENTUM LOOPS

Page 177: How to Design Email Landing Pages That Convert
Page 178: How to Design Email Landing Pages That Convert
Page 179: How to Design Email Landing Pages That Convert
Page 180: How to Design Email Landing Pages That Convert
Page 181: How to Design Email Landing Pages That Convert
Page 182: How to Design Email Landing Pages That Convert

12% conversion rate

Page 183: How to Design Email Landing Pages That Convert

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.

Page 184: How to Design Email Landing Pages That Convert
Page 185: How to Design Email Landing Pages That Convert
Page 186: How to Design Email Landing Pages That Convert

Preview your emails…and landing pages with Litmus

Try Litmus free for 14 days!

Visit: litmus.com/coupon/LANDINGPAGES

Page 187: How to Design Email Landing Pages That Convert

Build, publish & A/B test landing pages without I.T.The mobile responsive landing page builder for professional marketers

unbounce.com/litmus-webinarGet 50% off Unbounce for 3 months

After your 30-day free trial

Page 188: How to Design Email Landing Pages That Convert

Thank you! Questions? Submit questions via the Q&A panel

@oligardner - @meladorri

+