email design: creative...

Email Creative Playbook Ideas & Examples for your next campaign

Yes Lifecycle Marketing

Yes Confidential | Email Design | February 15, 2017 2

Agenda 1. Creative Playbook:

• Design Ideas

• Coding Ideas

• Content Ideas

1. Trends in email

Yes Confidential | Email Design | February 15, 2017 3

Design ideas

| Email Design | February 15, 2017 Yes Confidential 4

• Impactful format stands out in the inbox

• Good tactic for announcement emails

• Follows best practice… headline & CTA are code-based

Sans header

| Email Design | February 15, 2017 Yes Confidential 5

• Desktop uses arrows to navigate the slides

• When scaled to mobile, the arrows disappear, leaving thumbnail images as navigation

• Viewed in Webmail, the carousel falls back to a rotating animated gif

Responsive carousel

| Email Design | February 15, 2017 Yes Confidential 6

• Unique in the inbox

• Good tactic for lifecycle messaging (birthday, anniversary, etc.)

• Extra points with the tech-savvy audience

• Works on Webkit environments

Parallax scrolling

| Email Design | February 15, 2017 Yes Confidential 7

• Unique in the inbox

• Good tactic for lifecycle messaging (birthday, anniversary, etc.)

Long-Scroll or Side scroll

Yes Confidential | Email Design | February 15, 2017 8

Coding Ideas

| Email Design | February 15, 2017 Yes Confidential 9

• Uses image hotspots that display product detail & Buy button when clicked

• Cool tactic for retailers…just don’t forget to plan for graceful degradation in non-Webkit environments

Product hotspots

| Email Design | February 15, 2017 Yes Confidential 10

• Uses an interactive word puzzle to "unlock" offer

• Unique in the inbox

• Nice tactic for special events or promos

• Works on Webkit environments

Interactive puzzle

| Email Design | February 15, 2017 Yes Confidential 11

• Hover states can be added to buttons or elements

• The same technique can also be used to create rollover images that resize for mobile!

• Good technique for a product education module

• Works in Webkit environments

CSS effects

| Email Design | February 15, 2017 Yes Confidential 12

• Make objects move gracefully

• Drop, slide, spin, etc

More Examples

• BALLOON http://preview.4at5.net/email_domains/vco/0037/archive/3/vco_0037e.html

• MOUSE OVER http://preview.4at5.net/email_domains/vco/0115/vco_0115e.html

• SLIDE DROP http://preview.4at5.net/email_domains/vco/0115/vco_0115c.html

CSS effects

| Email Design | February 15, 2017 Yes Confidential 13

• iOS scratch

• All others click

Scratch-Its

| Email Design | February 15, 2017 Yes Confidential 14

• Great way to connect inbox to calendar

Add to Calendar

| Email Design | February 15, 2017 Yes Confidential 15

• Proven eye-trackers!

Dynamic Maps

| Email Design | February 15, 2017 Yes Confidential 16

• Great way to connect inbox to calendar

Mobile Wallet

| Email Design | February 15, 2017 Yes Confidential 17

• Employs CSS animation to create a 3D card opening triggered by tap or mouse-over

• Works in Webkit environments

Interactive card

Yes Confidential | Email Design | February 15, 2017 18

Content Ideas

Yes Confidential | Email Design | February 15, 2017

19

Photo Issue

Yes Confidential | Email Design | February 15, 2017

20

Trends

Yes Confidential | Email Design | February 15, 2017

21

Staff Picks

Yes Confidential | Email Design | February 15, 2017

22

Top Ten Lists

Most Read Articles : Spring 2016

Most Search Destinations

Most Redeemed Destinations

Top Trending Warm Locales

Yes Confidential | Email Design | February 15, 2017

23

• Great as reoccurring sticky content

Humor

Humor

Yes Confidential | Email Design | February 15, 2017

24

• Request input

• Display results

• Community

• Interactive

Social: Call & Display

Yes Confidential | Email Design | February 15, 2017

25

Curated content

| Email Design | February 15, 2017 26

Remember, you’re adding value for the reader.

While it seems counterintuitive to link away from your site, the reader will remember that you pointed them to that great article.

Consistently provide supplemental content & the audience will be looking for your next email… “wonder what’s in this month’s newsletter”.

