Email Design Workshop

1
Email Design Workshop Matthew Caldwell Sr.
Creative Director - Yesmail matthewc_at_yesmail.com 
Christine Scott Sr. Interactive Marketing
Planner - General Mills christine.scott_at_genmills.c
om   Aaron Smith Principal - Smith-Harmon asmith_at_s
mith-harmon.com   Chad White Research Director -
Smith-Harmon cwhite_at_smith-harmon.com
2

• Content Schedule for today's workshop
• 1200-1245  EMAIL DESIGN 101
•    Inbox environment   
•    Production challenges   
•    Anatomy of email   
•    Designing for inbox environment          
• 100-145 CONTENT IDEAS
•    User generated content   
•    Copy in email   
•    Calls to action tips   
•    Assorted Content ideas   
•    Subject Lines   
•    Template System   
•    Landing Pages     

• 200-245 EMAIL CRITIQUE
•     Report card for good email design   
•     Email critique   
•  
•    
• 300-345  LIFE CYCLE
•     Welcome emails   
•     Shopping cart abandonment   
•     Reactivation emails   
•     Transactional emails   
•     Browsed activity
• Email in 2009 and beyond                 
       

3
Email Design Workshop Part 1 Email Design 101
4
Inbox Environment Print, web and email design

•  Email is a bit like print...
• What works for print does not always translate
  well to email. 
• Recipients rarely see an email in its entirety,
  so information hierarchy is critical, with the
  most important information at the top, working
  down.
• Images can help tell a story, but if they are too
  large and take too long to download, or they push
  the key points too far down along the page, or
  they are not properly alt-tagged, they hinder
  rather than help.

• Email is a bit like web...
• The principles of web design often apply to
  email, but with notable exceptions.
• In email, complex coding increases cost and
  production times as well as jeopardizes rendering
  and user experience.
• In email, rich media including forms, scripting
  and Flash usually dont render correctly.
• Email is very much itsown medium with its
  ownset of rules

5
Inbox Environment Understanding your recipients

• Viewing an email is different from browsing
  online. Email viewers are like window shoppers
  it is our job to actively guide them into the
  store.
• Subscribers are receiving more and more email
  frequency and relevancy are becoming critical
  factors in standing out from the crowd.
• What works for one company or one list may not
  work for another.

6
Inbox Environment The trend toward disabled
images and links is growing
7
Inbox Environment The Preview Pane 9 of 10 users
have a preview pane, and 7 of 10 say they
frequently or always use it!
8
Inbox Environment Preview pane pain
9
Inbox Environment Preview pane pain
MISTAKE OR MIRACLE?
10
Inbox Environment Outlook 2007

• Since its release in early 2007, Microsofts
  Outlook 2007 has received a lot of attention in
  the email marketing industry due to its poor
  support for standard HTML and CSS features. Two
  years later, email marketers are still working
  around its limitations, with no relief in site.
• Some of the major issues you should be aware of
• Background images are not supported. Try to limit
  the sections of HTML files that rely on
  background images, and in cases where a
  background images are used, also include a
  background color so that the design will not have
  a glaring white block where the background image
  should be.
• Animated GIFs do not rotate in Outlook 2007 they
  simply stay on the first frame of the animation
  and display like any other static image. As a
  partial work around for Outlook 2007, the first
  frame of an animated GIF should always be a
  picture that can stand on its own without
  animating.
• Additional hard-to-predict rendering errors
  bedevil the platform. Conducting Q/A on Outlook
  2007 before each message is sent is highly
  recommended, particularly for those in the B2B
  space.

11
Production Challenges

• Whether BIG or SMALL,
• common issues that we all may experience include
• Multiple stakeholders
• Multi-tasked resources / Lack of resources
• Training and educating internal resources on the
  specific challenges and rewards of the email
  channel
• Production schedule realities
• Flexibility of email channel (compared to print)
  makes for lots of last-minute changes
• How to manage the ever-changing inbox
• What other production challenges do you face?

12
The challenges of executing an email programWho
are your stakeholders?
Ea
13
Multi-tasked resources / Lack of resources

• Given that email is a newer communication
  channel, email programs often do not have their
  own dedicated resources or any resources at all!
  
• Wearing many hats YOU may be the email designer,
  copywriter, coder, tester and deployment
  resource!
• You may have to educate copywriters and designers
  on how to optimize content and design for email
• Your job may include adapting brand marketing
  messages to be succinct, actionable messaging for
  email
• Which leads to my next topic

14
Training and educating internal resources

• Its likely that your creative resources may be
  more accustomed to producing traditional
  advertising/promotional messaging. 
