email strategy, design and user experience

85
EMAIL STRATEGY, DESIGN AND USER EXPERIENCE Justine Jordan, Litmus

Upload: litmus

Post on 11-Aug-2014

456 views

Category:

Business


5 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Email Strategy, Design and User Experience

EMAIL STRATEGY, DESIGN AND USER EXPERIENCEJustine Jordan, Litmus

Page 2: Email Strategy, Design and User Experience

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

Page 3: Email Strategy, Design and User Experience

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

I’M JUSTINE.HELLO!

@meladorri @litmusapp

Page 4: Email Strategy, Design and User Experience

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…

Page 5: Email Strategy, Design and User Experience

HAVE YOU HEARD? EMAIL IS DEAD.

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

OR NOT.

Page 6: Email Strategy, Design and User Experience

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

Page 7: Email Strategy, Design and User Experience

‣ 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

Page 8: Email Strategy, Design and User Experience

Emails are not weapons of mass destruction.

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 9: Email Strategy, Design and User Experience

‣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

Page 10: Email Strategy, Design and User Experience

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

Page 11: Email Strategy, Design and User Experience

EVERY EMAIL SHOULD HAVE A

PURPOSE.EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 12: Email Strategy, Design and User Experience

EMAIL IS: A unique medium with unique considerations

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 13: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

EMAIL IS NOT: A JPG A print ad A banner ad A one-page web site

Page 14: Email Strategy, Design and User Experience

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

Page 15: Email Strategy, Design and User Experience

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

Page 16: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

NO PLAN? NO PURPOSE?

NO EMAIL.

Page 17: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

‘WHERE’ HAS BECOME A COMPLICATED QUESTION.

Page 18: Email Strategy, Design and User Experience

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

Page 19: Email Strategy, Design and User Experience

MOBILE EMAIL: +400% since 2011

Page 20: Email Strategy, Design and User Experience

TYPES OF EMAIL YOU SHOULD SEND

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 21: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 22: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 23: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 24: Email Strategy, Design and User Experience
Page 25: Email Strategy, Design and User Experience
Page 26: Email Strategy, Design and User Experience

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

Page 27: Email Strategy, Design and User Experience

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

SUBSCRIBER EXPERIENCE

Page 28: Email Strategy, Design and User Experience

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?

Page 29: Email Strategy, Design and User Experience

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

Page 30: Email Strategy, Design and User Experience

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

Page 31: Email Strategy, Design and User Experience

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

+ open rates – gimmick ~ value

SYMBOLS IN SUBJECT LINES

Page 32: Email Strategy, Design and User Experience

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

Page 33: Email Strategy, Design and User Experience

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

Page 34: Email Strategy, Design and User Experience

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

Page 35: Email Strategy, Design and User Experience

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

Page 36: Email Strategy, Design and User Experience

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

Page 37: Email Strategy, Design and User Experience

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

Page 38: Email Strategy, Design and User Experience

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

Page 39: Email Strategy, Design and User Experience

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

Page 40: Email Strategy, Design and User Experience

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

Page 41: Email Strategy, Design and User Experience

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

“Does your iPhone fold? …Mine doesn’t…”

Page 42: Email Strategy, Design and User Experience

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

“Scrolling is easier than clicking.”

Page 43: Email Strategy, Design and User Experience

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

Page 44: Email Strategy, Design and User Experience

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

Page 45: Email Strategy, Design and User Experience

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

Page 46: Email Strategy, Design and User Experience

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

Page 47: Email Strategy, Design and User Experience

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

Page 48: Email Strategy, Design and User Experience

EMAIL: UNDER THE HOOD

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 49: Email Strategy, Design and User Experience

‣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

Page 50: Email Strategy, Design and User Experience

‣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)

Page 51: Email Strategy, Design and User Experience

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…

Page 52: Email Strategy, Design and User Experience

THE MOBILE FACTOR

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 53: Email Strategy, Design and User Experience

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

Page 54: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

Page 55: Email Strategy, Design and User Experience

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%

Page 56: Email Strategy, Design and User Experience

The finger is the new mouse

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 57: Email Strategy, Design and User Experience

BIGGER IS BETTER

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

‣Body copy: 16px+ ‣Headlines: 22px+ ‣Buttons: 44px by 44px ‣Space: 10px+ ‣Tappable touch targets

Page 58: Email Strategy, Design and User Experience

iOS will resize fonts under 13px -webkit-text-size-adjust: none;

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 59: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

iOS tries to help…

‣Make phone calls

‣Track packages

‣Find addresses

‣Create events

Page 60: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Bright screen = dead battery

Page 61: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

email mobile version web site

Kill ‘mobile versions’

Page 62: Email Strategy, Design and User Experience

Large text

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 63: Email Strategy, Design and User Experience

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

Page 64: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Email is an application and occasionally a mobile browser

Page 65: Email Strategy, Design and User Experience

Rendering is inconsistent across devices and operating systems

Page 66: Email Strategy, Design and User Experience

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.

Page 67: Email Strategy, Design and User Experience

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

Page 68: Email Strategy, Design and User Experience

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…

Page 69: Email Strategy, Design and User Experience

Version A: Green button Version B: Blue button

Page 70: Email Strategy, Design and User Experience

Version A: Green button Version B: Blue button

NO CHANGE

Page 71: Email Strategy, Design and User Experience

Version A: Start testing Version B: Read our overview

Page 72: Email Strategy, Design and User Experience

Version A: Start testing Version B: Read our overview

2X CLICKS

Page 73: Email Strategy, Design and User Experience

Subject line A:

Don’t forward this…

!Subject line B:

The best way to share emails

SUBJECT LINES

Page 74: Email Strategy, Design and User Experience

Subject line A:

Don’t forward this…

!Subject line B:

The best way to share emails

SUBJECT LINES

54% MORE CLICKS

Page 75: Email Strategy, Design and User Experience

Separate sections

vs

All links together

DIGEST EMAIL

Page 76: Email Strategy, Design and User Experience

Separate sections

vs

All links together

DIGEST EMAIL30% MORE CLICKS

Page 77: Email Strategy, Design and User Experience

MEASURING SUCCESS

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 78: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 79: Email Strategy, Design and User Experience

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 80: Email Strategy, Design and User Experience

‣Twitter mentions ‣Unsolicited comments ‣Endorsements ‣Web visits ‣Blog comments ‣Anecdotal evidence

BEYOND THE OBVIOUS

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

@litmusapp mentions

Page 81: Email Strategy, Design and User Experience

GREAT RESOURCES !!litmus.com/lp/generalassembly

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 82: Email Strategy, Design and User Experience

Q&AEMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 83: Email Strategy, Design and User Experience

PLAN YOUR NEXT GREAT EMAIL

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

Page 84: Email Strategy, Design and User Experience

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

Page 85: Email Strategy, Design and User Experience

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

[email protected] ‣ litmus.com ‣@meladorri ‣@litmusapp !litmus.com/lp/generalassembly