Three Lessons from a Decade of Building Design Systems

A design system only drives real impact when it’s built on a shared language, lives in code, and is treated as strategic infrastructure.

Over the past decade, I’ve led design system initiatives that scaled products across nine platforms and multiple brands, unified siloed teams, and accelerated delivery for millions of users. Long before design systems became industry standard, I was building them out of necessity—applying a systems mindset across media, B2C, and B2B contexts to solve complex organizational challenges.

The three lessons below reflect how those experiences continue to shape my approach to strategy, design, and implementation—project by project.

× ‹ ›

Christa Field, a product designer on the design system team, demonstrating how MTV’s design system adapts across devices.

A system isn’t real until it lives in production.

Problem: Designers and developers worked in silos, leading to inconsistent UIs and slower product rollouts.

Approach: I partnered with the VP of Technology to pair a product designer and front-end engineer. Together, they:

• Standardized HTML and class naming across teams.
• Built reusable components to accelerate delivery.
• Enabled multi-brand theming using tokens across MTV, VH1, CMT, and Logo.
• Documented the system on an internal site for easy reference and reuse.
• Championed adoption by ensuring all new features followed system standards.
• Integrated feedback from teammates to continuously evolve the tool.

Impact: Launched MTV’s first design system rooted in production code—accelerating delivery and contributing to a 565% increase in visits and a 297% increase in time spent.

× ‹ ›

Workshop in progress — the full team reviewing each group’s input.

Systems thrive when design and engineering speak the same language.

Problem: Showmax’s product spanned nine platforms (Web, mobile, TV, and console), but the agency delivered the design system baked into static design files. Without shared understanding, each platform team interpreted and implemented components differently. Over time, this created design drift, inefficiencies, and inconsistent user experiences—a death by a thousand cuts.

Approach: I led the initiative end-to-end, facilitating cross-functional workshops and defining structures that enabled teams to sustain the system without constant design oversight. Together, we:

• Aligned language—terminology, tokens, patterns, and components.
• Established shared ownership by assigning both designers and developers to maintain the system.
• Documented transparently so teams could easily adopt and contribute.
• Structured communication by appointing design and engineering leads across teams to improve coordination.

Impact: The shared language and unified component library transformed delivery velocity and consistency across platforms. Teams used common terms and components, lowering the effort to ship, designers and engineers collaborated with fewer handoffs, and cross-platform experiences became measurably more cohesive.

× ‹ ›

A well-built design system in Figma is only half the step.

Investing in design systems is strategic infrastructure — not an optional extra.

Problem: I built strong design maturity through a robust Figma system, but limited front-end capacity and a lack of UX experience in engineering meant implementation lagged behind. Design system work was repeatedly deprioritized in favor of short-term delivery, and shifting product roadmaps made long-term alignment difficult. The result: platform inconsistencies, team inefficiencies—especially with engineering—and mounting technical and design debt that slowed future delivery.

Approach: When developing a new design system to support Oritain’s needs, I:

• Defined a comprehensive Figma system covering tokens, color styles, and components.
• Secured roadmap focus and resources, advocating for design system investment.
• Promoted scalable frameworks like Tailwind, Storybook, and UI libraries.
• Coached developers on component-based thinking, shared language, and Figma Dev Mode.
• Established ownership with dedicated design and engineering leads for the system.

Impact: Delivered a scalable design framework that ensured brand cohesion, team alignment, and faster design delivery through shared components and language.

However, a critical engineering decision—to build the UI system from scratch instead of theming an existing library—added implementation overhead, slowed iteration, and ultimately limited the system’s impact.

This outcome reinforced Lesson 1: a design system isn’t real until it lives in code. Unlike MTV, where we built directly into production and accelerated adoption, the lack of follow-through here made the cost of delay painfully clear: inconsistencies persisted, technical debt mounted, and system maturity stalled.

Which leads to Lesson 3: Delaying proper investment in a design system comes at a strategic cost.

Across MTV, Showmax, and Oritain, I encountered very different organizational problems—from siloed teams to multi-platform drift to under-resourced implementation. In each case, the impact of the design system effort reflected how well strategy, design, and engineering were aligned.

When systems lived in code and were supported across teams, they accelerated delivery, improved quality, and scaled design impact. When they didn’t, inconsistencies, inefficiencies, and debt compounded over time.

These experiences now shape how I lead design system strategy:

1. Design in code — A system isn’t real until it lives in production.
2. Build a shared language — Systems thrive when design and engineering speak the same language.
3. Treat design systems as strategy — Delaying them slows iteration and limits impact.

Going forward, I use these principles to align stakeholders early, prioritize engineering investment, and ensure design systems are built as strategic infrastructure, not design-only tools.