• Our job is to help traditional media teams adapt
  their content for the email medium by
  understanding
• How consumers read email
• One-size messaging may not fit all
• How to create consumer-centric content
• How to keep creative fresh and consistent
• The importance of compelling subject lines

15
Production schedule realities
Email campaign timelines are typically in weeks
or even days timelines are short and
turnarounds are quick, making project plans
essential.
Production timelines measured in weeks
Production timelines measured in months
16
Flexibility of Email The Good

• The flexibility of email communications allows us
  to react quickly.
• Responding to competitors
• Current events
• Meeting sales goals

17
Flexibility of Email The Bad

• The ability to quickly and easily adapt your
  email messaging may increase the likelihood of
• Execution errors
• Poor design
• Emailing your consumers TOO often
• STRESS!

18
Managing the ever-changing inbox

• Your consumers are using a variety of devices,
  operating systems and email clients to view your
  messages.
• Its your job to
• Produce messages that function with or without
  images
• Offer text-only versions of messaging
• Test your communications in a variety of email
  clients and make adjustments as needed
• Rinse and repeat!

19
Anatomy of an EmailHow subscribers encounter
your email

• Sender Name Address
• Subject Line ( Snippet Text)
• Images off
• Preview Pane
• Full Email

20
Anatomy of an EmailSender name address

• Use a sender name that is recognizable
• Avoid names of individuals
• Use the same sender name consistently
• Not all clients display sender names
• Branding should be clear in sender address
• Who is memberservices_at_tdso.twdc.com?

21
Anatomy of an EmailSubject line snippet text

• Snippet text appears in Outlook and Gmail
• Only 21 of major retailers have optimized their
  emails for snippet

22
Anatomy of an EmailImages off

• About 50 of subscribers are blocking images in
  their primary inbox by default
• 23 of major retailers emails were completely
  unintelligible when images were blocked

23
Anatomy of an EmailHow to combat image
suppression

• 42 used mix of HTML text and images
• 84 used alt text
• 94 used preheader text
• -Retail Email Rendering Benchmark Study

24
Anatomy of an EmailThe Bulletproof Button
25
Anatomy of an EmailPreheader text tactics

• Click to view
• Whitelisting request
• Preheader message
• Branding/Permission Statements
• Forward to a Friend
• Whitelisting instructions

• Subscribe link
• Click to view on a mobile device
• Unsubscribe link
• Personalized greeting

26
Anatomy of an EmailOptimizing preheader length
27
Anatomy of an EmailPreheader messages 3 tactics

• Reinforce the subject line and highlight the
  primary message of the email.
• Extend the subject line and highlight secondary
  messages in the email.
• Feature calls-to-action not present anywhere else
  in the email.

28
Anatomy of an EmailPreheader panes 3 things to
include

• Branding
• Primary Message
• Call-to-action
• Nav Bar, Table ofContents

29
Beware!
30
Full Email

• A variety of configurations

31
Anatomy of an EmailHeader navigation
SMART
HOT
32
Anatomy of an EmailSubmessages

• Siderail
• Layercake
• Use visual prompts like color, headlines,
  imagery and graphics to guide subscribers
  experience

33
Anatomy of an EmailSubmessages

• Test submessage count tolerance not just once,
  but periodically
• Be aware of the law of diminishing returns
  sometimes, less is more

YIKES!
34
Anatomy of an EmailRecovery module

• The final outpost acts as a catch-all
• Include alternate content links
• Add incentives to inspire engagement

35
Anatomy of an EmailFooter

• Include subscription management links
• Postal mailing address
• Links to social networks, blogs, etc.
• Viral links FTAF SWYN

36
Designing for the Inbox Environment

• The Golden Rule
• NOBODY READS COMMERCIAL EMAIL
• (they scan it)

37
Designing for the Inbox EnvironmentThe six
second rule

• Eye-tracking and other studies have shown that on
  average email users spend 4-18 seconds per email.
• (Longer with personal, non-graphic based email)

38
Designing for the Inbox EnvironmentSo, how do
you craft a message in this short environment?

• 1 topic/objective at a time
• Clean layouts
• Clear delineation between sections (borders
  boxes)
• Good typography
• Keep it simple, less is more

39
(No Transcript)
40
(No Transcript)
41
Multi-Message Approach Help! I have a lot of
content

• Busy marketers like you have lots of people
  requesting things to put into your email.
• Consider breaking your messages into multiples.
• 1. preview
• 2. announce
• 3. reminder

42
Let's take a 15-minute break
43
Email Design Workshop Part 2 Content Ideas
44
User-Generated Content in Email

