This project was a collaboration with BMO’s Digital Communications Centre of Excellence—the team behind over 125 million customer emails in FY23. As lead designer, I was tasked with building and documenting a modular design system to improve consistency, usability, and workflow efficiency across high-volume communications.

 

We uncovered key issues early on: the emails weren’t accessible, mobile-first, or dark mode–friendly—even though 90% of users read on mobile and 75% prefer dark mode. Engagement was also declining, with 30% skimming emails in under two seconds.

​

To tackle this, I worked alongside strategy leads, a PM, and creatives to deliver a scalable system rooted in brand standards and user behaviour—making it easier for teams to produce emails that actually connect.

With the problem clearly defined, I developed a focused strategy built around three key pillars:

​

1. Establishing a reusable library of components and modules to reduce redundancy and maintain consistency

2. Designing accessible, mobile-first, and dark-mode-optimized templates tailored to user behavior and platform constraints

3. Creating clear, practical documentation to ensure smooth adoption across teams—from designers and developers to marketing and communications

 

The strategy was rooted in improving both the user experience and internal workflows. By addressing usability and accessibility head-on while streamlining production, the system was designed to boost subscriber engagement and drive efficiency at scale.

Collaboration was key to creating a system that was visually consistent, technically sound, and aligned with BMO’s design standards. I worked closely with the Digital Communications Centre of Excellence, using engagement data to guide decisions on accessibility, mobile responsiveness, and dark mode support.

​

To ensure feasibility, I partnered with developers to understand platform constraints and validate how components would render across email clients. These insights shaped layout structures, fallback styles, and responsive behavior.

​

I also collaborated with BMO’s Brand Governance and Design System teams to ensure visual alignment and compliance. This cross-functional approach helped us build a scalable, standards-driven solution—one that met both technical requirements and brand expectations, while setting the stage for long-term adoption across teams.

Before redesigning the system, we needed to identify what was broken and why a new approach was essential. The biggest issue was inconsistency—emails varied wildly in layout, imagery, and styling, creating a fragmented brand experience. Without clear guidelines, visual elements were used inconsistently, diluting BMO’s identity.

​

The process wasn’t scalable either. Emails were often built from scratch in silos, making it hard to move quickly or reuse past work. Visually, designs felt outdated and lacked the structure needed to grab attention in crowded inboxes.

​

Calls-to-action were also buried too low, a problem given that 30% of users skim emails in under two seconds. These pain points directly shaped the principles and solutions behind the new, scalable system.

To create a framework that was both scalable and easy to maintain, I grounded the system in atomic design principles—starting small, then building up to larger, functional patterns.

 

I began by designing a set of reusable components—the foundational building blocks of the system. These included buttons, client cards, icons, illustrations, logos, and hero images. Each element was crafted to meet accessibility standards, render reliably across email clients, and reflect BMO’s brand identity.

 

From there, I assembled these components into purpose-driven modules. These modular sections—such as article blocks, hero sections, headers, footers, and responsive tables—were designed with flexibility in mind. They could be mixed and matched to support a variety of campaign needs without compromising consistency or scalability.

​

This layered approach made it possible to maintain visual cohesion across emails while dramatically speeding up the production process for future campaigns.

With the component library in place, I created four core templates to support BMO’s most frequent email needs. Each was built using the modular system to ensure consistency and flexibility.

​

• Promotional: Highlighting offers and time sensitive campaigns with bold, engaging layouts

• Newsletter: Designed for skimmable, mobile friendly content like financial tips and expert insights

• Security: Used for urgent alerts such as fraud or scam notices, with a clear and trustworthy tone

• Service: Focused on essential updates like policy changes or product notices, emphasizing clarity

​

This modular approach ensured that all templates maintained visual alignment while supporting the unique goals of each message type.

Once the system was built, I created clear documentation to help teams adopt and apply it with confidence. The goal was to make the system scalable and usable across design, development, and marketing.

​

The documentation included:

• Component Library: Each element—buttons, icons, logos—was organized with visuals, specs, and best practices. Modules and templates were grouped by use case for quick access.

• Usage Guidelines: Step by step instructions showed how to use and adapt components, making it easier for teams to work efficiently.

• Accessibility Standards: Guidance on contrast, font sizing, and dark mode supported inclusive and usable design for all audiences.

​

Designed to be simple and approachable, the documentation helped reduce rework, speed up production, and ensure brand alignment across every email.

The launch of the BMO Email Design System led to clear improvements in both visual consistency and team efficiency.

​

• Consistency: Standardized components and templates created a unified visual identity across campaigns, aligned with brand guidelines

• Efficiency: The modular setup helped teams build emails faster and avoid duplicated work

​

To support adoption, I co-presented the project at a department showcase, led Figma workshops, and launched the system as a public library for teams across BMO.

​

We set benchmarks to measure impact, including faster production timelines and early signs of improved click-through rates due to clearer calls to action.

​

These outcomes strengthened both the user experience and internal workflows, giving teams the structure and tools to move faster with clarity and consistency.