Email Design System
4 min read
Project Overview
When we were considering our engagement emails and system-triggered emails, our priority was to ensure they were consistent throughout the user’s journey and tied in with the value proposition of our product.
We understood that the very nature of communication emails aimed to communicate our product’s benefits through onboarding, announcement of useful features, and engaging offerings.
Additionally, we aimed for our system-triggered emails to cater for the same brand consistency that was specifically targeted to specific user events throughout their personal journey with our product.
Heuristics
Mapping out use cases: We were responsible for mapping out all use cases and potential scenarios the system might encounter when providing feedback messaging to users. For instance, when dealing with a System Triggered Email like the ‘Abandoned Cart,’ we considered various use cases outlined in a technical requirements document.
Determine the no. of products an email can hold (min. - max.)
Determine if the email can combine merchandise and gift card product types
Determine the fall back if the link to a product is ‘Out of Stock’
Determine if the email will display sufficient points balance before triggering.
Usability: We needed to take into account different factors such as type scale, colour hierarchy, clear messaging, consistent language terms, and actionable content. Our goal was to design for a readable email that users can understand, navigate, and act upon.
Accessibility: Email design is required to meet accessibility standards with A11y in mind. This could include considerations such as ensuring the email is compatible with screen readers, the text is set to high contrast, and navigable using only a keyboard.
Business Design System
When thinking of incorporating the company's design system, we realised there was no significant difference from the original emails. We still cater for creativity but now we’re aligned with consistent blocks of content that cater for accessibility and the brand’s mission.
We also looked at ensuring the consistency across language terms such as CTAs and matching tone of voice. Finally, we are also seeking to be contextual around our cross-promotional efforts that may be of relevance to users (e.g. redeeming eGift Cards on the mobile app if receiving a Redemption Reminder).
Before applying business's design system
After applying business's design system
➜
Vision
After thoroughly testing and applying our company's design system, we have made the decision to create Figma components. But first, we had to map what both teams had as needs and pain points as well as the potential benefits it can bring to our design process. By creating Figma components, we aimed to enhance the consistency and efficiency of our design workflow. These components will serve as reusable building blocks, allowing us to easily maintain a cohesive and unified visual language across our projects. .
Components
We created the basic components needed to start testing with out teams and users, and published to both team so they could test and identify where we could improve, what was working and what wasn't. Each component was presented with a comprehensive guide and documentation, to insure consistency. The library still being tested with users and we're gathering data across multiple versions of each. The unified library gave both teams the freedom to explore creativity, without losing accessibility and keeping a consistent look. We also observed a growth in the engagement with the emails since we introduced the system, raising our open rates and click through rates almost 42% YoY.
The future
The library still being tested with users and we're gathering data across multiple versions of each. The unified library gave both teams the freedom to explore creativity, without losing accessibility and keeping a consistent look. We also observed a growth in the engagement with the emails since we introduced the system, raising our open rates and click through rates almost 42% YoY.