Justine Jordan, Litmus - Design Principles to Supercharge Your Email Performance

@meladorri @litmusapp #MarketingUnited

Design Principles to

Supercharge Email Performance

#MarketingUnited @meladorri @litmusapp

Hi! I’m Justine. @meladorri @litmusapp

Get the slides + resources: litmus.com/lp/emma16


Loves design, email marketing, the internet, technology, UX and cats—especially when combined. Always has an opinion.


Loves design, email marketing, the internet, technology, UX and cats—especially when combined. Always has an opinion.

everyone designs


(yes, including you)


“I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.”

—Jeffrey Veen

former User Experience Manager at Google


@krudz at #TEDC13

“It’s called artwork Not artf*&%ingaround”




Have you ever made something that was…

Read?

Interacted with?

Used?


Have you ever made something that was…

<< open

<< click

<< conversion

Read?

Interacted with?

Used?


“Everyone designs who devises courses of action aimed at changing existing situations into preferred ones.”

— Herbert Simon (1969) The Sciences of the Artificial. Cambridge: MIT Press.


Design is not art. Design is: • a plan • a strategy • a process

discover + define

research + brainstorm

create test +

assess

improve + evolve


“Thinking like a designer can transform the way you develop products, services, processes—and even strategy.”

—Tim Brown

IDEO


EMAIL IS NOT JPG

Print ad

One-page website


EMAIL IS A unique MEDIUM

EMAIL IS A personal

MEDIUM


SO SEND personal

EMAILS




To create truly personal email, we must design

human-centered experiences


80% of subscribers delete emails

that look bad on their phones…

…and 30% unsubscribe

Human-centered design


A well-designed email serves two purposes:

1.  Shows respect for your audience

2. Helps to achieve your goals


1.  WHO are you sending to?

2.  WHAT do you want them to do?

3.  WHEN is it appropriate to send the message?

4.  WHERE will the recipient read it?

5.  WHY are you sending this message?

6.  HOW are you going to measure success?

Ask yourself (and write down) the five W’s


Internal vs. external

B2B vs. B2C

Demographics

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 purchase

WHY

Opens

Clicks

Conversions

HOW


TECHNOLOGY/DEVICE


Data-driven design Outlook-heavy audience Adjust design for preview pane, code for limited support

Image-blocking email clients Code with styled alt text and colors to create interest

Large Gmail opens Use hybrid or fluid coding; lack of responsive support

Large number of retina devices Adjust Photoshop file for retina sizing

Large Lotus Notes audience Start looking for another job

email receipt requested from an ATM transaction!

ENVIROMENT: WHERE/WHEN

Huh?

WHAT

Book a hotel? Get more info? Add…to…calendar…?


From name Subject line Preheader Open Tap/Click

Inbox Email/Body

THE SUBSCRIBER EXPERIENCE

Inbox

35

~25 characters

~35 characters

~85 characters


Cutoffs can have immature and/or offensive consequences



75% of emails are displayed with

preview text in the inbox



Images


43% Of emails are viewed with images disabled.


Guide to styled ALT text: bit.ly/styledALT

Guide to image blocking: bit.ly/image-block !

Alignment




Alignment

Creates order and organization. The scaffolding for your email.


Left Alignment Is natural to read since it mirrors the way we read. It’s easy for the eye to follow.


Center Alignment Is harder to follow from

line to line. Use sparingly.


Right Alignment Is also harder to read

for Western languages. Use sparingly.



Proximity


These are related


Are these?


Proximity

Creates relationships and groups between elements. Makes things

easier for the reader.



Proximity + alignment

Color



Color Theory

ANALOGOUS

MONOCHROMATIC

COMPLEMENTARY


color.adobe.com

Fonts aka typography

Serif

Stroke added to the ends of characters.

Times New Roman, Courier, Palatino, Garamond, Bookman, Georgia.

Sans-serif

Arial, Helvetica, Verdana, Comic Sans, Trebuchet, Arial Black, Impact.

No extra stroke features at the end of characters.

Choosing Type


Comic Sans Papyrus

Brush Script

Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. Meatloaf short ribs pig chicken jerky. Turkey shoulder corned beef swine filet mignon boudin biltong fatback chuck sirloin pork belly cupim. Andouille turducken shoulder beef ribs leberkas ribeye ground round sausage landjaeger chicken. Spare ribs tongue short ribs landjaeger, salami ground round bacon brisket sirloin andouille frankfurter rump capicola. Kevin frankfurter jowl landjaeger boudin ham turkey prosciutto.

Bacon ipsum dolor amet

spare ribs turkey flank

boudin, pastrami turducken

rump cupim chuck jowl

alcatra ham hock doner.

Turkey pig tongue jowl

meatloaf meatball, shankle

cow chuck venison flank

sausage picanha

prosciutto. Meatloaf short

ribs pig chicken jerky.

Turkey shoulder corned

beef swine filet mignon

