Email Design and UX

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 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 ≠ SPAM
‣ It’s all about permission
‣ Not implied
‣ Not purchased
‣ Expires after a certain period of time
!
Respect the user’s inbox
Emails are not

weapons of
mass destruction.
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
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.”
EVERY EMAIL SHOULD HAVE A
PURPOSE.
EMAIL IS:
A unique medium
with unique
considerations
EMAIL IS NOT:
A JPG
A print ad
A banner ad
A one-page web site
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?
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
NO PLAN? NO PURPOSE?
NO EMAIL.
‘WHERE’ HAS BECOME A COMPLICATED QUESTION.

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
TYPES OF EMAIL
YOU SHOULD SEND
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
LINE
‣ What is recognizable, trustworthy and relevant?

‣ Does the subscriber have a relationship with  
a person or the brand?
LINE
LINE
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
LINE
LINE
LINE
BE CREATIVE, USEFUL, HELPFUL, FUNNY OR ENGAGING

‣ Support your subject line
‣ Call to action
‣ Reminder
‣ Special message
‣ Make it measurable
LINE
✘
✔
✘
✔
✔
LINE
FROM NAME
~25 characters
25% of the inbox
!
!SUBJECT LINE
~35 characters
25% of the inbox
!
!PREHEADER
~85 characters
50% of the inbox
LINE
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
LINE
LINE
“Does your iPhone fold?

…Mine doesn’t…”
LINE
“Scrolling is easier than clicking.”

LINE
CREATE A GREAT CTA

‣ Minimize friction
‣ Be clear and concise
‣ Test buttons vs. text
‣ Use active language
‣ Consider size, placement,  
color, and context
LINE
LINE
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:
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)
OUTLOOK, GMAIL, IPHONE…

‣ Many different email apps and
programs
‣ Varying support for HTML/CSS
‣ Screen sizes
‣ Individual preferences
‣ PREVIEW / TEST!
THE MOBILE
FACTOR
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

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

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
The finger is the new mouse

BIGGER IS BETTER
‣ Body copy: 16px+
‣ Headlines: 22px+
‣ Buttons: 44px by 44px
‣ Space: 10px+
‣ Tappable touch targets
iOS will resize fonts under 13px

-webkit-text-size-adjust: none;
iOS tries to help…

‣ Make phone calls
‣ Track packages
‣ Find addresses
‣ Create events
Bright screen = dead battery

Kill ‘mobile versions’
email mobile version web site

Large text
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 is an application
and occasionally a mobile browser
Rendering is inconsistent
across devices and operating systems
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.
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
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
MEASURING
SUCCESS
BEYOND THE OBVIOUS

‣ Twitter mentions
‣ Unsolicited comments
‣ Endorsements
‣ Web visits
‣ Blog comments
‣ Anecdotal evidence @litmusapp mentions
GREAT
RESOURCES
!
!
Q&A
PLAN YOUR
NEXT GREAT EMAIL
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
‣ justine@litmus.com
Body Level One
‣ litmus.com
Body Level Two
‣ @meladorri
Body Level Three
‣ @litmusapp
Body Level Four
‣! Body Level Five

Email Design and UX

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Email Design and UX

Uploaded by

Copyright:

Available Formats

EMAIL STRATEGY,

DESIGN AND USER

GETTING TO KNOW YOU…

HAVE YOU HEARD?

It works—and customers prefer it.

Emails are not

CAN-SPAM, CASL AND OTHER ACRONYMS

You got this email because…

EVERY EMAIL SHOULD HAVE A

ASK THE FIVE W’S

WHO WHEN WHY

WHAT WHERE HOW

‘WHERE’ HAS BECOME A COMPLICATED QUESTION.

Mobile Desktop Webmail

MORE EMAIL OPPORTUNITIES

‣ What is recognizable, trustworthy and relevant?

THE PERFECT SUBJECT LINE?

BE CREATIVE, USEFUL, HELPFUL, FUNNY OR ENGAGING

ENGAGE THE USER

“Does your iPhone fold?

“Scrolling is easier than clicking.”

CREATE A GREAT CTA

DON’T FORGET THE TEXT VERSION

OUTLOOK, GMAIL, IPHONE…

Mobile Desktop Webmail

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

Delete it +15% 80.3%

Unsubscribe +68% 30.2%

View on computer 13.5%

Don't know 3.8%

Read anyway 6.3%

The finger is the new mouse

iOS will resize fonts under 13px

iOS tries to help…

Bright screen = dead battery

Kill ‘mobile versions’

email mobile version web site

WHAT YOU NEED TO KNOW ABOUT RESPONSIVE EMAIL

WHICH TEST WON?

CREATE A HYPOTHESIS SO YOUR TEST IS REPEATABLE.

SOME TESTS WE’VE RUN AT LITMUS… Subject lines

Version A: Green button Version B: Blue button

Version A: Start testing Version B: Read our overview

BEYOND THE OBVIOUS

Sketch a wireframe of your email and identify key components.

FIVE W’S BRIEF PLAN TEST

You might also like