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 eﬀort 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 ﬁrst 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 uniﬁed design system, we started
from scratch with a standard 12-column grid to
design a 3-tier modular component system for
the diﬀerent 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 speciﬁc needs.
We created an email design system that meets our
customer’s expectations, utilizes best practices,
and uniﬁes 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 reﬁnement 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
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
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 diﬀerent 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, speciﬁcally 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
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 ﬁrst, 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
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
Etiam bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam
Etiam bibendum.
Lorem Ipsum Dolor Siteded Bdsesc Adipiscing Amet Sansect
LEARN MORE
bibendum.
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 uniﬁed 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.
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
eﬃcitur. 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.
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
eﬃcitur. 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 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
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 eﬃcitur 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
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.
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
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 eﬃcitur 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
LOGIN TO YOUR ACCOUNT
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 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
vitae convallis ultrices.
Adipiscing Amet Sansect
Mobile
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
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
Desktop / Tablet

LEARN MORE
Consectetur Adi piscing Nullam
LEARN MORE
Lorem Ipsum Dolor Sit Diamin
Adipiscing Elitek Amet Sansect
Donik Porta
LEARN MORE
Donik Porta Emineme
Component 2.2
Mobile
LEARN MORE
Consectetur Adi piscing Nullam
LEARN MORE
Consectetur Adi piscing Elit Nullam
Porta
LEARN MORE
Adipiscing Elitek Amet Sansect Donik
Porta Emineme
Desktop / Tablet

LEARN MORE
Porta
LEARN MORE
Adipiscing Elitek Amet Sansect Donik
Porta Emineme
Component 2.3
Desktop / Tablet Mobile
LEARN MORE
Donik Porta
LEARN MORE
Donik Porta Emineme

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
vitae convallis ultrices. dolor sit amet, consectetur
vitae convallis ultrices.Donec efficitur suscipit
LEARN MORE
Lorem Ipsum Dolor Siteded Bdsesc
Component 2.4
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE
Component 2.5

adipiscing elit. Donec efficitur suscipit
aliquam nibh diam, ac porta enim.
LEARN MORE
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
LEARN MORE
adipiscing elit. Donec efficitur suscipit
aliquam nibh diam, ac porta enim.
LEARN MORE
LEARN MORE
Component 2.6

3rd Tier Components 1 of 5
Lorem Ipsum Dolor Sit Diamin Adi Piscing
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
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
LEARN MORE
Lorem Ipsum Dolor
Sit Diamin Adi
Piscing
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
LEARN MORE

3rd Tier Components 2 of 5
Component 3.3
Component 3.4
Adipiscing Elitek Amet Sansect Co
Nsectetur Adipiscing Eliten Nam
LEARN MORE
INSURANCE
LEARN MORE
RETIREMENT
LEARN MORE
INVESTMENTS
LEARN MORE
INSURANCE
LEARN MORE
RETIREMENT
LEARN MORE
INVESTMENTS
LEARN MORE
RETIREMENT
LEARN MORE
INVESTMENTS
LEARN MORE
RETIREMENT
LEARN MORE
INVESTMENTS

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

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

Mobile
ALLOW FOR SCROLL
ON MOBILE
Newsletter Example – B (DYNAMIC PERSONALIZED TEXT)
2-STACK COMPONENT WILL BE AVAILABLE.
2 of 3
Desktop / Tablet

Mobile
ALLOW FOR SCROLL
ON MOBILE
Newsletter Example – C
3 of 3
Desktop / Tablet

Mobile
Promo Example – A
ALLOW FOR SCROLL
ON MOBILE
1 of 5
Desktop / Tablet

Promo Example – B
Mobile
ALLOW FOR SCROLL
ON MOBILE
2 of 5
Desktop / Tablet

Promo Example – C
Mobile
ALLOW FOR SCROLL
ON MOBILE
3 of 5
Desktop / Tablet

Promo Example – D
Mobile
ALLOW FOR SCROLL
ON MOBILE
4 of 5
Desktop / Tablet

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
ALTERNATIVE FOOTERS ARE AVAILABLE
BASED ON THE NEEDS OF THE BUSINESS
1 of 2
Desktop / Tablet

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to EmailCoE_10715_DesignSystem

Similar to EmailCoE_10715_DesignSystem (20)

EmailCoE_10715_DesignSystem