email strategy, design and user experience: keys to success

presents

Email Strategy, Design and User Experience: Keys to SuccessJustine Jordan@meladorri

Email Strategy, Design +

Agenda� Introductions

� Email info!� Stats � Best practices� The mobile factor

� Email reviews/group exercise

Who am I?

Justine JordanMarketing Director

@meladorri @litmusapp

Who are you?Where do you work?

What email challenges do you face?

Email 101Why Email?

� Effective� Inexpensive� Immediate� Measurable� (Relatively) easy

Email’s not dead…Marketers just like shiny objects

Email is big� 91% of consumers use email at least once daily

� 66% of consumers have made a purchase as a result of an email that they’ve received

� The average mobile internet user spends 42% of their time on email

� 61% of smartphone users send/receive email daily

� Email marketing spending will reach $2.5 BILLION by 2016

Sources: ExactTarget 2012 Channel Preference survey; Forrester US Interactive Marketing Forecast; Nielsen; Pew Research Center

It’s the preferred channel

$2for every $1 spent

Banner Ads

Source: MediaPost.com

$17for every $1 spent

Keyword Ads

Source: MediaPost.com

$40for every $1 spent

Email Marketing

Source: MediaPost.com

Email gets more clicks…

… and conversions

You get the point.

Email 101Email ≠ Spam

� It’s all about permission� Not implied� Not purchased� Expires after a certain period of time

CAN-SPAM� Physical Mailing Address� Unsubscribe Mechanism

� Can’t require an account login� Process Unsub Request within 10 days

Email 101Metrics

� Open Rate� Click-Through Rate (CTR)� Conversion Rate� Web Analytics

Goals� Brand Awareness� Customer Experience� Increase Revenue / Sales� Relationship Building

Email is not:A JPG A print adA banner ad

Email is:A unique mediumwith unique considerations

The email experience

????

Page/Site

Tap/Click

Preview/Open

Preheader

Subject  Line

From  Name

First impressions matter

Sender

First impressions matter

Sender Subject line

First impressions matter

Sender Subject line

• What is recognizable, trustworthy and relevant?

First impressions matter

Sender Subject line

• What is recognizable, trustworthy and relevant? • Does the subscriber have a relationship with a person, or

the brand?

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

First impressions matter

Preheader = tertiary inbox

Preheader = tertiary inbox

Preview pane & image blocking

Preview pane & image blocking

Preview pane & image blocking

Mobile is affected, too

Click opportunities� Linked imagery

� Video

� Buttons

� Charts

� Colored backgrounds

� Preheader text

� Forward & share

Keep it simple, stupid.

� What’s the call to action?

� Use buttons, context, active language

What is the message?

What should I do?

What should I do?

What should I do?

A POSITIVE EXPERIENCE?

A POSITIVE EXPERIENCE?

A POSITIVE EXPERIENCE?

A POSITIVE EXPERIENCE?

Where’s the download?

A POSITIVE EXPERIENCE?

Where’s the download?

Add to cart?

Designing for PerformanceEvery email should have a purpose.

� Why are you sending this email?ü Drive leadsü Increase brand awarenessü Is it relevant?

� Who are you sending to, and what do you know about them?ü Internal vs. external; B2B vs. B2C; demographics

� What do you want subscribers to do once they receive your email?ü Register for a webinarü Read an article

� How are you going to measure success?ü Open/click dataü Number of leads generated

ü What do you want the subscriber to do?� Is email the best way to communicate your message?

Email hierarchy� Content hierarchy

� Prioritize important information� Prune extraneous and irrelevant content

� Visual hierarchy� Use color, weight, size and placement to

provide emphasis� Bullets are your friends� Use a mix of rational and emotional appeals� Utilize background colors, bullets, numbers,

borders effectively� Use strong and clear calls-to-actions � Buttons tend to perform better that text links)

Designing for Performance� Email is the ideal environment for fast, easy and cheap testing

� What works for one campaign / company doesn’t necessarily work for another

� Things to test

� Time of day� Day of week� Subject Lines� Creative look and feel� Imagery

� Pre-Header� Navigation� Content Layout

DESIGN “A”

DESIGN “B”

DESIGN “C”

DESIGN “A” DESIGN “B”

DESIGN “C”

PIER 1 RESULTSMEASURES: CTR of Delivered Emails

Unsubscribe Rate

Sales Generated by Subscribers

WINNER: Generated 86% More Clicks Than Other Competitors

Generated 25% More Sales Than Nearest Competitor

DESIGN “A”

DESIGN “A”

DESIGN “B”

DESIGN “C”

DESIGN “C”

DESIGN “C”

DESIGN “A”

DESIGN “B”

DESIGN “C”

AAA OHIO RESULTSMEASURES: CTR of Delivered Emails

Projected Renewal Revenue

WINNER: Outperformed Control CTR by 26%

Outperformed Projected Revenue of 2nd Place by 4%

WINNER: DESIGN “C”

Testing can be simple

2x clicks!

HTML coding/rendering� HTML for email is not HTML for the web� Code like it’s 1999!� Use HTML tables for layout� Specify widths for table elements� Images should be in their own table cell� Avoid CSS for positioning or layout� Proper syntax is key� Use ALT text

� No JavaScript� No Flash� No HTML5 or CSS3� No External/Linked CSS� Use inline CSS instead of embedded (Gmail doesn’t support

embedded CSS)� HTML forms (not supported everywhere)� Background Images (not supported in Outlook 07)� Web-based email clients behave differently based on the

browser (IE vs Firefox)

HTML coding/rendering

Rendering� TEST TEST TEST

� Only comprehensive testing will ensure that your email appears the way you want it to in your subscriber’s inbox.

� Subscribers view emails in many different environments: desktop email clients, web-based email clients, mobile devices.

The Mobile Factor

0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013

Opens in Each Environment

Webmail Desktop Mobile

Mobile open rates are high

0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013

Opens in Each Environment

Webmail Desktop Mobile

10%

Mobile open rates are high

0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013

Opens in Each Environment

Webmail Desktop Mobile

33%

10%

Mobile open rates are high

0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013

Opens in Each Environment

Webmail Desktop Mobile

44%

33%

10%

Mobile open rates are high

The finger is the new mouse44 x 44px minimum

Taps, not clicks

Bigger is better…

� Body copy < 13px will be resized

� Recommended minimums� Body copy: 14px� Headlines: 22px

� CSS fix: “-webkit-text-size-adjust: none;”

Beware minimum font sizes; automatic resizing

No-go navigation

No-go navigation

No-go navigation

No-go navigation

No-go navigation

Text Buttons

Create touch targets

Text Buttons

Create touch targets

Text Buttons

Create touch targets

Text Buttons Image “Buttons”

Create touch targets

Text Buttons Image “Buttons”

Create touch targets

Text Buttons Image “Buttons”

Create touch targets

� Single column layout; simplified content

� Content comes first

� Reduce clutter� Navigation� Repeated links� Low priority content/imagery

� Clear and direct copy/CTAs

� Get skinny: 320-550px wide

� Short, direct copy

� Eliminate or hide low priority content

� Clear and direct calls to action

STREAMLINE

Don’t create friction

Don’t create friction

Don’t create friction

Responsive email design

Responsive email design

Responsive email design

Responsive email design

Questions?I (may) have answers

Email Review Time

Thanks!

Justine JordanMarketing Director

@meladorri @litmusapp

Course TitleCourse TitleINSTRUCTOR NAME