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, requiring its own unique set of content, marketing, and design considerations. In this session, you’ll learn how using performance-driven email design can drive email strategy, best practices and principles for getting users to take action, and simple strategies and A/B tests to maximize conversions.

1. EMAIL STRATEGY,
DESIGN AND USER
EXPERIENCE
Justine Jordan, Litmus

2. AGENDA
‣ Introductions
‣ Laying a great foundation
‣ The subscriber experience
‣ Increasing performance through A/B tests
‣ Email review / group exercise
!
YES! You can download the slides:
litmus.com/lp/generalassembly

3. ‣ Content, education, community at Litmus
‣ Previously at ExactTarget
‣ Midwest born and bred
‣ I ♥ email
I’M JUSTINE.
HELLO!
@meladorri @litmusapp

4. HELLO!
‣ Your name
‣ Where you work / your company
‣ What you do there
‣ What email-related challenges are you facing?
‣ What are you hoping to learn tonight?
GETTING TO KNOW YOU…

5. HAVE YOU HEARD?
EMAIL IS DEAD.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
OR NOT.

6. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Effective — yields more ROI than any other channel
‣ Inexpensive — sending one email < $0.01
‣ Immediate — no complicated set-up
‣ Measurable — opens, clicks, conversions roll in right away
‣ Easy — software makes it so!
!
It works—and customers prefer it.
EMAIL 101

7. ‣ It’s all about permission
‣ Not implied
‣ Not purchased
‣ Expires after a certain period of time
!
Respect the user’s inbox
EMAIL ≠ SPAM
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

8. Emails are not
weapons of
mass destruction.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

9. ‣ Physical mailing address
‣ A way to unsubscribe
‣ Don’t make the user jump through hoops
‣ Process request within 10 days
‣ Opt-in / permission required in some countries
‣ Prior business relationship usually OK
!
Know the law in the countries you send to
CAN-SPAM, CASL AND OTHER ACRONYMS
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

10. “… you recently created a Litmus account.”
“… you recently downloaded our templates.”
“… you recently ran a test.”
“… you signed up for our newsletter.”
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
You got this email because…

11. EVERY EMAIL SHOULD HAVE A
PURPOSE.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

12. EMAIL IS:
A unique medium
with unique
considerations
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

13. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
EMAIL IS NOT:
A JPG
A print ad
A banner ad
A one-page web site

14. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ WHO are you sending to?
‣ WHAT do you want them to do?
‣ WHEN is it appropriate to send the message?
‣ WHERE will the recipient read it?
‣ WHY are you sending this message?
‣ HOW are you going to measure success?
ASK THE FIVE W’S

15. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Internal vs. external
‣ B2B vs. B2C
‣ Demographics
‣ Know your audience!
WHO
‣ Register for a webinar
‣ Read an article
‣ Buy something
WHAT
‣ Triggered vs. mass
‣ Drip or automation
‣ Behavioral-based
‣ Day and time
WHEN
‣ Mobile / tablet
‣ Web browser / webmail
‣ Desktop / at work
WHERE
‣ Brand awareness
‣ Content marketing
‣ Influence behavior
‣ Drive purchases
WHY
‣ Opens
‣ Clicks
‣ Conversions
HOW

16. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
NO PLAN? NO PURPOSE?
NO EMAIL.

17. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‘WHERE’ HAS BECOME A COMPLICATED QUESTION.

18. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
25%
27%
48%
Mobile Desktop Webmail
‣ Smartphones (iPhone, Android)
and tablets
!
‣ Installed email programs
(Outlook, Apple Mail)
!
‣ Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
MOBILE
DESKTOP
WEBMAIL

19. MOBILE EMAIL:
+400% since 2011

20. TYPES OF EMAIL
YOU SHOULD SEND
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

21. EMAIL STRATEGY / DESIGN / USER EXPERIENCE

22. EMAIL STRATEGY / DESIGN / USER EXPERIENCE

