Scaling Email Design at Sur La Table
Overview
Context
When I joined Sur La Table as a Production Artist, the email creation process was heavily manual. Designers had to download Photoshop templates from a shared folder, but over time, multiple versions accumulated—each with slight differences in fonts, type sizes, spacing, and CTA styling.
There was also a spec guide meant to enforce consistency, but it often conflicted with the templates themselves. As a result, the team lacked a single source of truth, and there was no reusable or modular system in place.
This led to growing inefficiencies and visual inconsistencies across Sur La Table’s high-volume email campaigns—costing time and increasing design debt with each send.
I saw an opportunity to streamline the process, build a system the team could trust, and bring consistency to every email sent.
My Role
I initiated, built, and launched Sur La Table’s first-ever email design system in Figma. I also created documentation, templates, and ran team training sessions to ensure adoption.
Scope
- Role: Design Systems Lead (solo initiative)
- Timeline: 2–3 months
- Team: Email marketers, designers, 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—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 could 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 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
