EDM-framework

EDM Design Framework
Master template
Build layout using
pre-deﬁned components
Why?
HEADER
FOOTER
Less coding = better communication
Better visual consistency
A blank canvas. It will include master header
and footer. This master template should be
the foundation of ALL email templates /
variation.
A handy selection of usable layout
components. It’ll be a row based module.
Email editor can copy and paste directly to
the master template.
Content editor can focus more on what message the EDM
will deliver to the reader. Less ﬁddling with HTML markup
will empower them to create well crafted EDM.
The pre-selected components will drive the layout
consistency between all communication pieces.
Better consistency = Better user experience.
The pre-selected components will be developed and well tested
on all devices and screen sizes. Once it’s available for the email
editor to use it will be bullert proof. Reducing any possibility of
broken layout on multiple browsers and screen sizes.
1
2
Reduce browser/client testing time3
50% 25% 25%

The Components
Full bleed width image. Headline
is recommended. CTA is optional.
1 HERO IMAGE
Best for featuring profile and
products.
6 FEATURED LISTING
Generic item listing IMAGE +
TEXT combo. Best for news
item and features story list.
7 ITEM LISTING
Container for medium - long
paragraph. Sub-heading might be
used as well.
2 TEXT BLOCK
Clickable image CTA button.
3 CALL TO ACTION BUTTON
Quotes and citation. Larger text in
italics.
4 QUOTES
Full grid image block - variable
height. Might be used for video
splash screen as well.
5 IMAGE / VIDEO SPLASH
CTA
CTA
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc
congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum
placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices
odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies
risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis.
Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et
scelerisque vulputate.
A headline goes here
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nullam in arcu eget nunc congue semper vel
quis orci. Vivamus arcu eros, scelerisque vel est eu,
vestibulum placerat mi. Donec lobortis, nisi et porta
ornare, urna leo accumsan risus, vel ultrices odio
odio a sapien. Integer laoreet magna sit amet
imperdiet cursus. Donec ultricies risus id diam
ornare mattis. Cras finibus mi eu metus bibendum, a
congue leo facilisis. Donec finibus arcu sapien,
convallis molestie nunc iaculis eget. Ut placerat velit
et scelerisque vulputate.
Lorem ipsum dolor sit amet, consec-
tetur adipiscing elit. Nullam in arcu
eget nunc congue semper vel quis
orci. Vivamus arcu eros, scelerisque
“ras finibus mi eu metus bibendum, a congue leo facili-
sis. Donec finibus arcu sapien, convallis molestie nunc
iaculis eget. Ut placerat velit et scelerisque vulputate.”
- citation

Making it works
Validate and craft the content
Below are some validation points that email editor should check against the
content prior to do any layout / design works.
Some examples and BE SPECIFIC!
We want the user to click the donate button and give financialy.
We want the user to watch the video .
We want the user to read a story we prepare for them on My World Vision.
The user want to see their impact on what they give during last campaign.
The user want to login to My World Vision.
The user just want to have a ‘feel good’ reading time.
To improve retention by communicating impact on their previous donations.
To get as many single donation as possible within first month of campaign.
To get as many sign-up as possible.
“You always ask me for more money”
“Signing up process is too time consuming - don’t like it!”
“You always say the same thing on your newsletter - BORING!”
1 Choose the BEST layout components
to communicate the message.
Based on the ESSENTIAL communcation points that the content editor
pulled from the brief, they then should pick the most suitable layout to
support the communcation. Stay true and be signle minded! Too many
goals will make your EDM rotten and achieve nothing.
Story telling / newsletter
Campaign - financial ask
Communicating impact / video
2
WHAT IS THE BUSINESS GOAL?
IS THERE ANY USER HESITATIONS / FEARS / BLOCKERS?
WHAT IS THE USER MOTIVATION?
WHAT IS THE ACTION THAT WE WANT THE USER TO DO?
“Elegant interfaces are ones that have the most
impact with the least elements.”
CTA
A headline goes here
CTA
“ras finibus mi eu metus bibendum, a congue leo
facilisis. Donec finibus arcu sapien, convallis molestie
nunc iaculis eget. Ut placerat velit et scelerisque
vulputate.”

EDM-framework

Recommended

Recommended

More Related Content

Similar to EDM-framework

Similar to EDM-framework (20)

EDM-framework