boudin biltong fatback

chuck sirloin pork belly

cupim. Andouille turducken

shoulder beef ribs leberkas

ribeye ground round

sausage landjaeger

chicken. Spare ribs tongue

short ribs landjaeger,

salami ground round bacon

brisket sirloin andouille

frankfurter rump capicola.

Kevin frankfurter jowl

landjaeger boudin ham

turkey prosciutto.

Line Height/Spacing

Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. Meatloaf short ribs pig chicken jerky. Turkey shoulder corned beef swine filet mignon boudin biltong fatback chuck sirloin pork belly cupim. Andouille turducken shoulder beef ribs leberkas ribeye ground round sausage landjaeger chicken. Spare ribs tongue short ribs landjaeger, salami ground round bacon brisket sirloin andouille frankfurter rump capicola. Kevin frankfurter jowl landjaeger boudin ham turkey prosciutto.

Bacon ipsum dolor amet

spare ribs turkey flank

boudin, pastrami turducken

rump cupim chuck jowl

alcatra ham hock doner.

Turkey pig tongue jowl

meatloaf meatball, shankle

cow chuck venison flank

sausage picanha

prosciutto. Meatloaf short

ribs pig chicken jerky.

Turkey shoulder corned

beef swine filet mignon

boudin biltong fatback

chuck sirloin pork belly

cupim. Andouille turducken

shoulder beef ribs leberkas

ribeye ground round

sausage landjaeger

chicken. Spare ribs tongue

short ribs landjaeger,

salami ground round bacon

brisket sirloin andouille

frankfurter rump capicola.

Kevin frankfurter jowl

landjaeger boudin ham

turkey prosciutto.

Line Height/Spacing

1.4–1.6 font size

Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim

chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow

chuck venison flank sausage picanha prosciutto.

Line Length

Bacon ipsum dolor amet spare ribs turkey flank

boudin, pastrami turducken rump cupim chuck

jowl alcatra ham hock doner. Turkey pig tongue

jowl meatloaf meatball, shankle cow chuck

venison flank sausage picanha prosciutto.

50-75 characters


Font Guidelines Don’t use too many.

Consider the message a particular font may send. Use them consistently.

Hierarchy


Hierarchy has to do with the

order, number and scale

of the elements in your message


Use hierarchy to…

Influence user behavior Guide subscribers to click

Set expectations Enhance comprehension


Create Hierarchy

By using size, color, alignment, contrast, and position.


Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great and drive performance. With the addition of Email Analytics to your account, you have access to rich audience insights that will help you optimize, target and track trends in your campaigns. Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing emails for their growing mobile audience.


Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great and drive performance. With the addition of Email Analytics to your account, you have access to rich audience insights that will help you optimize, target and track trends in your campaigns. Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing emails for their growing mobile audience.


Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great

and drive performance. With the addition of Email Analytics to

your account, you have access to rich audience insights that will

help you optimize, target and track trends in your campaigns.

Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing

emails for their growing mobile audience.


Be consistent with styling

Headlines: 22px+

Subheads: 18-20px

Body copy: 13px minimum

- 15-16px is better


Wine

Merlot

Cabernet

Chardonnay

Beer

Stout

Amber

Pale Ale


Wine

Merlot

Cabernet

Chardonnay

Beer

Stout

Amber

Pale Ale

Wine

Merlot

Cabernet

Chardonnay

Beer

Stout

Amber

Pale Ale

Negative (or ‘White’) Space


•  Readability •  Usability •  Clarity


White space can be any color.

It’s just breathing room.

less white space = cheap more white space = luxury

h"p://alistapart.com/ar0cle/whitespace

Use white space to set the tone.

Same content (copy and image)…

Use white space to improve legibility + comprehension


“…good use of white space between

paragraphs and in the left and right

margins increases comprehension

by almost 20%...”

h"p://www.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/


The rule of thumb 40–60 pixels between elements

Surround something with white space to make it stand out.

Emphasis


When you emphasize

EVERYTHING, you emphasize

nothing.


Emphasize the important stuff


I LIKE

BIG BUTTONS

… AND I CANNOT LIE

Next Steps


80% of subscribers delete emails

that look bad on their phones…

…and 30% unsubscribe

Human-centered design

Download workbook:

bit.ly/email-plan Map out the 5 W’s of your next campaign with your entire team


From name Subject line Preheader Open Tap/Click

Inbox Email/Body

Brainstorm ideas for how you can maximize each stage of the subscriber experience

[no idea is a bad idea at the beginning]


Share your plan for using:

Images

Alignment

Proximity

Color

Fonts

Hierarchy

White space

Emphasis


Keep It Consistent Develop a process and email style

guide. Use type, color, and structure the same way consistently.

everyone designs


#MakeEmailBetter Thanks J

litmus.com/lp/emma16

Date post:	15-Apr-2017
Category:	Marketing
Upload:	marketing-united
View:	228 times
Download:	1 times