Email Pattern Library
Client: Dollar Shave Club
EXPERTISE
Design Systems
CREATION
November 2023
SOFTWARE
Figma, Zeplin
PROJECT OBJECTIVE
Create a design system that would allow for anyone (Creative and Stakeholders) to drag and drop sections to create accessible email designs. I considered the brand, grid system, and sections that were most utilized. This would create consistency and move away from image based emails, which are visually appealing, but are negative for accessability.
PAST IMAGE EMAIL EXAMPLE #1//
PAST IMAGE EMAIL EXAMPLE #2//
DESIGN EXECUTION
DESIGN SYSTEM // Considering we wanted to move away from our DSC Specter (custom font) to a web safe font, we picked Verdana. Picking web safe fonts ensures better loading and responsiveness. It's also a part of better email practices.
ORIGINAL TYPE// Formally DSC Specter - Montserrat typeface
REVISED TYPE// Verdana typeface
WIREFRAME CREATION // These sections are stripped of themes to display the variances of layout. They are displayed in wireframe colors.
HEADER// Top of the emails.
RULE DIVIDER// This divider can be used between sections.
HEROS// Top options of the emails providing a space for imagery and main heading text.
TEXT BLOCK// Provided options with headlines, copy, and call-to-action button.
2 COLUMN//
3 COLUMN//
VALUE PROPERTIES// 3 points to express about products or services that Dollar Shave Club offers.
FOOTER// Left and center alignment
THEME CREATION // Based on the brand, here are the themes are provided as applied to one of the hero section.
NOTE// Consistency in colors instills recognition and trust.
APPLICATION
The improvements are clear - accessibility and ease of build. More to come of increased engagement percentages.
TEMPLATE EXAMPLE #1
TEMPLATE EXAMPLE #2
TEMPLATE EXAMPLE #3
THANK YOU //
All projects