EmailCoE_10715_DesignSystem
We aim to unify, standardize, and optimize.
The Email Center of Excellence embraces
the “One Transamerica” philosophy by
providing a holistic digital creative strategy
to upgrade and align the quality of email
design, build, and delivery throughout
Transamerica. This will undoubtedly
improve our customer, intermediary,
and internal employee experience.
In Q4 of 2015, the Transamerica Email CoE conducted an
audit of all known Transamerica email templates, creating
an in-industry and out-of-industry competitive analysis
and constructing an email delivery campaign calendar.
Based on this research, the CoE concluded that
Transamerica needed to unify branding, employ email
design best practices, and attempt to settle on one
consolidated email delivery platform.
This effort became a part of a larger holistic design
approach called Amadeo, which ensures that our
customer’s entire digital experience is cohesive,
from our website to email communications.
Our first wave of the Amadeo email templates for
marketing purposes will roll out in Q1 2016.
This guide will include:
• Global Transamerica header and footer
• Component framework
• Marketing email template examples
• Marketing component library
• Work in Progress for Internal Communications
and Co-Branded Planned Sponsor templates.
Participants:
Kim Vaughn, Mark Song, Chris Wilcox,
Laura Scully, Anthony Ginn, Richard
Bogdon, Renee Warner, Ryan Reardon,
Scott Spidell, Jeremy Kolias, Cordell Haney,
Michelle Chin, Lowell Ong, James Hoard,
Beth Magin, Eric Appelbaum, Kevin
Petersen, Diana Ozburn, Allison Hancock,
Eric Wright, and Crystal Shaw.
Cohesive
Responsive
Component-Based
Email Template
Design System
Transamerica needs to unify its email
communications to establish a brand that is
trusted, recognized, and cohesive along it’s
various business channels.
To create a unified design system, we started
from scratch with a standard 12-column grid to
design a 3-tier modular component system for
the different types of content we encounter.
Then, we tested our system to be responsive
against various screen sizes on mobile, tablet,
and desktop.
Overall, our approach was vetted through
competitor research, industry standards,
analysis of external communications across
related industries and verticals, and an audit of
our own internal and external communications.
We began with our Amadeo approach to the website
redesign and evolved it into our own specific needs.
We created an email design system that meets our
customer’s expectations, utilizes best practices,
and unifies our brand.
Amadeo
This email template was sent to you because we want to make the world a better place.
You could change your subscription settings anytime.
Mauris eget metus et purus gravida luctus et ut ligula. Cras ornare odio sem, et laoreet est tincidunt eu. Nunc
sodales dui nibh, interdum aliquam diam sagittis at. Cras gravida porta metus, ut sollicitudin diam convallis id.
Quisque posuere velit ac eleifend congue. Suspendisse sed vestibulum ex. Suspendisse eu dictum arcu. Mauris
accumsan nulla sit amet dui luctus, vitae euismod magna rhoncus. Vivamus euismod dolor ut magna placerat
efficitur. Vestibulum aliquam sem ac nulla placerat eleifend. Curabitur auctor ac turpis sed rutrum. Quisque
aliquet porttitor luctus. Nullam quis dui in ex cursus vulputate et ac odio. Mauris blandit nisi eu ultrices posuere.
Duis magna turpis, fermentum at risus at, pellentesque tristique nulla.
November 3, 2015
Our brand starts with
the header & footer
components.
These components carry our brand across all
the different types of email communications
throughout our business.
Our approach with these header & footer
components is to be as clear and simple as
possible. This allows our email to be focused
on our message and be content-driven
without any distractions.
We place the logo as the first main element in
the upper left corner, which is accompanied
by a red eyebrow accent that alerts the eye.
The footer is demure and provides adequate
spacing for legal, social links, and any other
neccessary information.
Overall, the result is a refined and clean
design that doesn’t get in the way of our
future content or our brand itself.
Responsive Email Design
with a soul.
By shifting our thinking and structuring our content to be
more concise, digestable blocks of content; we capture our
customer’s attention quicker, we increase their goodwill and
attitudes towards our brand, and we create a trusted sense
of identity.
Our messages from should be clear, concise, and trustworthy.
We need to tap into the humanity of our customers and bring
together our personal story as a company to say something
real to our customers.
Nowadays, you need to combine the refinement of design
with the powers of communication, tone, and voice to make
your customers feel relaxed, well-considered, and trusted.
Our email design system shown
in an email browser, tablet
screen, and a mobile device.
Mobile Device
Desktop Browser
Tablet Device
Sample Newsletter Layouts 1 of 3
These examples are perfect for newsletter or multi-article marketing communications, providing
ample blocks of content, large blocks for photography, and clear call-to-actions after every article.
Desktop MobileDesktop Mobile
2 of 3
These examples utilize a large graphic header image and a clear CTA to convey the main message.
Supplemental content blocks below are designed for action-driven messaging.
A – Desktop A – Mobile
Sample Promotional Layouts
B – Desktop B – Mobile
Desktop Mobile Desktop Mobile
3 of 3
These two examples are perfect for announcements or quick updates, allowing for co-branding or a large
custom graphic header image with supplemental blocks of content for either short or long-form copy.
Sample One-Column Layouts
Email Design System
Email Design System
3-Tier Modular Component System
1 of 1
1
3
3
3
22
HEADER
FOOTER + LEGAL
Global Component
Global Component
1st Tier Components
2nd Tier Components
3rd Tier Components
The 3-Tier
Modular Component
System
Using modular components means that we can
swap out different sets of content blocks and stack
together different arrangements to fit the needs of
our content and messaging.
This will help speed up design and development
and keep a constant layout structure in place.
This ultimately gives content managers the ability
to customize and build emails to suit their needs.
Email Design System
3-Tier Modular Component System
1 of 1
1
2
2
HEADER
3
3
3
FOOTER + LEGAL
1
3
3
3
22
HEADER
FOOTER + LEGAL
Responding from Desktop
to Tablet to Mobile
It’s very important to keep an understanding of how
the content will translate through all different types
of devices and viewports. Each component will stack
one-on-top of each other, collapsing and expanding
to make room for all the content. Be aware of how
individual components arrange their own blocks of
content, specifically stacking and expanding
vertically to accommodate the Mobile view.
It’s best practice, to stack no more than
3 components on top of each other. Otherwise,
your email will exaggerate in size.
One component can be made up of two or three
content blocks.
Mobile viewDesktop View
Email Design System
3-Tier Modular Component System
1 of 1
1
3
3
3
HEADER
FOOTER + LEGAL
1
3
3
HEADER
FOOTER + LEGAL
1
2
HEADER
FOOTER + LEGAL
Components must be built in order.
But you can skip 2nd Tier components altogether! (If you need to.)
1st Tier components must always be used, used once, and must be placed first, on the top of the email.
You can then can build the rest of your email with any of the Tier 2 and/or Tier 3 components.
But do not ever stack any Tier 3 components on top of any existing Tier 2 components!
2
2
2
Tiers 1 and 3 are in use.
No Tier 2 components
are in use.
DO NOT ever stack Tier 3 above Tier 2.
Tiers 1 and 2 are in use.
Tiers 1, 2, and 3 are in use.
1
22
HEADER
FOOTER + LEGAL
3
3
Email Design System
Best Practices for Writing Content that Looks Good
1 of 1
Be Concise.
Email Content Messaging should be short,
concise, and straight to the point. It should
provide a direct value proposition that entices
the reader to click the Call-To-Action.
No widows & orphans.
Widows and orphans are words at the end
of a paragraph, which are left dangling at
the top or bottom of a column, separated
from the rest of the paragraph.
Headlines should not
exceed 3 stacked lines.
Any more than 3 stacked lines on any give
instance of a Headline looks too top-heavy
and creates a disproportionate balance of
Headline and Copy.
Best Practices for Writing Content that Looks Good
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur
suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae
convallis ultrices. dolor sit amet, consectetur adipiscing elit
LEARN MORE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh
diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam
aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit.
Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam
aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit.
Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam
aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit.
Etiam bibendum.
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
LEARN MORE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum.
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
LEARN MORE
Email Design System
Best Practices to Keep in Mind
1 of 1
Content Heirarchy
Email content should be focused on one
singular value proposition. This message
should be placed in the 1st Tier component
and then accompanied by supporting articles
directly below.
Call-to-Actions
CTAs should be short, direct, and actionable.
They should entice the reader to click and
“Learn More” or “Start Here” or “Buy Now”—
even “Visit Transamerica” or “Go” can be
suitable call-to-actions.
Images
Photography and graphics should be highly
considered and thought through in how it
relates to the content. High-quality unique
imagery and conceptual approaches to
graphics should be used.
Cohesiveness
All the content of an email, between each
article should be cohesive and compliment
each other. Allowing for a unified message
and story to unfold within the email.
Design Layout
Keep in mind the layout of your email when
crafting new messaging and content. Imagery
and copy should juxtapose and collaborate
with each other cohesively.
Further Best Practices to Keep in Mind
Component Library
Global Components
Global Components
Footer 0.1
This email template was sent to you because we want to make the world a better place.
You could change your subscription settings anytime.
Mauris eget metus et purus gravida luctus et ut ligula. Cras ornare odio sem, et laoreet est tincidunt eu. Nunc
sodales dui nibh, interdum aliquam diam sagittis at. Cras gravida porta metus, ut sollicitudin diam convallis id.
Quisque posuere velit ac eleifend congue. Suspendisse sed vestibulum ex. Suspendisse eu dictum arcu. Mauris
accumsan nulla sit amet dui luctus, vitae euismod magna rhoncus. Vivamus euismod dolor ut magna placerat
efficitur. Vestibulum aliquam sem ac nulla placerat eleifend. Curabitur auctor ac turpis sed rutrum. Quisque
aliquet porttitor luctus. Nullam quis dui in ex cursus vulputate et ac odio. Mauris blandit nisi eu ultrices posuere.
Duis magna turpis, fermentum at risus at, pellentesque tristique nulla.
This email template was sent to you because we want to
make the world a better place.
You could change your subscription settings anytime.
Mauris eget metus et purus gravida luctus et ut ligula. Cras
ornare odio sem, et laoreet est tincidunt eu. Nunc sodales
dui nibh, interdum aliquam diam sagittis at. Cras gravida
porta metus, ut sollicitudin diam convallis id. Quisque
posuere velit ac eleifend congue. Suspendisse sed
vestibulum ex. Suspendisse eu dictum arcu. Mauris
accumsan nulla sit amet dui luctus, vitae euismod magna
rhoncus. Vivamus euismod dolor ut magna placerat
efficitur. Vestibulum aliquam sem ac nulla placerat
eleifend. Curabitur auctor ac turpis sed rutrum. Quisque
aliquet porttitor luctus. Nullam quis dui in ex cursus
vulputate et ac odio. Mauris blandit nisi eu ultrices posuere.
Duis magna turpis, fermentum at risus at, pellentesque
tristique nulla.
MobileDesktop
Header 0.1
Desktop Mobile
November 3, 2015November 3, 2015
1 of 1
1st Tier Components
1st Tier Components 1 of 3
Component 1.2
Lorem Ipsum Dolor Sitamet
Consectetur Adip iscing Elit
Nullam Aliquam Poloar
Elitek Ametic Spoas
LEARN MORE
Component 1.1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices, diam tellus gravida risus, vehicula varius lectus elit a
nulla. Sed sed sem nec odio gravida ornare. Sed convallis quam ex, id blandit ex
pretium sit amet. Proin hendrerit vehicula venenatis lectus vulputate, cursus felis
euveatis lectus vulputate felis.
Lorem Ipsum Dolor Sit Amet Consectetur
Adipiscing Elit Nullam Aliquam
LEARN MORE
Desktop / Tablet
Lorem Ipsum Dolor
Sitamet Consectetur
Adipiscing Elit Nullam
Aliquam Poloar Elitek
Ametic Spoas
LEARN MORE
Mobile
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices, diam tellus gravida risus,
vehicula varius lectus elit a nulla. Sed sed sem nec
odio gravida ornare. Sed convallis quam ex, id
blandit ex pretium sit amet. Proin hendrerit
vehicula venenatis lectus vulputate, cursus felis
euveatis lectus vulputate felis.
Lorem Ipsum Dolor Sit
Amet Consectetur
Adipiscing Elit Nullam
Aliquam
Mobile
LEARN MORE
Desktop / Tablet
1st Tier Components
Component 1.4
New IRA Rollover Information
Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en
Donik Porta. Click Here.
LEARN MORE
IRA Rollover
Adipiscing Elit Nullam Aliquam Dolor Sit
Diamin en Donik Porta. LEARN MORE
IRA Rollover
Adipiscing Elit Nullam Aliquam Dolor Sit
Diamin en Donik Porta.
Adipiscing Elit Nullam Aliquam
Dolor Sit Diamin en Donik Porta.
Click Here.
New IRA Rollover
Information
MobileDesktop / Tablet
Component 1.3
LEARN MORE
Lorem Ipsum Dolor
Sit Amet Consectetur
Adipiscing Elit
Nullam Aliquam
New IRA Rollover Information
Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en
Donik Porta. Click Here.
LEARN MORE
Lorem Ipsum Dolor
Sit Amet Consectetur
Adipiscing Elit
Nullam Aliquam
Adipiscing Elit Nullam Aliquam
Dolor Sit Diamin en Donik Porta.
Click Here.
New IRA Rollover
Information
Mobile
2 of 3
Desktop / Tablet
1st Tier Components
Sit Diamin Adi Piscing Elitek Amet Sansect
Lorem Ipsum Doloreds Ipsidec Susciptic
Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum,
magna vitae convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh diam porta
enim tincidunt.
LOGIN TO YOUR ACCOUNT
RED BULL RETIREMENT SAVINGS PLAN
Component 1.5
MobileDesktop / Tablet
LOGIN TO YOUR ACCOUNT
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices, diam tellus gravida risus,
vehicula varius lectus elit a nulla. Sed sed sem
nec odio gravida ornare. Sed convallis quam
exid blandit ex pretium sit amet.
Sit Diamin Adi Piscing Elitek Amet
Sansect Lorem Ipsum Doloreds
Ipsidec Susciptic
RED BULL RETIREMENT SAVINGS PLAN
3 of 3
2nd Tier Components
2nd Tier Components 1 of 5
Component 2.1
LEARN MORE
Lorem ipsum dolor sit amet, consectetur adip
iscing elit. Donec efficitur suscipit lectus, ac
laoreet elit. Etiam bibendum, magna vitae
convallis ultrices. Nullam aliquam nibh diam,
acporta enim tincidun.
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit Nullam
LEARN MORE
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.
Lorem Ipsum Dolor Sit
Adipiscing Amet Sansect
Mobile
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam,
ac porta enim tincidunt a. Donec efficitur
suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Sit
Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur
adip iscing elit. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. Nullam
aliquam nibh diam, acporta enim tincidun.
LEARN MORE
Lorem Ipsum Dolor Sit Amet
Consectetur
Adipiscing Elit Nullam
Desktop / Tablet
2nd Tier Components 2 of 5
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Nullam
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect
Donik Porta
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect
Donik Porta Emineme
Component 2.2
Mobile
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Nullam
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Elit Nullam
Porta
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Donik
Porta Emineme
Desktop / Tablet
2nd Tier Components 3 of 5
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Elit Nullam
Porta
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Donik
Porta Emineme
Component 2.3
Desktop / Tablet Mobile
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect
Donik Porta
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect
Donik Porta Emineme
2nd Tier Components 4 of 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices.Donec efficitur suscipit lectus, ac laoreet elit.
Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit.
Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac
laoreet elit. Etiam bibendum, magna vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices. dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices. dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc
Adipiscing Amet Sansect
Component 2.4
MobileDesktop / Tablet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam
nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices. dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc
Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices. dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc
Adipiscing Amet Sansect
Component 2.5
MobileDesktop / Tablet
2nd Tier Components 5 of 5
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. Nullam
aliquam nibh diam, ac porta enim.
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Elit
NullamLorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam,
ac porta enim tincidunt a. Donec efficitur
suscipit lectus, ac laoreet elit. Etiam
bibendum, magna vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Sit
Adipiscing Amet Sansect
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum,
magna vitae convallis ultrices. Nullam
aliquam nibh diam, ac porta enim.
LEARN MORE
Lorem Ipsum Dolor Sitamet
Consectetur Adi piscing Elit Nullam
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam aliquam nibh diam, ac
porta enim tincidunt a. Donec efficitur suscipit
lectus, ac laoreet elit. Etiam bibendum, magna
vitae convallis ultrices.
LEARN MORE
Lorem Ipsum Dolor Sit
Adipiscing Amet Sansect
Component 2.6
MobileDesktop / Tablet
3rd Tier Components
3rd Tier Components 1 of 5
Lorem Ipsum Dolor Sit Diamin Adi Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum,
magna vitae convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh diam porta.
LEARN MORE
Donec Efficitur Suspitec Lectus ac Loreet
Lorem Ipsum Dolor etiam bibendum, magna vitae convallis
ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing
elit nullam aliquam nibh diam porta.
LEARN MORE
Component 3.1
Component 3.2
Donec Efficitur
Suspitec Lectus ac
Loreet
Lorem Ipsum Dolor etiam bibendum, magna vitae
convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh
diam porta.
LEARN MORE
Lorem Ipsum Dolor
Sit Diamin Adi Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam
bibendum, magna vitae convallis ultrices. Lorem
ipsum dolor sit amet, consectetur adipiscing elit
nullam aliquam nibh diam porta.
LEARN MORE
MobileDesktop / Tablet
Lorem Ipsum Dolor Sit Diamin Adi Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum,
magna vitae convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh diam porta.
LEARN MORE
Donec Efficitur Suspitec Lectus ac Loreet
Lorem Ipsum Dolor etiam bibendum, magna vitae convallis
ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing
elit nullam aliquam nibh diam porta.
LEARN MORE
Lorem Ipsum Dolor Sit Diamin Adi Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum,
magna vitae convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh diam porta.
LEARN MORE
Lorem Ipsum Dolor
Sit Diamin Adi
Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam
bibendum, magna vitae convallis ultrices. Lorem
ipsum dolor sit amet, consectetur adipiscing elit
nullam aliquam nibh diam porta.
LEARN MORE
Donec Efficitur
Suspitec Lectus ac
Loreet
Lorem Ipsum Dolor etiam bibendum, magna vitae
convallis ultrices. Lorem ipsum dolor sit amet,
consectetur adipiscing elit nullam aliquam nibh
diam porta.
LEARN MORE
Lorem Ipsum Dolor
Sit Diamin Adi Piscing
Donec efficitur suscipit lectus, ac laoreet elit etiam
bibendum, magna vitae convallis ultrices. Lorem
ipsum dolor sit amet, consectetur adipiscing elit
nullam aliquam nibh diam porta.
LEARN MORE
MobileDesktop / Tablet
3rd Tier Components 2 of 5
Component 3.3
Component 3.4
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INSURANCE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
RETIREMENT
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INVESTMENTS
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INSURANCE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
RETIREMENT
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INVESTMENTS
MobileDesktop / Tablet
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
RETIREMENT
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INVESTMENTS
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
RETIREMENT
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INVESTMENTS
MobileDesktop / Tablet
Appendix
1
2
2
HEADER
3
3
3
FOOTER + LEGAL
1
3
3
3
22
HEADER
FOOTER + LEGAL
12 Column Grid
Mobile DeviceDesktop / Tablet
The 12 Column Grid
is applied.
The components stacked
on Desktop/ Tablet and
collapsed in Mobile
Newsletter Examples
Mobile
ALLOW FOR SCROLL
ON MOBILE
Newsletter Example – A
Desktop / Tablet
APPROX. PREVIEW PANE
THIS 3-STACK COMPONENT WILL
ALSO BE AVAILABLE AS A 2-STACK
COMPONENT, IN CASE THERE IS
NOT ENOUGH CONTENT AVAILABLE.
1 of 3
APPROX. PREVIEW PANE
Mobile
ALLOW FOR SCROLL
ON MOBILE
Newsletter Example – B (DYNAMIC PERSONALIZED TEXT)
2-STACK COMPONENT WILL BE AVAILABLE.
2 of 3
Desktop / Tablet
APPROX. PREVIEW PANE
Mobile
ALLOW FOR SCROLL
ON MOBILE
Newsletter Example – C
2-STACK COMPONENT WILL BE AVAILABLE.
3 of 3
Desktop / Tablet
Promo Examples
Mobile
Promo Example – A
ALLOW FOR SCROLL
ON MOBILE
APPROX. PREVIEW PANE
2-STACK COMPONENT WILL BE AVAILABLE.
1 of 5
Desktop / Tablet
APPROX. PREVIEW PANE
Promo Example – B
Mobile
ALLOW FOR SCROLL
ON MOBILE
2 of 5
Desktop / Tablet
APPROX. PREVIEW PANE
Promo Example – C
Mobile
ALLOW FOR SCROLL
ON MOBILE
3 of 5
Desktop / Tablet
APPROX. PREVIEW PANE
Promo Example – D
Mobile
ALLOW FOR SCROLL
ON MOBILE
2-STACK COMPONENT WILL BE AVAILABLE.
4 of 5
Desktop / Tablet
APPROX. PREVIEW PANE
Promo Example – E
Mobile
A SINGLE-PARAGRAPH COMPONENT
WILL ALSO BE AVAILABLE.
ALLOW FOR SCROLL
ON MOBILE
5 of 5
Desktop / Tablet
Internal & Co-Branded
Examples
(Working Progress)
Mobile
Internal Example
ALLOW FOR SCROLL
ON MOBILE
APPROX. PREVIEW PANE
ALTERNATIVE FOOTERS ARE AVAILABLE
BASED ON THE NEEDS OF THE BUSINESS
1 of 2
Desktop / Tablet
APPROX. PREVIEW PANE
Co-Branded Example
Mobile
ALLOW FOR SCROLL
ON MOBILE
ALTERNATIVE FOOTERS ARE AVAILABLE
BASED ON THE NEEDS OF THE BUSINESS
2 of 2
Desktop / Tablet
EmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystem
Thank You

