Roku Marketing Email Design System
Scaling campaign production through a modular design framework
Impact
Used by 20+ team members to reduce active production time from days to hours while enabling a 2.5x increase in campaign volume.
Timeline
Development: ~1.5 years
Production Use: 2023–Present
Role
Design Systems Lead
Tools
Figma & Braze
Summary
When I joined Roku, marketing emails were produced through an informal, manual workflow. Designers built campaign layouts in Adobe XD (later replaced by Figma as part of the new modular workflow), exported static JPG mockups, and handed them off to the operations team, who then reproduced each layout inside Braze.
Because the two teams worked from different tools with no shared structure, layouts were interpreted rather than replicated, introducing rendering errors and brand inconsistencies that compounded over time. The process was inherently slow, with campaigns taking two weeks or more from concept to deployment.
To eliminate the disconnect between design and production, I built a modular email design system where every Figma module had a 1:1 equivalent in Braze, removing interpretation entirely. The result was a system where design decisions made in Figma could be executed consistently in Braze, eliminating interpretation and enabling the team to more than double campaign output without increasing the burden on either team.
I led the system end-to-end: auditing historical campaigns, defining the module architecture, and building the Figma library. I partnered with a marketing operations manager (Mike Jones), who developed the Braze content block library based on my module specifications.
Challenge
Without a standardized design-to-production process, the workflow had several persistent inefficiencies:
Inconsistent Design: Design decisions varied by designer, leading to inconsistent typography, spacing, and overall brand expression across campaigns.
Error-Prone Handoff: Reproducing static JPG mockups by eye led to spacing, typography, and positioning deviations. Building desktop and mobile layouts separately introduced additional rendering risks.
Production Bottlenecks: Active build time ranged from several hours to a full day per campaign. Late-stage stakeholder edits could restart the process, compressing an already tight production window.
Limited Scale: The manual, time-intensive workflow made it impossible to meaningfully increase campaign output without adding headcount.
While many of these campaigns were visually polished on their own, the absence of a shared system meant recurring campaigns were locked into familiar layouts to avoid the overhead of rebuilding, while any unique or one-off campaigns required significantly more effort to produce. Without common standards to work from, production overhead left little time to try anything new.
A selection of pre-system emails showing inconsistent button widths, irregular spacing, non-standard layouts, and other patterns that slowed production and introduced errors.
Goal
The primary objective was to replace a fragmented, manual workflow with a shared production framework that could scale without sacrificing design quality. This required solving for three constraints: speed, accessibility, and compatibility.
Production speed: The existing production cycle left little room for iteration, increased output, or last-minute changes. Reducing active build time was the most direct lever for increasing campaign capacity without adding headcount.
Creative accessibility: The majority of the design team were not email specialists, so the system needed to handle technical complexities like grid sizes and mobile responsiveness, allowing designers to focus on visual storytelling without worrying about technical production constraints.
Skillset compatibility: While the operations team had some HTML knowledge, requiring it for day-to-day production would have created a dependency on a small subset of the team and limited throughput. The framework needed to work entirely within Braze's drag-and-drop editor, with no manual coding required during campaign assembly.
Solution:
A Dual-Library Framework
Looking at historical campaigns revealed a clear opportunity: most emails shared similar layouts but lacked a standardized system to reuse them consistently. I formalized these patterns into a modular framework, giving both designers and operations matching libraries to work from — one in Figma, and one in Braze — under a single principle: eliminate ambiguity between design and production.
Core Library
The system was built around ~24 core module layouts, each with variants for different content needs. All variants shared predefined typography, spacing, calls-to-action, and image sizing rules. These modules covered the majority of campaign structures, allowing designers to assemble emails instead of designing from scratch.
A selection of the design patterns driving the system’s standardization.
Beyond the Core Library
For campaigns that fell outside the primary library, designers could compose new layouts using structural modules like headings, text blocks, and spacing components, all part of the same 1:1 system between Figma and Braze.
A selection of structural modules in Figma.
Linking the Libraries
To bridge the two libraries, I developed a module ID system that served as a shared reference across both platforms. In Figma, layouts were organized into a library of folders based on their contents, giving designers a visual way to browse and select modules.
Handoff Optimization
In Braze, operations could search a module ID to insert the corresponding content block instantly. Because module IDs also served as Figma layer names, every campaign’s Figma layer list effectively became a step-by-step assembly guide for operations.
The result was a system where design decisions made in Figma were directly and quickly executable in Braze.
Technical Challenges
Building the system required navigating two Braze platform limitations with meaningful implications for scalability and rendering reliability.
Scalable Identification
The first involved Braze's content block architecture. Content blocks cannot be renamed after creation, meaning any naming convention tied to alphabetical order or campaign context would inevitably break down as the library expanded with the needs of the marketers and designers. I designed around this by encoding structural properties into each module ID, such as image count and layout type, so new modules could be inserted at any point without disrupting the existing organization. The library could scale indefinitely without requiring refactoring.
Pixel-Perfect Rendering
The second involved layout precision. Braze's drag-and-drop editor restricts email widths to 5px increments. Roku's campaigns relied heavily on 16:9 and 2:3 image ratios (standard formats for movie and TV promotional imagery) which are sensitive to width and padding values, and most combinations produce fractional pixel heights that cause rendering inconsistencies across email clients.
To find a viable configuration, I mapped the full range of width and padding combinations in Excel. The analysis revealed that shifting the template width from Roku’s classic 600px to a wider 640px with 38px of horizontal padding on each side was the only configuration that produced clean integer image dimensions across every module, while keeping internal row and column padding at a standard 20px and ensuring all other spacing followed consistent 5px increments.
Results
The framework was adopted as the standard email production workflow across Roku's content marketing, devices marketing, and marketing operations teams. To support the rollout, I developed comprehensive documentation and production guidelines in Confluence and led training sessions for 20+ team members.
(Manual)
(System-Enforced)
Some marketing stakeholders were initially concerned that a standardized system would limit creative flexibility, so I ran live working sessions with example campaigns to demonstrate the range of layouts possible in real time. Early adopters became advocates as they showcased successful campaigns built with the system, helping drive adoption across the remaining teams.
The module library ultimately covered the vast majority of production needs. Roughly 90% of campaigns were assembled entirely from existing modules, while around 5% incorporated structural modules or light modifications to existing layouts. The remaining 5% involved ad hoc requests, typically transactional rather than marketing emails, which required custom layouts but were still built within the same drag-and-drop environment, preserving consistent spacing and typography throughout.
"The system made it so much easier to focus on the creative. I wasn’t getting bogged down in technical decisions or worrying about how things would render, so I had more time to push the visuals further, like putting more thought into hero imagery."
A selection of emails built with the new modular system.
The system reduced active production time from days to hours, enabling the team to increase campaign output from roughly two per week to five or more without adding headcount. Beyond speed, it improved consistency, reduced production errors, and accelerated onboarding of new team members by fundamentally changing how design and operations worked together on every campaign.
"Before the system, building a campaign meant a lot of guesswork and going back and forth with the design team to make sure things looked right. After, I could pull it together in an hour and actually trust that it matched what was designed. It took so much stress out of the process."
Late-stage stakeholder changes, while still a factor, were less disruptive. The reduced active build time gave operations more flexibility to absorb revisions without missing deployment deadlines.
In active use since 2023, the system continues to support Roku’s marketing email production at scale, enabling faster execution and consistent output across multiple teams without added complexity.
Extending the System: Howdy
When Roku launched Howdy as a distinct sub-brand, it came with its own visual identity: a different color palette, typography, and tone. Because the module framework separated layout from visual style, adapting it to Howdy required no structural changes, only updating the Figma library to include Howdy's brand colors and any typographic differences.
The result was a fully operational email design system for a new brand in a fraction of the time it would have taken to build again from scratch. The operations team could assemble Howdy campaigns using the same workflow and module IDs they already knew, with no retraining required.