Email Design System
From vendor-reliant production to a scalable in-house email system.
Impact:
Replaced outsourced, ad hoc email production with an in-house system that reduced production costs 4×, improved template-building efficiency by 60%+, and embedded accessibility and dark-mode support into the workflow.
My role:Senior Experience Designer + Email Developer.
Figma system, component architecture, HTML/VML foundation, documentation, testing workflow.
Owned:Led:System implementation and designer enablement.
Partnered with:Project manager, design team, stakeholders
The Challenge:
Email production was dependent on vendors, difficult to test consistently, and prone to manual errors. The team needed a way to produce accessible, on-brand emails faster while working across Figma, email platforms, different clients, and technical constraints like Outlook and dark mode.
The 4 decisions
01 — Solve the workflow, not the tool request.
I was initially asked to implement Litmus. Instead of treating the tool as the solution, I stepped back and examined the full email creation, testing, and handoff workflow.
02 — Recognize when the system is being built in the wrong place.
Attempt
Build the system in Litmus.
Insight
Litmus was the testing environment, not the right authoring environment.
Pivot
Move reusable production components into Eloqua.
03 — Make design and code mirror each other.
I structured the Figma components to mirror the implementation model, creating a shared mental model between design and production.
Image: Email design system in Figma that works like real code would do
Image: Litmus code snippet library that I created to work like the Figma components
04 — Build quality into the system
Rather than treating accessibility and testing as final checks, I embedded WCAG requirements, dark-mode validation, reusable rules, and live testing into the workflow from the start.
Image: Reusable email templates redesign with new design system ready in Figma.
Image: Reusable email templates redesign with new design system ready in Litmus with light and dark mode test.
Results:
4X
Lower production cost.
60%
Faster template building.
WCAG + dark-mode built into the system.
Reusable workflow adopted beyond BGE.
Less manual error through documentation and testing.
Beyond the system
While building this, I noticed a fellow Experience designer's interest in coding. I set up a sandbox environment and gave her initial training so she could experiment safely, a small example of the pattern that shows up across my work: I don't just build the system; I build the team's ability to use it.
Up Next:
Leading Accessibility transformation
Accessibility is more than a checklist—it’s part of how better experiences are designed. Explore how I helped teams turn accessibility into a more practical, embedded part of the design process.