Download pdf - Email Strategy, Design and User Experience: Keys to Success

presents

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

https://twitter.com/meladorri

https://twitter.com/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


Keyword Ads



Email Marketing


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


Sender Subject line


Sender Subject line

• What is recognizable, trustworthy and relevant?


Sender Subject line

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

the brand?











Preheader = tertiary inbox

Preheader = tertiary inbox

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?




Where’s the download?


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



10%


0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013



33%

10%


0%

18%

35%

53%

70%

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013



44%

33%

10%


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


Text Buttons


Text Buttons Image “Buttons”






� 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



Responsive email design




Questions?I (may) have answers

Email Review Time

Thanks!

Justine JordanMarketing Director

@meladorri @litmusapp

Course TitleCourse TitleINSTRUCTOR NAME

http://intelligent.ly

http://intelligent.ly