Building a modular email design system for Brooks Running Shoes to streamline workflows, strengthen brand consistency, and support rebrand initiatives.
Role: Design Lead
As Brooks entered a rebrand in 2023, the existing email template system was falling short. It was overly complex, inconsistent, and difficult to use—slowing down designers and diluting brand clarity.
Old template
Solution:
Developing a modular design system: simplified and flexible. Focused on 3 core components: Image, Text, CTA Buttons.
Streamlined template for usability and consistency.
Enabled direct handoff to builders for immediate use of modular blocks, improving workflow.
Design system buildout - my approach:
Audited the old system and identified areas for consolidation
Leveraged my knowledge about Figma and Figma Learning page to create customizable, user-friendly components.
Organized components into buckets and numbered them to match email layouts.
Utilized the old template and made small improvements where it made sense.
Conducted user testing before presenting to marketing partners.
How-to guide of the new design system
Results
Streamlined workflows for both designers and email builders
Improved consistency across all customer-facing emails
Faster production time and easier training for new hires
CRM revenue exceeded goals post-launch:
Q3 2023: 92% of goal → Q3 2024: 105% of goal
Demo of the modular email design system in action—showing how designers can easily build and customize campaign layouts using reusable components in Figma.
Text block with editable button properties built in Figma as part of the modular email design system.
Simplified modular system