• Creating user-generated content
• Online Communities
• Contests
• Establishing your credibility
• Testimonials
• Ratings/Reviews (of products, services, recipes)
• Using multiple channels to solicit user content
  (social media)
• Using email to solicit consumer feedback and
  insight
• Surveys
• Instant Voting/Polling

45
Using user-generated content to drive interaction
with an online community
46
Asking consumers to share their favorite recipes
47
Soliciting user-generated content as part of a
contest Finalists and recipes are later
featured in newsletters.
48
Leveraging Member Reviews in Email Content
49
Encourage consumer engagement through multiple
channels
50
More ways to gain consumer insights Use your
email to survey consumers, for email and other
channels
51

• Gain consumer feedback instantly through your
  email messaging
• Allow users to instantly rate your content
• Measure performance with each campaign

52

• Establish credibility by featuring consumer
  ratings and reviews
• Use star or point ratings
• Actual consumer quotes

53
Copy in Email

• Strive for short, brief copy
• Think instant messaging. The same way you write
  in IM, you can write in email.
• Single lines are always scannable. Strive for
  single lines in headlines, bullets, etc.

54
How to Write Copy for Email

• Write a full letter saying what you want, then
• DISTILL! Reduce, using only the actionable and
  colorful words.
• Good, proper English? Ha! No way. Save that for
  your book.

55
Copy in Email Example

• AFTER
• Whoa James!
• Email Evolution Conference
• Last Chance to Register by Saturday
• See how to
• Craft email copy
• Grade your email designs
• Learn about activation strategy

• BEFORE
• Hello James,
• This Saturday is your last chance to register for
  the Email Evolution Conference. This year youll
  see how to craft email copy, grade your emails
  and learn about activation strategy.

56
Copy Tip!
Avoid the dreaded Wall-o-Text users will see
it and think Ive got no time to read this
57
Multi-Message Approach Help! I have a lot of
content

• Busy marketers like you have lots of people
  requesting things to put into your email.
• Consider breaking your messages into multiples.
• 1. preview
• 2. announce
• 3. reminder

58
Calls-to-Action

• Your HEADLINES should work with your CALLS TO
  ACTION (because thats all people read anyway!)
• Example 20 OFF ALL ACCESSORIES Get your
  coupon now

59
Calls-to-Action

• Develop a distinct graphical style for your CTA.
  Then stick with it
• Consider Color, type, arrow, etc

60
Calls-to-Action

• Read More is soooo tired.People dont read
  anyway
• Use more descriptive, action words
• Dive In!
• See it now
• Get in there!
• Check it out!
• See it up close

61
Assorted Content Tips Have fun entertain

• Consider the Sell Sell Silly Approach
• Intersperse a message thats not so salesy and
  more entertaining. Theyll be interested to see
  what theyll do this time.

62
Assorted Content Tips Videos

• Make them look like a video.
• Frame them in a pseudo video player.

63
Assorted Content Tips Use video to demonstrate or
instruct
64
Assorted Content Tips Use video to deliver a
cross-channel experience
65
Assorted Content Tips Newsletter tips

• Declare your Author provides a human touch
• Sticky content repeatable but fresh, bite-sized
  sections like word of the day. Can be trivia,
  photos, tips, etc.

66
Assorted Content Tips Big BOLD first name merges

• Why just say Hello Jane?
• Instead scream Hooray for Jane!

67
Assorted Content Tips Intrigue

• Be intentionally vague.
• Users have to click to see whats this about
• Works great in subject lines too

This is a Nike message that used a simple
animated gif. The words changed to
state HOPE COURAGE WISDOM PERSEVERANCE Nike
Swoosh One of our highest click throughs ever.
68
Assorted Content Tips Texture physical objects

• Straight lines and flat colors are boring.
• Inject texture and actual items to energize
  imagery

69
Subject Lines Components

• Personalization
• Branding
• Product/Category
• Benefit
• Seasonal hooks
• Urgency/Deadlines
• Other key words

70
Subject Lines Measuring success

• Opens
• Clicks
• Click-to-open rate
• Conversions

71
Alchemy Worx Study Subject lines length is
everything

• Subject lines of less than 60 characters proved
  best for optimizing open rates
• Click and click-to-open rates are optimized by
  subject lines of over 70 characters

72
Epsilon Study Rethinking the Relationship between
Subject Line Length and Email Performance A New
Perspective on Subject Line Design

• Subject line length isnt as important as
  commonly thought
• Order of the information is more important

73
Subject Lines Order of elements

• SL1 This weekend only at your local Acme Store,
  special savings on Ladies Apparel!timegtbrandgtben
  efitgtcategory