23. EMAIL STRATEGY / DESIGN / USER EXPERIENCE

26. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Lead nurturing
‣ Drip campaigns
‣ Product updates/announcements
‣ Actions (and inactions)
‣ Brand awareness
‣ Events and webinars
‣ Follow-ups
MORE EMAIL OPPORTUNITIES

27. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
SUBSCRIBER EXPERIENCE

28. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
‣ What is recognizable, trustworthy and relevant?
‣ Does the subscriber have a relationship with
a person or the brand?

29. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

30. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

31. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
+ open rates
– gimmick
~ value
SYMBOLS IN SUBJECT LINES

32. Source: https://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic
THE PERFECT SUBJECT LINE?
1. ‘Free’ is okay!
2. Shorter = better?
3. Relevance
4. Specific
5. Useful
6. Test!
FROM NAME SUBJECT
LINE
PREHEADER

33. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

34. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

35. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
‣ Support your subject line
‣ Call to action
‣ Reminder
‣ Special message
‣ Make it measurable
BE CREATIVE, USEFUL, HELPFUL, FUNNY OR ENGAGING

36. ✔
✔
✔
✘
✘
FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

37. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
~25 characters
25% of the inbox
!
!
~35 characters
25% of the inbox
!
!
~85 characters
50% of the inbox
FROM NAME
SUBJECT LINE
PREHEADER

38. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

39. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
‣ Prioritize and prune
‣ Use color, weight & size for emphasis
‣ Bullets are your friends
‣ Use rational & emotional appeals
‣ Link images and text
‣ Use a variety of media (charts, buttons,
graphics, images, videos) for visual
interest and to communicate
ENGAGE THE USER

40. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

41. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
“Does your iPhone fold?
…Mine doesn’t…”

42. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
“Scrolling is easier than clicking.”

43. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
‣ Minimize friction
‣ Be clear and concise
‣ Test buttons vs. text
‣ Use active language
‣ Consider size, placement,
color, and context
CREATE A GREAT CTA

44. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

45. FROM NAME SUBJECT
LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE

46. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Create hierarchy with symbols
‣ Avoid hard breaks
‣ Put links on a new line
‣ Tabs, spacing and CAPs to organize
‣ Convey imagery with text
DON’T FORGET THE TEXT VERSION

47. REVIEW: WHY ARE THESE ON THE ‘BAD EXAMPLES’ SLIDE?

48. EMAIL:
UNDER THE HOOD
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

49. ‣ HTML for email is not HTML for the web
‣ Code like it’s 1999; use HTML tables for layout
‣ Think in modules: images and text should be in their own table cell
‣ Avoid CSS for positioning or layout
‣ Rely on progressive enhancement / graceful degradation

50. ‣ No JavaScript, Flash, forms…
‣ Web standards don’t apply; support for HTML and CSS is wonky
‣ Use inline CSS(Gmail strips out the <style> block)
‣ Background images are not supported in Outlook 2007+
‣ Web-based email clients behave differently based on the browser (IE vs Firefox)

51. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Many different email apps and
programs
‣ Varying support for HTML/CSS
‣ Screen sizes
‣ Individual preferences
‣ PREVIEW / TEST!
OUTLOOK, GMAIL, IPHONE…

52. THE MOBILE
FACTOR
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

53. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
25%
27%
48%
Mobile Desktop Webmail
‣ Smartphones (iPhone, Android)
and tablets
!
‣ Installed email programs
(Outlook, Apple Mail)
!
‣ Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
MOBILE
DESKTOP
WEBMAIL

54. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
70%+ open on mobile >15% open on mobile

55. 80.3%
30.2%
13.5%
3.8%
6.3%
If you get an email on your phone that doesn’t look good, what do you do?
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
0 25 50 75 100
+68%
+15%

56. The finger is the new mouse
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

57. BIGGER IS BETTER
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Body copy: 16px+
‣ Headlines: 22px+
‣ Buttons: 44px by 44px
‣ Space: 10px+
‣ Tappable touch targets