More Related Content

PDF
Engaging Users with High-Performance Design
PPTX
The Trends Transforming the Email Service Provider Landscape
PPTX
Justmeans power point
PDF
Litmus Live 2018 Workshop: Reinvent Your Email Workflow
PPTX
English Persentation Email
PDF
2017 state of_email_report
PPT
Html newsletter layout 24 tips for a better html
Engaging Users with High-Performance Design
The Trends Transforming the Email Service Provider Landscape
Justmeans power point
Litmus Live 2018 Workshop: Reinvent Your Email Workflow
English Persentation Email
2017 state of_email_report
Html newsletter layout 24 tips for a better html

What's hot (20)

PPTX
Webinar: Email Design for Revenue and Response
PPTX
Unit 11 web authoring
PPTX
Unit 11 web authoring
PPTX
Email/Ad/Marketing 20100130
PDF
Front New User Guide
PDF
Responsys email design-coding_recommendations
PDF
Overcoming the 3 Challenges to Optimizing Your Email Program
PDF
Email design
PDF
Taking Your HTML Email Communications from "Ew" to "Wow"
PPTX
Justmeans power point
PDF
Transactional Email Best Practices
PDF
LiveIntent: Email is No Longer About Sending Email
PPT
Tutorial #3: Kommbox Email Integration
PDF
guide infrastructure 04 in English
PPT
Email design book 2011
PDF
The Google Marketing Workflow Workshop
PDF
Sendprimo live review
PPT
Online Marketing Education Series 1
PDF
Sendgrid Deliverability Guide
PPTX
Q&A: Your Toughest Email Infrastructure Questions Answered
Webinar: Email Design for Revenue and Response
Unit 11 web authoring
Unit 11 web authoring
Email/Ad/Marketing 20100130
Front New User Guide
Responsys email design-coding_recommendations
Overcoming the 3 Challenges to Optimizing Your Email Program
Email design
Taking Your HTML Email Communications from "Ew" to "Wow"
Justmeans power point
Transactional Email Best Practices
LiveIntent: Email is No Longer About Sending Email
Tutorial #3: Kommbox Email Integration
guide infrastructure 04 in English
Email design book 2011
The Google Marketing Workflow Workshop
Sendprimo live review
Online Marketing Education Series 1
Sendgrid Deliverability Guide
Q&A: Your Toughest Email Infrastructure Questions Answered
Ad