• SL2 Special savings on Ladies Apparel at your
  local Acme Store this weekend only!benefitgtcateg
  orygtbrandgttime

74
Subject Lines Which performed better?

• SL1 Last chance to order for Valentines Day is
  this Wednesday, Order Now
• SL2 Only 48 hours to order for guaranteed
  Valentines Day delivery
• Credit Epsilon

75
Subject Lines Which performed better?

• SL1 Protect Yourself From the Sun This Summer
• SL2 The Best Sunscreen, Hats, Rash Guards and
  More
• Credit Mailchimp

76
Subject Lines The Retail Email Blogs Subject
Line Hall of Fame

• Bluefly, 10/23 Rock the Coat
• Sephora, 12/3 10 ways to kiss
• AbeBooks, 5/28 Birthday. Happy birthday.
  Celebrating a New James Bond Release
• Norm Thompson, 1/11 Fan mail for socks? Yes!
  And that's not all...
• Finish Line, 6/2 Selling Your Sole Can Be A
  Good Thing!

77
Template Systems

• A Template System is ONE template with multiple
  sections.
• You can add, delete and reorder the sections to
  create an email that fits your message.
• Can be a major production time saver

78
Template Systems Consumer Electronics Example
vtech
79
Template Systems Retail Example REI
80
Landing Pages

• If an email is the window dressing, than a
  landing page is the clothing department.
• A well-designed email draws the customer into the
  store a well-designed landing page is where the
  offering can be fully merchandised.
• Tightly coupled email and landing page
  combinations can be an effective means to
  increase conversion.

81
Landing Pages Retail Example REI
82
Landing Pages B2B Example Email Data Source
WEBSITE
EMAIL
83
Landing Pages Travel Example Holland America
84
Let's take a 15-minute break
85
Email Design Workshop Part 3 Critiquing Email
86
SCORECARD FOR GOOD DESIGNHow to rate your emails
(and talk to creatives)
DYNAMIC LIGHT
GOOD TYPOGRAPHY
STRONG CALL-TO-ACTION
SCALE MARGINS
COLOR
SCANABLE?
Grade your messages - View any email and rate
each item 1-3. 3 BEST
87
Dynamic Light fresh photos
DL
type
cta
scan
scale
color

• Dynamic Light refers to photos in your email
• Is it flat or does it shine and radiate?
• Example magazine covers movie posters

88
Good Type fresh fonts
DL
type
cta
scan
scale
color

• Clear typography that follows a distinct,
  inferred hierarchy is essential.
• A winning paragraph formula Headline SubHead
  Copy Call-to-Action.
• Typography should not conflict with each other
  but instead, compliment and contrast.

89
Good Typography.
90
Good type in a newsletter.
91
Strong Call to Action
DL
type
cta
scan
scale
color

• Your audience should not have to think about
  where to click or take action.
• It must come instinctively and impulsively.
• Develop a style for your call to actions.
• Buttons, symbols, colors

92
Guess where to click?
93
Color (simplified)
DL
type
cta
scan
scale
color

• Try to pick one dominate hue
• Then pick a secondary color
• Complimentary Analogous
• Like too many objectives, too many colors can
  ruin a layout.

94
color
95
color
96
Scale
DL
type
cta
scan
scale
color

• The Size of your message and the items in it.
• Preview Pane Avg Size 500 pixels wide x 350
  tall
• Message Window Avg Size 550 pixels wide

97
vs
scale
Email window
98
Is it Clear? Scan-able?
DL
type
cta
scan
scale
color

• Can someone understand the layout quickly?
• Can they comprehend it without reading it?

99

• EMAILS FROM ATTENDEES
• FOR OPEN CRITIQUE

100
(No Transcript)
101
(No Transcript)
102
(No Transcript)
103
(No Transcript)
104
(No Transcript)
105
(No Transcript)
106
(No Transcript)
107
(No Transcript)
108
(No Transcript)
109
(No Transcript)
110
(No Transcript)
111
(No Transcript)
112
(No Transcript)
113
(No Transcript)
114
(No Transcript)
115
(No Transcript)
116
Let's take a 15-minute break
117
Email Design Workshop Part 4 Lifecycle
Messaging
118
Welcome Emails The opportunity

• Reiterate value proposition
• Sets tone and expectations for future emails
• Get whitelisted and ensure preferences are
  selected
• Welcome emails generate some of the highest open
  rates

119
Welcome Series Retail Welcome Email Benchmark
Study

• 87 include link to site
• 78 explain benefits of signing up
• 68 ask to be whitelisted
• 47 include incentive, reward, etc.
• 24 link to preference center
• 71 were CAN-SPAM compliant

