The Mission: To unify three distinct network brands under a single-minded design system that captures the spirit of each while maintaining a shared core. My goal was to move beyond a simple library of styles to build a comprehensive ecosystem that serves as the foundation for all digital touchpoints.
The Result: A dynamic, scalable product that delivers efficiency for designers and consistency for stakeholders. By treating the design system as a living product, I established a unified visual language that empowers teams to build faster and with greater precision across mobile, web, and connected TV.
I embraced Atomic Design Principles to construct a system that is both sustainable and highly scalable. By breaking interfaces down into fundamental "atoms" and assembling them into complex components, I streamlined the development process, fostering a level of adaptability that allows the system to evolve alongside the brands.
To reduce maintenance and engineering debt, I re-architected our button system around a singular "base" component. By utilizing conditional statements and nested properties, I aligned our design methodology with engineering logic, ensuring that a single change at the root propagates seamlessly throughout the entire ecosystem.
Icons are the visual anchors of the user journey. I standardized a meticulously crafted library that transcends language barriers to communicate information intuitively. This system ensures brand recognition remains consistent, promoting usability and aesthetic harmony across every interface.
The palette is designed for versatility, featuring a robust neutral scale complemented by unique primary, secondary, and gradient palettes for each brand. For typography, we standardized on Open Sans, utilizing a percentage-based scale for line heights and four distinct weights. This minimalist scale ensures a legible, premium experience optimized specifically for streaming media on all viewports.
Leveraging Figma’s variable tokens, I significantly reduced the maintenance cost of our design system. By tokenizing colors, spacing, and grids, I facilitated a viewport-centric approach that allows design solutions to adapt automatically to diverse screen sizes and resolutions, accelerating the prototyping and scaling process.
Design is only as good as its implementation. I developed a detailed specification framework that highlights layout, anatomy, spacing, and instance properties. This documentation serves as a vital bridge during developer handoffs, fostering clear communication and collaborative critiques within cross-functional teams.
