Scaling Customer Communication Through a Design System
Overview
Problem
The email team relied on multiple Photoshop templates that had drifted over time, leading to inconsistencies in layout, typography, and CTA styles. Designers were manually recreating emails for each campaign, which slowed production and created a bottleneck.
Solution
I designed and implemented a modular email design system in Figma, with reusable components and templates that standardized structure across campaigns and reduced the need for one-off design work.
Impact
- Reduced email production time by 40–50%
- Created 10+ templates, 20+ reusable components and variants covering most use cases
- Enabled marketing team to build simple emails independently
Role
Led the initiative end-to-end. Built the system, created documentation, and trained both designers and marketing partners to use it.
Scope
- Timeline: 2–3 months
- Team: Email marketing, design, creative leadership
- Tools: Figma
Approach
1. The Problem
Emails were taking too long to design and lacked consistency.
Sur La Table sends dozens of emails weekly. Before the system:
- Every email was designed manually from outdated Photoshop files
- No shared templates or modular design patterns
- Brand inconsistencies across CTAs, typography, layout
- Emails took 3–4 hours each to design and QA
The design team was stretched thin, and marketers were dependent on designers for basic layout updates.
2. The Opportunity
After auditing the past ~30 emails, I realized:
- 80% followed similar structural patterns
- With a modular system, we could template the repetitive parts
- The marketing team could build most emails on their own and with less reliance on design
3. The Solution: A Modular Email Design System
I built a Figma-based design system that included:
- Modular components: headers, hero blocks, multiple sized banners, product grids, CTAs
- Pre-built templates for key email types (promos, recipes, editorial)
- Typography & spacing system for layout consistency
- “How-to” documentation + visual toolkit
4. System in Action
Here’s how the system was used:
- Marketers would select a template, plug in content, and request design review
- Designers only stepped in for refinement, not heavy lifting
- Emails could be built in ~1.5 hours instead of 3–4
5. Team Enablement & Training
To ensure the system was adopted and maintained, I:
- Created a visual guide and how-to slides
- Ran live training sessions for marketers and designers
- Shared best practices for, spacing and image use
Results
1. Impact
-Cut average production time by 40%-50%
-Created 10+ templates, 20+ reusable components and variants covering most use cases
-Empowered the marketing team to self-build emails
-Increased brand consistency across 100+ campaigns
-Reduced QA time and late-stage design edits
2. Reflection
This project taught me how scalable systems are about more than just clean files, they’re about empowering teams. Documentation, flexibility, and training were just as important as the design itself.
If I were to continue evolving the system, I’d:
-Build a connected component library across email, social, and web
-Add documentation for accessibility and dark mode
