presents
Email Strategy, Design and
User Experience:
Keys to Success
Justine Jordan
@meladorri
Email Strategy,
Design +
Agenda
— Introductions
— Email info!
— Stats
— Best practices
— The mobile factor
— Email reviews/group exercise
Who am I?
Justine Jordan
Marketing Director
@meladorri @litmusapp
Who are you?
Where do you work?
What email challenges do
you face?
Email 101
Why Email?
— Effective
— Inexpensive
— Immediate
— Measurable
— (Relatively) easy
Email’s not
dead…
Marketers just like
shiny objects
Email is big
— 91% of consumers use email at least once daily
— 66% of consumers have made a purchase as a result of
an ...
It’s the preferred channel
$2
for every $1 spent
Banner Ads
Source: MediaPost.com
$17
for every $1 spent
Keyword Ads
Source: MediaPost.com
$40
for every $1 spent
Email Marketing
Source: MediaPost.com
Email gets more clicks…
… and conversions
You get the point.
Email 101
Email ≠ Spam
— It’s all about permission
— Not implied
— Not purchased
— Expires after a certain period of t...
Email 101
Metrics
— Open Rate
— Click-Through Rate (CTR)
— Conversion Rate
— Web Analytics
Goals
— Brand Awareness
—...
Email is not:
A JPG
A print ad
A banner ad
Email is:
A unique medium
with unique
considerations
The email experience
????
Page/Site
Tap/Click
Preview/Open
Preheader
Subject	
  Line
From	
  Name
First impressions matter
Sender
First impressions matter
Sender Subject line
First impressions matter
Sender Subject line
• What is recognizable, trustworthy and relevant?
First impressions matter
Sender Subject line
• What is recognizable, trustworthy and relevant?
• Does the subscriber have a relationship with a per...
First impressions matter
First impressions matter
First impressions matter
First impressions matter
First impressions matter
First impressions matter
First impressions matter
First impressions matter
First impressions matter
Preheader = tertiary inbox
Preheader = tertiary inbox
Preview pane & image blocking
Preview pane & image blocking
Preview pane & image blocking
Mobile is affected, too
Click opportunities
— Linked imagery
— Video
— Buttons
— Charts
— Colored backgrounds
— Preheader text
— Forward & ...
Keep it simple, stupid.
— What’s the call to action?
— Use buttons, context, active language
What is the
message?
What should
I do?
What should
I do?
What should
I do?
A POSITIVE EXPERIENCE?
A POSITIVE EXPERIENCE?
A POSITIVE EXPERIENCE?
A POSITIVE EXPERIENCE?
Where’s the download?
A POSITIVE EXPERIENCE?
Where’s the download?
Add to cart?
Designing for Performance
Every email should have a purpose.
— Why are you sending this email?
ü Drive leads
ü Increase...
Email hierarchy
— Content hierarchy
— Prioritize important information
— Prune extraneous and irrelevant content
— Vis...
Designing for Performance
— Email is the ideal environment for fast, easy and cheap testing
— What works for one campaig...
DESIGN “A”
DESIGN “B”
DESIGN “C”
DESIGN “A” DESIGN “B”
DESIGN “C”
PIER 1 RESULTS
MEASURES: 	 CTR of Delivered Emails
	 Unsubscribe Rate
	 Sales Generated by Subscribers
WINNER:	 Generated ...
DESIGN “A”
DESIGN “A”
DESIGN “B”
DESIGN “C”
DESIGN “C”
DESIGN “C”
DESIGN “A”
DESIGN “B”
DESIGN “C”
AAA OHIO RESULTS
MEASURES: 	 CTR of Delivered Emails
	 Projected Renewal Revenue
