Email Design System
Transforming How Exelon BGE Creates Email
Impact:
Replaced Exelon BGE's outsourced, ad hoc email production with an in-house design system, cutting production costs 4x, speeding template builds by at least 60%, and building WCAG 2.0 and dark-mode compliance in from the start. Solution then adopted by the other Operative Companies.
Role:User Experience Designer and Email Developer
Timeline:6 months
Team:Project manager, UX designers, email developer, stakeholders
Tools:Figma, Litmus, Eloqua, HTML, VML
The problem:
Exelon BGE's email creation process was slow and expensive, relying on outsourced production with no built-in way to guarantee accessibility compliance or dark-mode compatibility.
My Role:
I was the only designer and developer on the team, owning the work from system design through implementation. I designed the email design system in Figma, established the component structure and documentation, and created the technical rules needed to make the system work across different email technologies.
I also built the foundational emails in HTML, including the specialized VML code required for Outlook, and trained other designers on basic HTML so they could work confidently within the system. The goal wasn’t just to create a set of templates, but to establish a scalable framework that designers could understand, maintain, and build from.
How I approached it:
Learned the tool before designing around it.
I was initially tasked with implementing Litmus, but I quickly reframed the challenge: instead of simply asking, “How do we use Litmus?” I asked, “How might we design the best email production and testing workflow possible?”
I started with benchmark research into email design patterns, accessibility, and industry best practices, digging into technical discussions and resources like Stack Overflow while partnering closely with the team manager to understand both the technical constraints and the needs behind the request. This helped me move beyond implementing a tool to rethink the entire workflow, how designers would create, test, validate, and hand off emails more efficiently and consistently.
Image: Email design system in Figma that works like real code would do
Cut losses on the wrong approach:
I tried building a drag-and-drop system directly in Litmus, I was over 20 snippets in before recognizing it's a testing tool, not a design tool, and it wasn't going to hold up.
Image: Litmus code snippet library that I created to work like the Figma components
Pivoted and rebuilt in the right tool:
After talking with the marketing manager and asked credentials to further understand how the email process was being handled in the company, I discovered that Eloqua supported drag-and-drop snippet storage, so I restructured the system there, building component structures that mirrored Figma to keep design and dev in sync.
Documented for two audiences at once:
I wrote a comprehensive guidelines doc covering layout, dark-mode handling, do's and don'ts, and color/asset management — built so both designers and developers could work from the same source of truth.
Image: Documentation part of the Exelon environment on ZeroHeignt
Lastly, validated end-to-end:
Every component was first reviewed in Figma’s dark-mode view, then coded and tested in Litmus, and finally verified through a live test send before sign-off.
Dark mode also exposed a larger brand challenge: our existing color palette did not translate consistently across email clients, creating noticeable shifts in how the brand appeared. At the time, customers were also reporting concerns about impersonation attempts in the area, making brand recognition and consistency especially important. We developed a dedicated, brand-aligned color palette for dark mode that preserved accessibility while maintaining visual identity across environments.
This gave us a more consistent foundation for email experiences and helped reinforce a recognizable, trustworthy brand presence—regardless of where or how customers viewed the message.
Image: Reusable email templates redesign with new design system ready in Litmus with light and dark mode test.
Image: Reusable email template being tested for dark mode using Agent511 to deliver
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.
Outcomes and wins
Delivered email production at one-quarter of the previous cost: Shifted from an outsourced model to a scalable in-house system, reducing ongoing production costs while increasing team autonomy and operational efficiency.
1.
Improved design efficiency by 60%+: Introduced a modular box-building and stacking approach that allowed designers to assemble emails from reusable components instead of rebuilding layouts from scratch, significantly reducing production time and improving consistency.
2.
Accessibility and brand consistency built in by default: WCAG 2.0 compliance, dark-mode support, and intentional brand elements were embedded into the system from the start—creating accessible, recognizable experiences while strengthening brand positioning across every email.
3.
Reduced human error and improved consistency: Documentation, reusable components, and automated testing embedded quality checks into a low-code/no-code workflow, reducing reliance on manual review and making it easier for designers to produce reliable, consistent emails.
4.
Up Next:
Making complex energy data easier to navigate
A customer-facing experience that turned scattered EV and energy data into something clearer, more actionable, and easier to understand.