Similar to EmailCoE_10715_DesignSystem (20)

PDF
Samples - web design, blog posts, and infographics
PPTX
ASAE Lunch Learning Webinar: Email Trends: What's in Style for 2017
PDF
Designing for email
PDF
Email design guide
PPTX
Creative Guidelines
PDF
Designing great emails 2019
PPT
Top 10 Things You Need to Know about Email Creative
PPT
Pod1 Email Marketing Seminar Liam
PPTX
Webinar: Rethinking Your Email Creative to Maximise Engagement
PDF
Emerge 2012: Keys to Email Creative Success
PPSX
Thriving in the Chaotic World of Email Design
PPTX
Design for Your Subscribers
PPT
Email Tips and Trends 2010
PDF
Sample email template audit report
PDF
HTML Email Trends & Best Practice
PPTX
DESIGNING FOR YOUR SUBSCRIBERS - Tips and Tricks to Increase Email Marketing...
PPTX
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...
PPTX
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...
PPTX
The Email Circle of Life
Samples - web design, blog posts, and infographics
ASAE Lunch Learning Webinar: Email Trends: What's in Style for 2017
Designing for email
Email design guide
Creative Guidelines
Designing great emails 2019
Top 10 Things You Need to Know about Email Creative
Pod1 Email Marketing Seminar Liam
Webinar: Rethinking Your Email Creative to Maximise Engagement
Emerge 2012: Keys to Email Creative Success
Thriving in the Chaotic World of Email Design
Design for Your Subscribers
Email Tips and Trends 2010
Sample email template audit report
HTML Email Trends & Best Practice
DESIGNING FOR YOUR SUBSCRIBERS - Tips and Tricks to Increase Email Marketing...
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...
The Email Circle of Life
Ad

