Design System Lead · Email Infrastructure · No-Code Tooling
Role
Design System Lead
Platform
Email · Multi-client
Scope
50+ Components · 28 Templates
Organisation
Mastercard
The real constraint, client compatibility
No div support · tables only · breaks modern CSS
Inconsistent font rendering · dark mode issues
Good HTML5 support · dark mode needs extra handling
Strips head styles · inline CSS required
Reliable · good responsive support
Variable rendering across Android versions
Every design decision was filtered through: “Will this render in Outlook Desktop?”
Client
MastercardCreative Studio
Role
Design System LeadComponent architecture + governance
Duration
6–8 months+ ongoing feedback iterations
System
50+ components28 templates · 9 categories
Constraint
Outlook DesktopDrove every design decision
Adoption
Mastercard-wideBacked by Global Brand team
Operational problem
Custom emails required HTML knowledge. Teams either depended on agencies, which was slow, expensive, and inconsistent, or avoided custom emails altogether and defaulted to outdated generic templates. After the Mastercard.com rebrand, the gap between the updated digital identity and downstream email communication became immediately visible.
Technical problem
Even when teams had HTML skills, Outlook Desktop's lack of modern CSS support meant hand-coded emails regularly broke. Div-based layouts failed. Dynamic buttons required workarounds. Font handling was inconsistent. No standard, no governance, and no system to prevent it from happening again.
The central tension
Teams wanted richer, more branded communication. Outlook Desktop, still dominant across enterprise, couldn't render it. The design system had to make the best possible email within the worst possible constraint. Simplicity wasn't a design preference. It was an engineering requirement.
I didn't build the builder UI and I didn't write the HTML. I owned what went inside both, the component architecture, design standards, governance model, and prioritisation of what to build next.
Senior Engineer
HTML + Builder Code
You, Design System Lead
Component Architecture + Governance
Designer
Builder Dashboard UX
When a stakeholder pushed for more and the engineering said less, these were the rules we went back to instead of opinion.
The dominant enterprise client gets designed for first. Anything that breaks there does not ship, however good it looks everywhere else.
In practice Every component in the library renders in Outlook Desktop before it earns a place in the system.
A template is a dead end: every brand update means re-editing it. A component propagates. The effort compounds instead of repeating.
In practice A brand update touches one component and flows through all 28 templates.
The adoption problem was intimidation, not capability. A tool that solves for power users and scares everyone else has failed at its actual job.
In practice Select a component, fill in content, ship. No code, no design tool, no vendor.
A design system without organisational backing erodes one exception at a time. The standards held because Global Brand endorsed them, not because they were well documented.
In practice Requests to break the system went to the governance model, not to whoever asked loudest.
The first call shaped everything after it: what should the system actually be made of?
Considered
Teams keep commissioning custom emails from external agencies whenever they need something branded.
Why not: Slow, expensive, and inconsistent. It was the status quo that created the problem, and it kept HTML as a gate in front of every send.
Considered
Hand-build each template the categories needed. Fastest path to a visible launch.
Why not: Every future brand update would mean manual edits across all 28. The effort repeats forever instead of compounding.
Chosen
50+ modular pieces that teams assemble into any email. Started as a Figma library concept, evolved into the no-code builder.
Why it won: More upfront architecture work, invisible to stakeholders at first. But a brand update now touches one component and propagates through every template.
Problem
Stakeholders wanted richer, more visual emails, multi-column layouts, custom fonts, dynamic CTAs. Outlook Desktop couldn't render any of it reliably without complex, brittle workarounds.
Decision
Every time a stakeholder pushed for more visual complexity, the answer was to simplify the design rather than push for complex engineering workarounds. Outlook Desktop is the floor, not an edge case to hack around.
Tradeoff
Required repeatedly saying no to stakeholders who wanted more, and having Global Brand's endorsement to hold that line. Without organisational authority backing the governance model, it would have eroded on day one.
Impact
The constraint produced more durable design. The emails that perform best in enterprise environments are rarely the most visually complex. Simplicity wasn't a compromise, it was the correct answer.
Problem
The biggest adoption problem wasn't technical capability, it was intimidation. Teams avoided custom emails because HTML felt too risky. A more powerful tool with a high capability ceiling would solve for power users and fail for everyone else.
Decision
Radical simplicity: any non-HTML person should be able to build a branded email. Select a component. Fill in content. Ship it. No code, no design tool, no external vendor required.
Tradeoff
Power users wanted advanced customisation, pixel-level control, export options. Those use cases were left underserved intentionally. The 80% case, any team, any region, on brand, mattered more than the 20%.
Impact
Teams that previously avoided custom emails because HTML felt too risky began creating richer branded communication more frequently. Removing the HTML requirement changed the behaviour, not just the tooling.
Foundations are stable. Components are reusable. Patterns are assembled. Templates are shipped. Each level builds on the one below, and a change to any level propagates upward automatically.
Spacing system, typography hierarchy, brand colour tokens, responsive grid, accessibility standards, and email-safe colour system. These never change.
50+ modular building blocks, hero banners, CTA modules, content cards, editorial blocks, product highlights, event modules, legal footers. All Outlook-safe.
Recurring email structures assembled from components, campaign layouts, launch announcements, newsletters, internal comms, event invitations.
28 best-practice templates across 9 communication categories. Mastercard-wide. Every template is a composition of L2 components, update a component, update every template.
Every time we wanted to do something modern, Outlook Desktop said no. Here's how every major design decision was reshaped by that constraint.
| Criterion | What we wanted | What Outlook allowed | What we builtchosen |
|---|---|---|---|
| Layout | CSS div-based flexible layouts | No div support, breaks entirely in Outlook Desktop | Table-based layouts, rigid but universal and reliable |
| Buttons | CSS-styled dynamic buttons | CSS buttons partially ignored, inconsistent borders and padding | VML-backed buttons, renders consistently across all versions |
| Typography | Web fonts (brand typeface) | Web fonts not supported, fallback to system fonts only | Email-safe font stack with brand-aligned fallbacks |
| Dark mode | Dark mode-aware design | Outlook inverts colours unpredictably in dark mode | Tested colour pairs that remain legible in both modes |
| Responsive | Responsive fluid layouts | Max-width and media queries inconsistently applied | Fixed-width core (600px) with mobile-only breakpoint handling |
| Motion | HTML5 video embeds | Not supported, blank space or broken placeholder | Animated GIF with static fallback image, works everywhere |
Every template is assembled from the component library, not built from scratch. Updating a component updates every template that uses it.
Newsletter
Recurring communications
Announcement
Product + org updates
Event Invite
Conferences + webinars
CEO / Leadership
Executive messaging
B2B Campaign
Partner + sales comms
Product Campaign
Feature launches
Information
Updates + notices
Internal Comms
Employee messaging
Other
Edge cases + custom
Adoption strategy, the feedback loop
Building the system was half the job. Getting teams to actually use it was the other half. Regular interviews with power users drove iteration on real workflow friction.
Before, manual HTML workflow
<table width="600" border="0" cellspacing="0">
<tr><td style="padding:0;margin:0;">
<!--[if mso]><v:rect...>
<div style="color:#000"> <!-- breaks in OL -->
<p style="font-family:Arial;">
<!-- font ignored in Outlook 2016 -->
Hello [FIRST_NAME],
<!-- spacing broken on mobile -->
</table>
HTML required
Agency dependency · inconsistent output · weeks of turnaround
After, no-code builder
Zero HTML required
Any team · any region · on-brand · Outlook-safe
Component picker. Every block comes from the 50+ piece library. Nothing on the canvas can go off-brand, because off-brand is not on the menu.
Composition, not code. An email is a stack of components in an order. The system owns the HTML underneath, including the Outlook workarounds.
Email-safe by construction. Table layout, VML buttons, tested colour pairs. The constraint work is baked into the pieces so authors never see it.
Governed footer. Legal and unsubscribe blocks are locked components. The parts that carry risk are the parts nobody can improvise.
Will this render in Outlook Desktop?
The organisational shift
Teams that previously avoided custom emails, because HTML felt too risky or agency turnaround was too slow, began creating richer branded communication more frequently. The barrier wasn't capability. It was confidence. Removing the HTML requirement changed the behaviour, not just the tooling. That's what a well-designed system does: it changes what people feel able to do.
Backed by Global Brand. Used Mastercard-wide. The number wasn't how many components shipped, it was how many people stopped needing HTML to communicate.
Barrier to creating a branded email
What it took to send a branded, Outlook-safe email.
Before
HTML + agency
After
Zero code
M.01
50+
Modular components, all Outlook-safe, all brand-compliant.
M.02
28
Best-practice templates across 9 communication categories.
M.03
9
Communication categories covering the full range of Mastercard messaging needs.
M.04
Zero HTML
Skill level required. Any team, any region can now build a branded email.
The challenge wasn't creating email templates. It was designing a system constrained enough to work in Outlook and flexible enough that any team would actually want to use it. Governance only works if someone with authority backs it.
What it changed in how I work
Design systems need political backing, not just design quality. I faced real pushback on the governance model, people wanted more flexibility and more exceptions, and Global Brand's endorsement was what held the line. The other surprise was the constraint itself: Outlook forced every design to be simpler than I wanted, and in retrospect that simplicity is why the system endured.
What I'd do differently
Instrument usage from launch. Knowing which templates got used most, which components got customised, and which categories drove adoption would have accelerated the feedback loop and made every prioritisation conversation sharper.
What still needs proving
Whether radical simplicity keeps holding as power users grow. The 80% case was the right first bet, but the underserved 20% will eventually push for pixel-level control, and the system has not yet had to absorb that pressure.