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

Content, education, community at Litmus Previously at ExactTarget Midwest born and bred I email IM JUSTINE. HELLO! @meladorri @litmusapp

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

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

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 worksand customers prefer it. EMAIL 101

Its all about permission Not implied Not purchased Expires after a certain period of time ! Respect the users inbox EMAIL SPAM EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

Physical mailing address A way to unsubscribe Dont 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

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

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 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 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 WS

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

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

MOBILE EMAIL: +400% since 2011

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE Does your iPhone fold? Mine doesnt

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

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

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

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

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 DONT FORGET THE TEXT VERSION

REVIEW: WHY ARE THESE ON THE BAD EXAMPLES SLIDE?

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

HTML for email is not HTML for the web Code like its 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 dont apply; support for HTML and CSS is wonky Use inline CSS(Gmail strips out the

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

THE MOBILE FACTOR EMAIL STRATEGY / DESIGN / 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

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

80.3% 30.2% 13.5% 3.8% 6.3% If you get an email on your phone that doesnt 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%

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

BIGGER IS BETTER EMAIL STRATEGY / DESIGN / USER EXPERIENCE 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; EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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 email mobile version web site Kill mobile versions

Large text EMAIL STRATEGY / DESIGN / 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

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

Rendering is inconsistent across devices and operating systems

WHICH TEST WON? EMAIL STRATEGY / DESIGN / USER EXPERIENCE Email is the ideal environment for fast, easy, and cheap testing. ! BUTwhat works for one email wont always work for another.

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

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 WEVE RUN AT LITMUS

Version A: Green button Version B: Blue button

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

Version A: Start testing Version B: Read our overview

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

Subject line A: Dont forward this ! Subject line B: The best way to share emails SUBJECT LINES

Subject line A: Dont forward this ! Subject line B: The best way to share emails SUBJECT LINES 54% MORE CLICKS

Separate sections vs All links together DIGEST EMAIL

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

MEASURING SUCCESS EMAIL STRATEGY / DESIGN / USER EXPERIENCE

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

EMAIL STRATEGY / DESIGN / USER EXPERIENCE

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

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

EMAIL STRATEGY / DESIGN / USER EXPERIENCE Who What When Where Why How FIVE WS 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

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