EmailCoE_10715_DesignSystem

  • 2. We aim to unify, standardize, and optimize. The Email Center of Excellence embraces the “One Transamerica” philosophy by providing a holistic digital creative strategy to upgrade and align the quality of email design, build, and delivery throughout Transamerica. This will undoubtedly improve our customer, intermediary, and internal employee experience.
  • 3. In Q4 of 2015, the Transamerica Email CoE conducted an audit of all known Transamerica email templates, creating an in-industry and out-of-industry competitive analysis and constructing an email delivery campaign calendar. Based on this research, the CoE concluded that Transamerica needed to unify branding, employ email design best practices, and attempt to settle on one consolidated email delivery platform. This effort became a part of a larger holistic design approach called Amadeo, which ensures that our customer’s entire digital experience is cohesive, from our website to email communications. Our first wave of the Amadeo email templates for marketing purposes will roll out in Q1 2016.
  • 4. This guide will include: • Global Transamerica header and footer • Component framework • Marketing email template examples • Marketing component library • Work in Progress for Internal Communications and Co-Branded Planned Sponsor templates.
  • 5. Participants: Kim Vaughn, Mark Song, Chris Wilcox, Laura Scully, Anthony Ginn, Richard Bogdon, Renee Warner, Ryan Reardon, Scott Spidell, Jeremy Kolias, Cordell Haney, Michelle Chin, Lowell Ong, James Hoard, Beth Magin, Eric Appelbaum, Kevin Petersen, Diana Ozburn, Allison Hancock, Eric Wright, and Crystal Shaw.
  • 7. Transamerica needs to unify its email communications to establish a brand that is trusted, recognized, and cohesive along it’s various business channels. To create a unified design system, we started from scratch with a standard 12-column grid to design a 3-tier modular component system for the different types of content we encounter. Then, we tested our system to be responsive against various screen sizes on mobile, tablet, and desktop. Overall, our approach was vetted through competitor research, industry standards, analysis of external communications across related industries and verticals, and an audit of our own internal and external communications.
  • 8. We began with our Amadeo approach to the website redesign and evolved it into our own specific needs. We created an email design system that meets our customer’s expectations, utilizes best practices, and unifies our brand. Amadeo
  • 9. This email template was sent to you because we want to make the world a better place. You could change your subscription settings anytime. Mauris eget metus et purus gravida luctus et ut ligula. Cras ornare odio sem, et laoreet est tincidunt eu. Nunc sodales dui nibh, interdum aliquam diam sagittis at. Cras gravida porta metus, ut sollicitudin diam convallis id. Quisque posuere velit ac eleifend congue. Suspendisse sed vestibulum ex. Suspendisse eu dictum arcu. Mauris accumsan nulla sit amet dui luctus, vitae euismod magna rhoncus. Vivamus euismod dolor ut magna placerat efficitur. Vestibulum aliquam sem ac nulla placerat eleifend. Curabitur auctor ac turpis sed rutrum. Quisque aliquet porttitor luctus. Nullam quis dui in ex cursus vulputate et ac odio. Mauris blandit nisi eu ultrices posuere. Duis magna turpis, fermentum at risus at, pellentesque tristique nulla. November 3, 2015 Our brand starts with the header & footer components. These components carry our brand across all the different types of email communications throughout our business. Our approach with these header & footer components is to be as clear and simple as possible. This allows our email to be focused on our message and be content-driven without any distractions. We place the logo as the first main element in the upper left corner, which is accompanied by a red eyebrow accent that alerts the eye. The footer is demure and provides adequate spacing for legal, social links, and any other neccessary information. Overall, the result is a refined and clean design that doesn’t get in the way of our future content or our brand itself.
  • 10. Responsive Email Design with a soul. By shifting our thinking and structuring our content to be more concise, digestable blocks of content; we capture our customer’s attention quicker, we increase their goodwill and attitudes towards our brand, and we create a trusted sense of identity. Our messages from should be clear, concise, and trustworthy. We need to tap into the humanity of our customers and bring together our personal story as a company to say something real to our customers. Nowadays, you need to combine the refinement of design with the powers of communication, tone, and voice to make your customers feel relaxed, well-considered, and trusted.
  • 11. Our email design system shown in an email browser, tablet screen, and a mobile device. Mobile Device Desktop Browser Tablet Device
  • 12. Sample Newsletter Layouts 1 of 3 These examples are perfect for newsletter or multi-article marketing communications, providing ample blocks of content, large blocks for photography, and clear call-to-actions after every article. Desktop MobileDesktop Mobile
  • 13. 2 of 3 These examples utilize a large graphic header image and a clear CTA to convey the main message. Supplemental content blocks below are designed for action-driven messaging. A – Desktop A – Mobile Sample Promotional Layouts B – Desktop B – Mobile
  • 14. Desktop Mobile Desktop Mobile 3 of 3 These two examples are perfect for announcements or quick updates, allowing for co-branding or a large custom graphic header image with supplemental blocks of content for either short or long-form copy. Sample One-Column Layouts
  • 16. Email Design System 3-Tier Modular Component System 1 of 1 1 3 3 3 22 HEADER FOOTER + LEGAL Global Component Global Component 1st Tier Components 2nd Tier Components 3rd Tier Components The 3-Tier Modular Component System Using modular components means that we can swap out different sets of content blocks and stack together different arrangements to fit the needs of our content and messaging. This will help speed up design and development and keep a constant layout structure in place. This ultimately gives content managers the ability to customize and build emails to suit their needs.
  • 17. Email Design System 3-Tier Modular Component System 1 of 1 1 2 2 HEADER 3 3 3 FOOTER + LEGAL 1 3 3 3 22 HEADER FOOTER + LEGAL Responding from Desktop to Tablet to Mobile It’s very important to keep an understanding of how the content will translate through all different types of devices and viewports. Each component will stack one-on-top of each other, collapsing and expanding to make room for all the content. Be aware of how individual components arrange their own blocks of content, specifically stacking and expanding vertically to accommodate the Mobile view. It’s best practice, to stack no more than 3 components on top of each other. Otherwise, your email will exaggerate in size. One component can be made up of two or three content blocks. Mobile viewDesktop View
  • 18. Email Design System 3-Tier Modular Component System 1 of 1 1 3 3 3 HEADER FOOTER + LEGAL 1 3 3 HEADER FOOTER + LEGAL 1 2 HEADER FOOTER + LEGAL Components must be built in order. But you can skip 2nd Tier components altogether! (If you need to.) 1st Tier components must always be used, used once, and must be placed first, on the top of the email. You can then can build the rest of your email with any of the Tier 2 and/or Tier 3 components. But do not ever stack any Tier 3 components on top of any existing Tier 2 components! 2 2 2 Tiers 1 and 3 are in use. No Tier 2 components are in use. DO NOT ever stack Tier 3 above Tier 2. Tiers 1 and 2 are in use. Tiers 1, 2, and 3 are in use. 1 22 HEADER FOOTER + LEGAL 3 3
  • 19. Email Design System Best Practices for Writing Content that Looks Good 1 of 1 Be Concise. Email Content Messaging should be short, concise, and straight to the point. It should provide a direct value proposition that entices the reader to click the Call-To-Action. No widows & orphans. Widows and orphans are words at the end of a paragraph, which are left dangling at the top or bottom of a column, separated from the rest of the paragraph. Headlines should not exceed 3 stacked lines. Any more than 3 stacked lines on any give instance of a Headline looks too top-heavy and creates a disproportionate balance of Headline and Copy. Best Practices for Writing Content that Looks Good Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit LEARN MORE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect LEARN MORE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum. Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect LEARN MORE
  • 20. Email Design System Best Practices to Keep in Mind 1 of 1 Content Heirarchy Email content should be focused on one singular value proposition. This message should be placed in the 1st Tier component and then accompanied by supporting articles directly below. Call-to-Actions CTAs should be short, direct, and actionable. They should entice the reader to click and “Learn More” or “Start Here” or “Buy Now”— even “Visit Transamerica” or “Go” can be suitable call-to-actions. Images Photography and graphics should be highly considered and thought through in how it relates to the content. High-quality unique imagery and conceptual approaches to graphics should be used. Cohesiveness All the content of an email, between each article should be cohesive and compliment each other. Allowing for a unified message and story to unfold within the email. Design Layout Keep in mind the layout of your email when crafting new messaging and content. Imagery and copy should juxtapose and collaborate with each other cohesively. Further Best Practices to Keep in Mind
  • 22. Global Components Footer 0.1 This email template was sent to you because we want to make the world a better place. You could change your subscription settings anytime. Mauris eget metus et purus gravida luctus et ut ligula. Cras ornare odio sem, et laoreet est tincidunt eu. Nunc sodales dui nibh, interdum aliquam diam sagittis at. Cras gravida porta metus, ut sollicitudin diam convallis id. Quisque posuere velit ac eleifend congue. Suspendisse sed vestibulum ex. Suspendisse eu dictum arcu. Mauris accumsan nulla sit amet dui luctus, vitae euismod magna rhoncus. Vivamus euismod dolor ut magna placerat efficitur. Vestibulum aliquam sem ac nulla placerat eleifend. Curabitur auctor ac turpis sed rutrum. Quisque aliquet porttitor luctus. Nullam quis dui in ex cursus vulputate et ac odio. Mauris blandit nisi eu ultrices posuere. Duis magna turpis, fermentum at risus at, pellentesque tristique nulla. This email template was sent to you because we want to make the world a better place. You could change your subscription settings anytime. Mauris eget metus et purus gravida luctus et ut ligula. Cras ornare odio sem, et laoreet est tincidunt eu. Nunc sodales dui nibh, interdum aliquam diam sagittis at. Cras gravida porta metus, ut sollicitudin diam convallis id. Quisque posuere velit ac eleifend congue. Suspendisse sed vestibulum ex. Suspendisse eu dictum arcu. Mauris accumsan nulla sit amet dui luctus, vitae euismod magna rhoncus. Vivamus euismod dolor ut magna placerat efficitur. Vestibulum aliquam sem ac nulla placerat eleifend. Curabitur auctor ac turpis sed rutrum. Quisque aliquet porttitor luctus. Nullam quis dui in ex cursus vulputate et ac odio. Mauris blandit nisi eu ultrices posuere. Duis magna turpis, fermentum at risus at, pellentesque tristique nulla. MobileDesktop Header 0.1 Desktop Mobile November 3, 2015November 3, 2015 1 of 1
  • 24. 1st Tier Components 1 of 3 Component 1.2 Lorem Ipsum Dolor Sitamet Consectetur Adip iscing Elit Nullam Aliquam Poloar Elitek Ametic Spoas LEARN MORE Component 1.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices, diam tellus gravida risus, vehicula varius lectus elit a nulla. Sed sed sem nec odio gravida ornare. Sed convallis quam ex, id blandit ex pretium sit amet. Proin hendrerit vehicula venenatis lectus vulputate, cursus felis euveatis lectus vulputate felis. Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam Aliquam LEARN MORE Desktop / Tablet Lorem Ipsum Dolor Sitamet Consectetur Adipiscing Elit Nullam Aliquam Poloar Elitek Ametic Spoas LEARN MORE Mobile Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices, diam tellus gravida risus, vehicula varius lectus elit a nulla. Sed sed sem nec odio gravida ornare. Sed convallis quam ex, id blandit ex pretium sit amet. Proin hendrerit vehicula venenatis lectus vulputate, cursus felis euveatis lectus vulputate felis. Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam Aliquam Mobile LEARN MORE Desktop / Tablet
  • 25. 1st Tier Components Component 1.4 New IRA Rollover Information Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. Click Here. LEARN MORE IRA Rollover Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. LEARN MORE IRA Rollover Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. Click Here. New IRA Rollover Information MobileDesktop / Tablet Component 1.3 LEARN MORE Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam Aliquam New IRA Rollover Information Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. Click Here. LEARN MORE Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam Aliquam Adipiscing Elit Nullam Aliquam Dolor Sit Diamin en Donik Porta. Click Here. New IRA Rollover Information Mobile 2 of 3 Desktop / Tablet
  • 26. 1st Tier Components Sit Diamin Adi Piscing Elitek Amet Sansect Lorem Ipsum Doloreds Ipsidec Susciptic Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta enim tincidunt. LOGIN TO YOUR ACCOUNT RED BULL RETIREMENT SAVINGS PLAN Component 1.5 MobileDesktop / Tablet LOGIN TO YOUR ACCOUNT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices, diam tellus gravida risus, vehicula varius lectus elit a nulla. Sed sed sem nec odio gravida ornare. Sed convallis quam exid blandit ex pretium sit amet. Sit Diamin Adi Piscing Elitek Amet Sansect Lorem Ipsum Doloreds Ipsidec Susciptic RED BULL RETIREMENT SAVINGS PLAN 3 of 3
  • 28. 2nd Tier Components 1 of 5 Component 2.1 LEARN MORE Lorem ipsum dolor sit amet, consectetur adip iscing elit. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. Nullam aliquam nibh diam, acporta enim tincidun. Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam LEARN MORE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. Lorem Ipsum Dolor Sit Adipiscing Amet Sansect Mobile Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Sit Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adip iscing elit. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. Nullam aliquam nibh diam, acporta enim tincidun. LEARN MORE Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Nullam Desktop / Tablet
  • 29. 2nd Tier Components 2 of 5 LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Nullam LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta Emineme Component 2.2 Mobile LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Nullam LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Elit Nullam Porta LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta Emineme Desktop / Tablet
  • 30. 2nd Tier Components 3 of 5 LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Elit Nullam Porta LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta Emineme Component 2.3 Desktop / Tablet Mobile LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta LEARN MORE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Donik Porta Emineme
  • 31. 2nd Tier Components 4 of 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices.Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices.Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Component 2.4 MobileDesktop / Tablet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect Component 2.5 MobileDesktop / Tablet
  • 32. 2nd Tier Components 5 of 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. Nullam aliquam nibh diam, ac porta enim. LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Elit NullamLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Sit Adipiscing Amet Sansect Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. Nullam aliquam nibh diam, ac porta enim. LEARN MORE Lorem Ipsum Dolor Sitamet Consectetur Adi piscing Elit Nullam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam nibh diam, ac porta enim tincidunt a. Donec efficitur suscipit lectus, ac laoreet elit. Etiam bibendum, magna vitae convallis ultrices. LEARN MORE Lorem Ipsum Dolor Sit Adipiscing Amet Sansect Component 2.6 MobileDesktop / Tablet
  • 34. 3rd Tier Components 1 of 5 Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Donec Efficitur Suspitec Lectus ac Loreet Lorem Ipsum Dolor etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Component 3.1 Component 3.2 Donec Efficitur Suspitec Lectus ac Loreet Lorem Ipsum Dolor etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE MobileDesktop / Tablet Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Donec Efficitur Suspitec Lectus ac Loreet Lorem Ipsum Dolor etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Donec Efficitur Suspitec Lectus ac Loreet Lorem Ipsum Dolor etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE Lorem Ipsum Dolor Sit Diamin Adi Piscing Donec efficitur suscipit lectus, ac laoreet elit etiam bibendum, magna vitae convallis ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam aliquam nibh diam porta. LEARN MORE MobileDesktop / Tablet
  • 35. 3rd Tier Components 2 of 5 Component 3.3 Component 3.4 Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INSURANCE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE RETIREMENT Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INVESTMENTS Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INSURANCE Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE RETIREMENT Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INVESTMENTS MobileDesktop / Tablet Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE RETIREMENT Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INVESTMENTS Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE RETIREMENT Lorem Ipsum Dolor Sit Diamin Adipiscing Elitek Amet Sansect Co Nsectetur Adipiscing Eliten Nam LEARN MORE INVESTMENTS MobileDesktop / Tablet
  • 37. 1 2 2 HEADER 3 3 3 FOOTER + LEGAL 1 3 3 3 22 HEADER FOOTER + LEGAL 12 Column Grid Mobile DeviceDesktop / Tablet The 12 Column Grid is applied. The components stacked on Desktop/ Tablet and collapsed in Mobile
  • 39. Mobile ALLOW FOR SCROLL ON MOBILE Newsletter Example – A Desktop / Tablet APPROX. PREVIEW PANE THIS 3-STACK COMPONENT WILL ALSO BE AVAILABLE AS A 2-STACK COMPONENT, IN CASE THERE IS NOT ENOUGH CONTENT AVAILABLE. 1 of 3
  • 40. APPROX. PREVIEW PANE Mobile ALLOW FOR SCROLL ON MOBILE Newsletter Example – B (DYNAMIC PERSONALIZED TEXT) 2-STACK COMPONENT WILL BE AVAILABLE. 2 of 3 Desktop / Tablet
  • 41. APPROX. PREVIEW PANE Mobile ALLOW FOR SCROLL ON MOBILE Newsletter Example – C 2-STACK COMPONENT WILL BE AVAILABLE. 3 of 3 Desktop / Tablet
  • 43. Mobile Promo Example – A ALLOW FOR SCROLL ON MOBILE APPROX. PREVIEW PANE 2-STACK COMPONENT WILL BE AVAILABLE. 1 of 5 Desktop / Tablet
  • 44. APPROX. PREVIEW PANE Promo Example – B Mobile ALLOW FOR SCROLL ON MOBILE 2 of 5 Desktop / Tablet
  • 45. APPROX. PREVIEW PANE Promo Example – C Mobile ALLOW FOR SCROLL ON MOBILE 3 of 5 Desktop / Tablet
  • 46. APPROX. PREVIEW PANE Promo Example – D Mobile ALLOW FOR SCROLL ON MOBILE 2-STACK COMPONENT WILL BE AVAILABLE. 4 of 5 Desktop / Tablet
  • 47. APPROX. PREVIEW PANE Promo Example – E Mobile A SINGLE-PARAGRAPH COMPONENT WILL ALSO BE AVAILABLE. ALLOW FOR SCROLL ON MOBILE 5 of 5 Desktop / Tablet
  • 49. Mobile Internal Example ALLOW FOR SCROLL ON MOBILE APPROX. PREVIEW PANE ALTERNATIVE FOOTERS ARE AVAILABLE BASED ON THE NEEDS OF THE BUSINESS 1 of 2 Desktop / Tablet
  • 50. APPROX. PREVIEW PANE Co-Branded Example Mobile ALLOW FOR SCROLL ON MOBILE ALTERNATIVE FOOTERS ARE AVAILABLE BASED ON THE NEEDS OF THE BUSINESS 2 of 2 Desktop / Tablet