120
Welcome Series Poor welcome emails
121
Welcome Series Poor welcome emails
122
Welcome Series Poor welcome emails
123
Welcome Series Great welcome emails
124
Welcome Series Great welcome emails
125
Welcome Series Great welcome emails
126
Shopping Cart Abandonment Emails The opportunity

• About 60 of shopping carts are abandoned
• Customers use shopping carts like wish lists
• Persistent shopping carts

127
Shopping Cart Abandonment Emails The dangers

• Train shoppers to abandon carts
• Acting like Big Brother

128
Shopping Cart Abandonment Emails Tactics

• Timing of SCA email
• Kind of incentive
• Incentive vs. reminder
• Expiration of shopping cart

129
Shopping Cart Abandonment Emails Retail Study
Diapers.com

• Developed SCA email with Silverpop
• Sent 2 days after abandonment
• Didnt offer any incentive
• Items held in cart for 2 weeks
• SCA emails were only 2.7 of the email volume,
  while contributing 10.4 of the total revenue
  from email marketing

130
Reactivation Emails The opportunity

• THANKS says it all.
• Simply thank users for being customersthen offer
  them a savings.
• Use strong offer end date even if you dont
  have one make it up! Ends in 2 days
• Use first name merge and any other relevant
  merges

131
Reactivation Emails Example HP
132
Reactivation Emails Example American Eagle
133
Transactional Emails Opportunity
At this point, money has exchanged hands, so your
work is done, right? Wrong. The goal is to get
the customer to come back again, and you do that
by creating an easy, personalized and beautiful
experience. Enhanced transactional emails feel
like a fancy receipt with bonus materials,
including highlighted content and/or offers to
drive the customer back to your site.
134
Browse Activity Emails Turn window shopping Into
window buying
By tracking what subscribers are browsing, you
can tailor email messages about those specific
products. Beware of appearing too creepy, like
you're watching their every move. Concentrate on
the content, including features and benefits, and
throw in an offer to seal the deal.
135
Future Trends Volume Email in 2009 and beyond
Trend The number of marketing emails sent by U.S.
retailers and wholesalers this year will hit 158
billion and grow 63 to 258 billion in 2013.
Source Forrester, US Email Marketing Volume
Forecast, 2008 To 2013 (July 2008)

• Implications
• Competition for attention in the inbox is growing
• Messages need to stand out in terms of design and
  content
• We need to email smarter, not more

136
Future Trends ISP Inbox Filtering Email in 2009
and beyond
Trend The beta of the next version of Yahoo Mail
has a From Connections mail view that only
shows messages from favorite senders.

• Implications
• Will become tremendously valuable to be a favored
  connection
• Become a favorite by sending the right messages
  at the right time at the right frequency
• Will set a precedent for more advanced mail
  filtering across consumer ISPs

137
Future Trends Consumer Preferences Email in 2009
and beyond
Trend More than 88 of respondents said they
would like organizations to give them more
choices over the content and frequency of the
emails they receive. Source Habeas/Ipsos study
(May 2008)

• Implications
• Consumers will expect and demand more control
  from mailers
• Preference centers become a must-have, not a
  nice-to-have

138
Future Trends Acquisition Email in 2009 and
beyond
Trend 40 of potential subscribers are not
completing the sign-up process. Source Nielsen
Norman Groups Email Newsletter Usability, 2008.

• Implications
• Keep sign-up forms short and simple
• Dont ask for information you dont need or can
  get later
• Make the benefits of signing up clear, provide
  sample emails and disclose how often you send
  emails so potentials are more comfortable with
  what theyre signing up for

139
Future Trends Image Suppression Email in 2009
and beyond
Trend Approximately half of all email users
blocking images by default in their primary
inboxes.

• Implications
• Emails composed entirely or largely of images
  face serious rendering challenges
• Emails need to be designed using HTML text, alt
  text and preheader text

140
Future Trends Preview Pane Viewing Email in 2009
and beyond
Trend 26.6 of online customers use preview panes
instead of viewing entire emails. Source
MarketingSherpa (2007)

• Implications
• Emails need to be optimized for horizontal and
  vertical preview pane viewing
• The top 300 pixels of any given messagebecomes
  very valuable real estate

141
Future Trends Multichannel Messaging Email in
2009 and beyond
Trend 35 of survey respondents said they find
out about offers from emails and newsletters from
retailers and web sites. However, two-thirds of
the respondents said theyd do the bulk of their
shopping in-store. Source Prospectiv, Annual
Holiday Retail Survey (Nov. 2008)

• Implications
• Email needs to drive multichannel sales,
  promoting online, store and other shopping
  channels

142
Email Design Workshop Thank you for attending!