58. iOS will resize fonts under 13px
-webkit-text-size-adjust: none;
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

59. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
iOS tries to help…
‣ Make phone calls
‣ Track packages
‣ Find addresses
‣ Create events

60. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
Bright screen = dead battery

61. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
email mobile version web site
Kill ‘mobile versions’

62. Large text
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

63. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ More than a “line of code”
‣ Set of conditional statement that enables specific styles
‣ If the screen size is x, then display y
‣ If the screen size is x, then increase headline size to y
‣ If screen size is x, then show image at 100%
‣ Detects screen size, not device type
‣ Not supported in every mobile email app
WHAT YOU NEED TO KNOW ABOUT RESPONSIVE EMAIL

64. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
Email is an application
and occasionally a mobile browser

65. Rendering is inconsistent
across devices and operating systems

66. WHICH TEST WON?
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
Email is the ideal environment for fast, easy, and cheap testing.
!
BUT—what works for one email won’t always work for another.

67. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Time of day
‣ Day of week
‣ Subject lines
‣ Creative look/feel
‣ Imagery
‣ Call to action
CREATE A HYPOTHESIS SO YOUR TEST IS REPEATABLE.
‣ Preheader
‣ Navigation
‣ Content layout
‣ Length of content
‣ Personalization
‣ Segmentation

68. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
Subject lines
‣ Specific vs vague
‣ Buzzy vs straightforward
!
Call to action
‣ Product vs content
‣ Click opportunities
!
Video thumbnails
‣ Person vs product
!
Button color
‣ Green vs blue
SOME TESTS WE’VE RUN AT LITMUS…

69. Version A: Green button Version B: Blue button

70. Version A: Green button Version B: Blue button
NO
CHANGE

71. Version A: Start testing Version B: Read our overview

72. Version A: Start testing Version B: Read our overview
2X
CLICKS

73. Subject line A:
Don’t forward this…
!
Subject line B:
The best way to share emails
SUBJECT LINES

74. Subject line A:
Don’t forward this…
!
Subject line B:
The best way to share emails
SUBJECT LINES
54%
MORE CLICKS

75. Separate sections
vs
All links together
DIGEST EMAIL

76. Separate sections
vs
All links together
DIGEST EMAIL
30%
MORE CLICKS

77. MEASURING
SUCCESS
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

78. EMAIL STRATEGY / DESIGN / USER EXPERIENCE

79. EMAIL STRATEGY / DESIGN / USER EXPERIENCE

80. ‣ Twitter mentions
‣ Unsolicited comments
‣ Endorsements
‣ Web visits
‣ Blog comments
‣ Anecdotal evidence
BEYOND THE OBVIOUS
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
@litmusapp mentions

81. GREAT
RESOURCES
!
!
litmus.com/lp/generalassembly
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

82. Q&A
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

83. PLAN YOUR
NEXT GREAT EMAIL
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

84. EMAIL STRATEGY / DESIGN / USER EXPERIENCE
‣ Who
‣ What
‣ When
‣ Where
‣ Why
‣ How
FIVE W’S
‣ Audience
‣ Objective
‣ Goal
BRIEF
‣ Subject line
‣ From name
‣ From address
‣ Preheader text
‣ Headline
‣ Subhead
‣ Copy
‣ Call to action
‣ Graphics / images
PLAN
Sketch a wireframe of your email and identify key components.
‣ Elements
‣ Your hypothesis
‣ Success criteria
TEST

85. THANKS!
‣ Body Level One
‣ Body Level Two
‣ Body Level Three
‣ Body Level Four
‣ Body Level Five
JUSTINE JORDAN
‣ Body Level One
‣ Body Level Two
‣ Body Level Three
‣ Body Level Four
‣ Body Level Five
‣ justine@litmus.com
‣ litmus.com
‣ @meladorri
‣ @litmusapp
!
litmus.com/lp/generalassembly