EMAIL STRATEGY,

DESIGN AND USER

EXPERIENCE
Justine Jordan, Litmus
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
HELLO!

I’M JUSTINE.
‣ Content, education, community at Litmus
‣ Previously at ExactTarget
‣ Midwest born and bred
‣ I ♥ email

@meladorri @litmusapp
HELLO!

GETTING TO KNOW YOU…

‣ 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?
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

HAVE YOU HEARD?

EMAIL IS DEAD.
OR NOT.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

EMAIL 101
‣ 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 STRATEGY / DESIGN / USER EXPERIENCE

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

Emails are not

weapons of
mass destruction.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

CAN-SPAM, CASL AND OTHER ACRONYMS

‣ 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
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

You got this email because…

“… 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

EVERY EMAIL SHOULD HAVE A

PURPOSE.
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

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

ASK THE FIVE W’S

‣ 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?
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

WHO WHEN WHY

‣ Internal vs. external ‣ Triggered vs. mass ‣ Brand awareness
‣ B2B vs. B2C ‣ Drip or automation ‣ Content marketing
‣ Demographics ‣ Behavioral-based ‣ Influence behavior
‣ Know your audience! ‣ Day and time ‣ Drive purchases

WHAT WHERE HOW

‣ Register for a webinar ‣ Mobile / tablet ‣ Opens
‣ Read an article ‣ Web browser / webmail ‣ Clicks
‣ Buy something ‣ Desktop / at work ‣ Conversions
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

‘WHERE’ HAS BECOME A COMPLICATED QUESTION.

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

MOBILE
‣ Smartphones (iPhone, Android) 

25% and tablets
!DESKTOP
48% ‣ Installed email programs 

(Outlook, Apple Mail)
!
27% WEBMAIL
‣ Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)

Mobile Desktop Webmail

MOBILE EMAIL:
+400% since 2011
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

MORE EMAIL OPPORTUNITIES

‣ Lead nurturing
‣ Drip campaigns
‣ Product updates/announcements
‣ Actions (and inactions)
‣ Brand awareness
‣ Events and webinars
‣ Follow-ups
 SUBSCRIBER EXPERIENCE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
 FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

‣ What is recognizable, trustworthy and relevant?

‣ Does the subscriber have a relationship with 

a person or the brand?
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

+ open rates
SYMBOLS IN SUBJECT LINES – gimmick
~ value
 FROM NAME SUBJECT PREHEADER
LINE

THE PERFECT SUBJECT LINE?

1. ‘Free’ is okay!
2. Shorter = better?
3. Relevance
4. Specific
5. Useful
6. Test!

Source: https://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
 FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

BE CREATIVE, USEFUL, HELPFUL, FUNNY OR ENGAGING

‣ Support your subject line
‣ Call to action
‣ Reminder
‣ Special message
‣ Make it measurable
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

✘
✔
✘
✔

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

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

ENGAGE THE USER

‣ 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
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

“Does your iPhone fold?

…Mine doesn’t…”
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE

“Scrolling is easier than clicking.”

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

CREATE A GREAT CTA

‣ Minimize friction
‣ Be clear and concise
‣ Test buttons vs. text
‣ Use active language
‣ Consider size, placement, 

color, and context
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
FROM NAME SUBJECT PREHEADER OPEN TAP/CLICK PAGE/SITE
LINE
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

DON’T FORGET THE TEXT VERSION

‣ Create hierarchy with symbols
‣ Avoid hard breaks
‣ Put links on a new line
‣ Tabs, spacing and CAPs to organize
‣ Convey imagery with text
REVIEW: WHY ARE THESE ON THE ‘BAD EXAMPLES’ SLIDE?
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

EMAIL:
UNDER THE HOOD
‣ 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
‣ 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)
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

OUTLOOK, GMAIL, IPHONE…

‣ Many different email apps and
programs
‣ Varying support for HTML/CSS
‣ Screen sizes
‣ Individual preferences
‣ PREVIEW / TEST!
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

THE MOBILE
FACTOR
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

MOBILE
‣ Smartphones (iPhone, Android) 

25% and tablets
!DESKTOP
48% ‣ Installed email programs 

(Outlook, Apple Mail)
!
27% WEBMAIL
‣ Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)

Mobile Desktop Webmail

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

70%+ open on mobile >15% open on mobile

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

If you get an email on your phone that doesn’t look good, what do you do?

Delete it +15% 80.3%

Unsubscribe +68% 30.2%

View on computer 13.5%

Don't know 3.8%

Read anyway 6.3%

0 25 50 75 100

Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

The finger is the new mouse

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

iOS will resize fonts under 13px

-webkit-text-size-adjust: none;
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

iOS tries to help…

‣ Make phone calls
‣ Track packages
‣ Find addresses
‣ Create events
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Bright screen = dead battery

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Kill ‘mobile versions’

email mobile version web site

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Large text
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

WHAT YOU NEED TO KNOW ABOUT RESPONSIVE EMAIL

‣ 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
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Email is an application
and occasionally a mobile browser
 Rendering is inconsistent
across devices and operating systems
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

WHICH TEST WON?

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

CREATE A HYPOTHESIS SO YOUR TEST IS REPEATABLE.

‣ Time of day ‣ Preheader
‣ Day of week ‣ Navigation
‣ Subject lines ‣ Content layout
‣ Creative look/feel ‣ Length of content
‣ Imagery ‣ Personalization
‣ Call to action ‣ Segmentation
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

SOME TESTS WE’VE RUN AT LITMUS… 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
Version A: Green button Version B: Blue button
 NO
CHANGE

Version A: Green button Version B: Blue button

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

Version A: Start testing Version B: Read our overview

SUBJECT LINES

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

Subject line A:
Don’t forward this…
54%
! MORE CLICKS
Subject line B:
The best way to share emails
DIGEST EMAIL
Separate sections
vs
All links together
 30%
DIGEST EMAIL
MORE CLICKS
Separate sections
vs
All links together
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

MEASURING
SUCCESS
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
EMAIL STRATEGY / DESIGN / USER EXPERIENCE
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

BEYOND THE OBVIOUS

‣ Twitter mentions
‣ Unsolicited comments
‣ Endorsements
‣ Web visits
‣ Blog comments
‣ Anecdotal evidence @litmusapp mentions
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

Q&A
EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

Sketch a wireframe of your email and identify key components.

FIVE W’S BRIEF PLAN TEST

‣ Who ‣ Audience ‣ Subject line ‣ Elements
‣ What ‣ Objective ‣ From name ‣ Your hypothesis
‣ When ‣ Goal ‣ From address ‣ Success criteria
‣ Where ‣ Preheader text
‣ Why ‣ Headline
‣ How ‣ Subhead
‣ Copy
‣ Call to action
‣ Graphics / images
THANKS!

JUSTINE JORDAN
‣ [email protected]
Body Level One
‣ litmus.com
Body Level Two
‣ @meladorri
Body Level Three
‣ @litmusapp
Body Level Four
‣! Body Level Five
litmus.com/lp/generalassembly