Curating existing content that syncs well with your marketing message is an efficient way to add sticky.

27,000,000 pieces of content are shared everyday.2

Don’t be afraid to link out

2AOL and Nielsen

Yes Confidential | Email Design | February 15, 2017 27

Cool trends & tactics in email

design

Examples from brands enjoying high email

engagement

Matthew Caldwell, SVP Creative

| Email Design | February 15, 2017 28

Solid contender for best retail email

Sticky elements: editorial profiles, tips, trivia

Even their straight marketing is well crafted & engaging

Case study in training subscribers to open

Bonobos

| Email Design | February 15, 2017 29

Doesn’t get much stickier than this

Includes: expert profiles, tool tips, photo essays, trivia, interactive quizzes, workflow tips…

Monthly newsletter that leaves you counting the days until the next drop

Hightail

| Email Design | February 15, 2017 30

Retail email + perfectly bite-sized content

Sticky elements: tips, galleries, editorial articles, & music

Well-curated, outside content that resonates with the audience

Always links out to blogs, SoundCloud, etc.

FY

| Email Design | February 15, 2017 Yes Confidential 31

• High-end photography

• Contextual targeting

• Daily updates

Aquabumps

| Email Design | February 15, 2017 Yes Confidential 32

• Curated content

• Ultra clean design

• Instagram sign off

Huckberry

| Email Design | February 15, 2017 Yes Confidential 33

| Email Design | February 15, 2017 Yes Confidential 34

• Editorial content

• Minimal design

• Simple animation

Everlane

| Email Design | February 15, 2017 Yes Confidential 35

• Content

• Illustration

• Animation

Tory Burch

| Email Design | February 15, 2017 Yes Confidential 36

• Products based on browsed history

• Solid design

Etsy

| Email Design | February 15, 2017 Yes Confidential 37

• Lifestyle content

• Amazing photos

• Spotify playlists

• Video & animation

Yeti

| Email Design | February 15, 2017 Yes Confidential 38

• Value-added content

• IG sign off module

Backcountry

| Email Design | February 15, 2017 Yes Confidential 39

• No header!

• Sleek layout

• Useful content

• Nice illustrations

Uber

| Email Design | February 15, 2017 Yes Confidential 40

• Mobile 1st design

• Good typography

• Cool animation

• Minimal status bar

Starbucks

| Email Design | February 15, 2017 Yes Confidential 41

• Engaging content

• Striking design

• Strong delineation

InVision

| Email Design | February 15, 2017 42

For best-in-class content, look no further

Sticky: Interviews with design leaders, tips, tutorials, blog articles, weekly list of favorite links, webinar series…

Striking design + engaging content = inbox favorite

InVision

| Email Design | February 15, 2017 Yes Confidential 43

• Curated content

• Good use of video

• Consistent formula

Patagonia

| Email Design | February 15, 2017 44

Good example of a consistent formula

Sticky: photo contests, photo galleries, editorial articles, video biographies of athletes, & customer stories

Each email closes with an engagement piece

Patagonia

| Email Design | February 15, 2017 Yes Confidential 45

• Clean, mobile- first design

• Rich visuals & content

• Highly targeted offers

Dollar Shave Club

| Email Design | February 15, 2017 Yes Confidential 46

• Mobile only design

• Geo-targeted contextual emails

• Great personality & humor in the content

Poncho

| Email Design | February 15, 2017 Yes Confidential 47

• Clean design

• Good content

• Vibrant imagery

Trek

| Email Design | February 15, 2017 Yes Confidential 48

• Free stuff

Shutterfly

| Email Design | February 15, 2017 Yes Confidential 49

• Curated content

• Mouse-over effects

• Humor

ActionRocket

Yes Confidential | Email Design | February 15, 2017 50

What category

of emails is enjoying the

highest consistent open

rates?

Yes Confidential | Email Design | February 15, 2017 51

Newsletters

Highest open rates:

Yes Confidential | Email Design | February 15, 2017 52

Email has become more than just a personal communication hub—when it

comes to newsletters, email has essentially become the new homepage.

- Jordan Teicher, Contently

Yes Confidential | Email Design | February 15, 2017 53

What do these emails have in common?

Clean Design

Good Type

Quality Images + = + + Engagement

Content