Paypal Email
Design System
Paypal send more than 120 millions emails per month across EMEA and needed to revamp their email templates. So, In 2016, they partnered with RAPP to update their global Email Design System.
My role was to lead a small team (designer / Copywritter / Ux), to build a foundation for a better marketing email.
This is how we worked.
ANALYSIS & RESEARCHES
Pain Points &
Recommendations
Created in 2013, the email templates had never been updated to reflect PayPal’s new identity system. As a consequence, their emails were not compliant with web standards and toxic to the brand.
To start, we took apart their current emails and life-cycle programs to highlight their limitations and complexity.
We Observed The Best
Digital Brands
And we learned 6 lessons
1 . BE BOLD
Use easily identifiable design.
Recognisable thanks to headers and footers.
2 . BE FLEXIBLE
The same brand look and feel in the header, modified according to email type.
3 . BE MOBILE FIRST. ALWAYS
A layout with aan even number of column works better on mobile and stay desktop friendly.
4 . MAKE YOUR PARTNERS SHINE
For co-branding, the main brand identity frames that of the partner promotion.
5. START STRONG
By splitting the header and the copy. The button is never far from the headline in the header.
6 . RESPECT EMPTINESS
Short sentences, margins, line length, white space. Empty space enables eyes to look around.
design PROCESS
We redesigned not just the visual aspect of the emails but the whole experience. We built a new system (based on Atomic Design Principles) which was more consistent, more relevant, more impacting and easier to manage.
Get What Makes
Paypal Unique
To reflect Paypal's personality and to avoid looking like an average email, we dared to use gradient colors and special fonts, anticipating the next webmails and email clients.
More Than
A Simple Relooking
For unique and fresh templates, we challenged not only the visual design but also the copy, architecture, and code.
Visual Design
Designed for today but first for tomorrow, we used web fonts and CSS3 gradient colours.
We also kept in mind our UX research in managing more free space or working for mobile first.
Copywriting
We made headlines and buttons more explicit, so that users get the message even if they only glance through the email. Body copy has been shortened for a more direct message.
We cut repetitions and focused on the main message.
Structure
Studies have shown that people read just the headlines, so we moved down the body copy to focus on headlines and calls to action.
As for Paypal.com, we used the Atomic Design methodology to create fewer but more rational organisms for each type of content.
Development
As often, Design is lead by technology. So we did some research and tests to know if we could use gradients and personalise typography with CSS3. They was already accepted or would roll out very soon on major email clients and webmail.
Obviously, we took care to stay appealing without gradient and system fonts.
EXPERIMENT & RULES
Refined With
Former Email Briefs
We further improved our design and rules, experimenting with all types of existing email from the Paypal lifecycle program.
Teaser
The invitation to the workshop was a short presentation available on mobile version only.
We built it in Invision, to introduce the new email in situ.
GROUP TESTING
To Test The New System, We Workshopped With Six Paypal Marketers
The goal of this workshop was to present the new templates, how they was build and how to use them. We gave them 2 former email briefs, and lets them build the emails.
the first one with our guidance and the second by their own.
During all the workshop, we observed how they understand this new system and ended with a short interview.
New Money Design
The new system is easy to skin with another design without changing the organisms or molecules.
The new ‘Partner’ template respects Paypal identity without struggling their partners.
Partners Email Template
Desktop friendly