WINNER:	 Outperformed Control CTR by 26%
...
WINNER: DESIGN “C”
Testing can be simple
2x clicks!
HTML coding/rendering
— HTML for email is not HTML for the web
— Code like it’s 1999!
— Use HTML tables for layout
— S...
— No JavaScript
— No Flash
— No HTML5 or CSS3
— No External/Linked CSS
— Use inline CSS instead of embedded (Gmail do...
Rendering
— TEST TEST TEST
— Only comprehensive testing will
ensure that your email appears
the way you want it to in yo...
The
Mobile
Factor
0%
18%
35%
53%
70%
Q1 2011
Q2 2011
Q3 2011
Q4 2011
Q1 2012
Q2 2012
Q3 2012
Q4 2012
Q1 2013
Opens in Each Environment
Webma...
0%
18%
35%
53%
70%
Q1 2011
Q2 2011
Q3 2011
Q4 2011
Q1 2012
Q2 2012
Q3 2012
Q4 2012
Q1 2013
Opens in Each Environment
Webma...
0%
18%
35%
53%
70%
Q1 2011
Q2 2011
Q3 2011
Q4 2011
Q1 2012
Q2 2012
Q3 2012
Q4 2012
Q1 2013
Opens in Each Environment
Webma...
0%
18%
35%
53%
70%
Q1 2011
Q2 2011
Q3 2011
Q4 2011
Q1 2012
Q2 2012
Q3 2012
Q4 2012
Q1 2013
Opens in Each Environment
Webma...
The finger is the new mouse
44 x 44px minimum
Taps, not clicks
Bigger is better…
— Body copy < 13px will be resized
— Recommended minimums
— Body copy: 14px
— Headlines: 22px
— CSS...
No-go navigation
No-go navigation
No-go navigation
No-go navigation
No-go navigation
Text Buttons
Create touch targets
Text Buttons
Create touch targets
Text Buttons
Create touch targets
Text Buttons Image “Buttons”
Create touch targets
Text Buttons Image “Buttons”
Create touch targets
Text Buttons Image “Buttons”
Create touch targets
— Single column layout; simplified
content
— Content comes first
— Reduce clutter
— Navigation
— Repeated links
— Low ...
Don’t create friction
Don’t create friction
Don’t create friction
Responsive email design
Responsive email design
Responsive email design
Responsive email design
Questions?I (may) have answers
Email
Review
Time
Thanks!
Justine Jordan
Marketing Director
@meladorri @litmusapp
Course Title
Course Title
INSTRUCTOR NAME
Email Strategy, Design and User Experience: Keys to Success
Email Strategy, Design and User Experience: Keys to Success
Email Strategy, Design and User Experience: Keys to Success
Email Strategy, Design and User Experience: Keys to Success
Email Strategy, Design and User Experience: Keys to Success
Email Strategy, Design and User Experience: Keys to Success
Upcoming SlideShare
Loading in …5
×

Email Strategy, Design and User Experience: Keys to Success

3,195 views

Published on

Email has a bad rap: it’s been declared dead, called spam, and been sidelined by marketers and creatives alike. But email is one of the highest performing digital marketing channels, and requires its own unique set of content, marketing and design considerations. Let’s give email a big hug and learn to love this castaway of the web.

In this presentation you'll learn:
1. How using “performance-driven email design” can drive email strategy that delivers results

2.Best practices and principles for creating great emails that get users to take action

3.Fundamentals of creating mobile-friendly emails

Published in: Technology, Business

Email Strategy, Design and User Experience: Keys to Success

  1. 1. presents Email Strategy, Design and User Experience: Keys to Success Justine Jordan @meladorri
  2. 2. Email Strategy, Design +
  3. 3. Agenda — Introductions — Email info! — Stats — Best practices — The mobile factor — Email reviews/group exercise
  4. 4. Who am I? Justine Jordan Marketing Director @meladorri @litmusapp
  5. 5. Who are you? Where do you work? What email challenges do you face?
  6. 6. Email 101 Why Email? — Effective — Inexpensive — Immediate — Measurable — (Relatively) easy
  7. 7. Email’s not dead… Marketers just like shiny objects
  8. 8. Email is big — 91% of consumers use email at least once daily — 66% of consumers have made a purchase as a result of an email that they’ve received — The average mobile internet user spends 42% of their time on email — 61% of smartphone users send/receive email daily — Email marketing spending will reach $2.5 BILLION by 2016 Sources: ExactTarget 2012 Channel Preference survey; Forrester US Interactive Marketing Forecast; Nielsen; Pew Research Center
  9. 9. It’s the preferred channel
  10. 10. $2 for every $1 spent Banner Ads Source: MediaPost.com
  11. 11. $17 for every $1 spent Keyword Ads Source: MediaPost.com
  12. 12. $40 for every $1 spent Email Marketing Source: MediaPost.com
  13. 13. Email gets more clicks…
  14. 14. … and conversions
  15. 15. You get the point.
  16. 16. Email 101 Email ≠ Spam — It’s all about permission — Not implied — Not purchased — Expires after a certain period of time CAN-SPAM — Physical Mailing Address — Unsubscribe Mechanism — Can’t require an account login — Process Unsub Request within 10 days
  17. 17. Email 101 Metrics — Open Rate — Click-Through Rate (CTR) — Conversion Rate — Web Analytics Goals — Brand Awareness — Customer Experience — Increase Revenue / Sales — Relationship Building
  18. 18. Email is not: A JPG A print ad A banner ad
  19. 19. Email is: A unique medium with unique considerations
  20. 20. The email experience ???? Page/Site Tap/Click Preview/Open Preheader Subject  Line From  Name
  21. 21. First impressions matter
  22. 22. Sender First impressions matter
  23. 23. Sender Subject line First impressions matter
  24. 24. Sender Subject line • What is recognizable, trustworthy and relevant? First impressions matter
  25. 25. Sender Subject line • What is recognizable, trustworthy and relevant? • Does the subscriber have a relationship with a person, or the brand? First impressions matter
  26. 26. First impressions matter
  27. 27. First impressions matter
  28. 28. First impressions matter
  29. 29. First impressions matter
  30. 30. First impressions matter
  31. 31. First impressions matter
  32. 32. First impressions matter
  33. 33. First impressions matter
  34. 34. First impressions matter
  35. 35. Preheader = tertiary inbox
  36. 36. Preheader = tertiary inbox
  37. 37. Preview pane & image blocking
  38. 38. Preview pane & image blocking
  39. 39. Preview pane & image blocking
  40. 40. Mobile is affected, too
  41. 41. Click opportunities — Linked imagery — Video — Buttons — Charts — Colored backgrounds — Preheader text — Forward & share
  42. 42. Keep it simple, stupid. — What’s the call to action? — Use buttons, context, active language
  43. 43. What is the message?
  44. 44. What should I do?
  45. 45. What should I do?
  46. 46. What should I do?
  47. 47. A POSITIVE EXPERIENCE?
  48. 48. A POSITIVE EXPERIENCE?
  49. 49. A POSITIVE EXPERIENCE?
  50. 50. A POSITIVE EXPERIENCE? Where’s the download?
  51. 51. A POSITIVE EXPERIENCE? Where’s the download? Add to cart?
  52. 52. Designing for Performance Every email should have a purpose. — Why are you sending this email? ü Drive leads ü Increase brand awareness ü Is it relevant? — Who are you sending to, and what do you know about them? ü Internal vs. external; B2B vs. B2C; demographics — What do you want subscribers to do once they receive your email? ü Register for a webinar ü Read an article — How are you going to measure success? ü Open/click data ü Number of leads generated ü What do you want the subscriber to do? — Is email the best way to communicate your message?
  53. 53. Email hierarchy — Content hierarchy — Prioritize important information — Prune extraneous and irrelevant content — Visual hierarchy — Use color, weight, size and placement to provide emphasis — Bullets are your friends — Use a mix of rational and emotional appeals — Utilize background colors, bullets, numbers, borders effectively — Use strong and clear calls-to-actions — Buttons tend to perform better that text links)
  54. 54. Designing for Performance — Email is the ideal environment for fast, easy and cheap testing — What works for one campaign / company doesn’t necessarily work for another — Things to test — Time of day — Day of week — Subject Lines — Creative look and feel — Imagery — Pre-Header — Navigation — Content Layout
  55. 55. DESIGN “A”
  56. 56. DESIGN “B”
  57. 57. DESIGN “C”
  58. 58. DESIGN “A” DESIGN “B” DESIGN “C”
  59. 59. PIER 1 RESULTS MEASURES: CTR of Delivered Emails Unsubscribe Rate Sales Generated by Subscribers WINNER: Generated 86% More Clicks Than Other Competitors Generated 25% More Sales Than Nearest Competitor
  60. 60. DESIGN “A”
  61. 61. DESIGN “A”
  62. 62. DESIGN “B”
  63. 63. DESIGN “C”
  64. 64. DESIGN “C”
  65. 65. DESIGN “C”
  66. 66. DESIGN “A” DESIGN “B” DESIGN “C”
  67. 67. AAA OHIO RESULTS MEASURES: CTR of Delivered Emails Projected Renewal Revenue WINNER: Outperformed Control CTR by 26% Outperformed Projected Revenue of 2nd Place by 4%
  68. 68. WINNER: DESIGN “C”
  69. 69. Testing can be simple 2x clicks!
  70. 70. HTML coding/rendering — HTML for email is not HTML for the web — Code like it’s 1999! — Use HTML tables for layout — Specify widths for table elements — Images should be in their own table cell — Avoid CSS for positioning or layout — Proper syntax is key — Use ALT text
  71. 71. — No JavaScript — No Flash — No HTML5 or CSS3 — No External/Linked CSS — Use inline CSS instead of embedded (Gmail doesn’t support embedded CSS) — HTML forms (not supported everywhere) — Background Images (not supported in Outlook 07) — Web-based email clients behave differently based on the browser (IE vs Firefox) HTML coding/rendering
  72. 72. Rendering — TEST TEST TEST — Only comprehensive testing will ensure that your email appears the way you want it to in your subscriber’s inbox. — Subscribers view emails in many different environments: desktop email clients, web- based email clients, mobile devices.
  73. 73. The Mobile Factor
  74. 74. 0% 18% 35% 53% 70% Q1 2011 Q2 2011 Q3 2011 Q4 2011 Q1 2012 Q2 2012 Q3 2012 Q4 2012 Q1 2013 Opens in Each Environment Webmail Desktop Mobile Mobile open rates are high
  75. 75. 0% 18% 35% 53% 70% Q1 2011 Q2 2011 Q3 2011 Q4 2011 Q1 2012 Q2 2012 Q3 2012 Q4 2012 Q1 2013 Opens in Each Environment Webmail Desktop Mobile 10% Mobile open rates are high
  76. 76. 0% 18% 35% 53% 70% Q1 2011 Q2 2011 Q3 2011 Q4 2011 Q1 2012 Q2 2012 Q3 2012 Q4 2012 Q1 2013 Opens in Each Environment Webmail Desktop Mobile 33% 10% Mobile open rates are high
  77. 77. 0% 18% 35% 53% 70% Q1 2011 Q2 2011 Q3 2011 Q4 2011 Q1 2012 Q2 2012 Q3 2012 Q4 2012 Q1 2013 Opens in Each Environment Webmail Desktop Mobile 44% 33% 10% Mobile open rates are high
  78. 78. The finger is the new mouse 44 x 44px minimum Taps, not clicks
  79. 79. Bigger is better… — Body copy < 13px will be resized — Recommended minimums — Body copy: 14px — Headlines: 22px — CSS fix: “-webkit-text-size-adjust: none;” Beware minimum font sizes; automatic resizing
  80. 80. No-go navigation
  81. 81. No-go navigation
  82. 82. No-go navigation
  83. 83. No-go navigation
  84. 84. No-go navigation
  85. 85. Text Buttons Create touch targets
  86. 86. Text Buttons Create touch targets
  87. 87. Text Buttons Create touch targets
  88. 88. Text Buttons Image “Buttons” Create touch targets
  89. 89. Text Buttons Image “Buttons” Create touch targets
  90. 90. Text Buttons Image “Buttons” Create touch targets
  91. 91. — Single column layout; simplified content — Content comes first — Reduce clutter — Navigation — Repeated links — Low priority content/imagery — Clear and direct copy/CTAs — Get skinny: 320-550px wide — Short, direct copy — Eliminate or hide low priority content — Clear and direct calls to action STREAMLINE
  92. 92. Don’t create friction
  93. 93. Don’t create friction
  94. 94. Don’t create friction
  95. 95. Responsive email design
  96. 96. Responsive email design
  97. 97. Responsive email design
  98. 98. Responsive email design
  99. 99. Questions?I (may) have answers
  100. 100. Email Review Time
  101. 101. Thanks! Justine Jordan Marketing Director @meladorri @litmusapp
  102. 102. Course Title Course Title INSTRUCTOR NAME

×