Design System
iFIT
Email Component Library
Creative Direction // Anna Fladmark
Art Direction & Initiative Lead // Karli Lundquist
Designers // Allie Stikka, Alan Thomas, Nicolett Sziatinszky, Audris Lim, Adam Sands
TL;DR
Three-year-old templates, a platform migration, and a team that needed a better way to build. I turned the problem into a four-month creative initiative, and we came out the other side with 200+ components, a shared code library, and a system that other teams started copying.
The Brief
iFIT was migrating from Sketch to Figma, which meant rebuilding the email component library from scratch. The original templates had been in use for over three years and were showing their age. This wasn't just a migration; it was an opportunity to rethink how the team built emails as a whole.
The Problem
-
Outdated at Scale
Templates that hadn't meaningfully evolved in three years were holding the team back. The visual language had moved on, and the library hadn't.
-
No Creative Momentum
A stale library meant designers kept reaching for the same patterns. There was no structured way to introduce new ideas or push the design language forward.
-
Design Without Development
Email design is technically constrained, where components that looked great in Figma didn't always survive the jump to code. Design and development were working in separate silos.
The Approach
Rather than rebuild the library myself or hand it to one designer, I opened it up to the whole team. The goal was to generate a high volume of ideas while giving every designer ownership over the outcome.
Each week, I issued a focused design prompt with a constraint or a specific component type, and gave the team one to two weeks to develop concepts. We'd then review submissions together, vote on the strongest ideas, and pass the winners to the CRM team for technical vetting. If a component couldn't be built in code, it didn't make the library.
That last step was deliberate. By looping in development from the start, we built a design library and a code snippet library in parallel. Two teams, one system, no gaps between what was designed and what could actually be sent.
The Work
The Outcome
Over four months, the team produced 200+ components, resulting in a library that gave designers a modern, flexible toolkit and gave developers a matched set of code snippets to build from. Wireframing got faster, consistency improved, and the team had a shared language for building emails.
The ripple effect was unexpected: other teams saw what we built and started creating their own brand-specific libraries using the same model. A project that started as a migration became a blueprint for others to follow.