Outreach Email Design System

Audit

The process started with auditing all email designs in the production, reviewing each email's purpose and to identify recurring elements based on message type and intent. This provided us an overview of all the components that can be standardized.

Define Patterns

Once we've identified the patterns, we began defining the foundational elements of the system. I grouped recurring components as headers, hero sections, cards, content elements, and footers.The goal was to keep components flexible enough to serve multiple use cases and to create visual consistency across campaigns.

Documentation

Next, I've created a component library and style guide and documented typographic styles, spacing rules, colors and usage guidelines to ensure alignment across teams.

To make everything accessible, we centralized documentation in Invision DSM creating a single source of truth for both designers and developers.

Implementation

I rolled out the email design system with a phased launch and use it in actual project. This allowed me to test how well the system handled different content types and encounter any issues to refine components.

Once I made those refinements. I shared and published the library to the brand design team through DSM and conducted walkthrough sessions to demonstrate how to efficiently access, navigate, and use the system. These sessions included hands-on examples, tips for working with the component library, and guidance on best practices for maintaining consistency across different email types.

There are some adhoc 1 on 1 meetings with the designers encountering issues but are essential for gathering insights and continuous feedback loops. We've identified gaps or edge cases not covered by the initial system, and update improvements and publish new version releases of design library.