Scaling a Multi-Platform design system at CNN
Summary
Senior Product Designer
I led the creation of CNN’s first multi-platform design system, unifying digital experiences across TV, web, iOS, and Android. This initiative streamlined workflows, enhanced cross-platform consistency, and established a scalable foundation for innovation.
UX/UI
iOS/Android
TV
Web
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
OVERVIEW
CNN Digital is the world leader in online news, serving over 2.4 million users around the world.
At CNN, design fragmentation was a growing challenge. Teams working on TV, web, iOS, and Android operated in silos, each with its own design assets, processes, and visual language. Without a unified system, inconsistencies emerged, collaboration became cumbersome, and scaling design across platforms felt nearly impossible.
I led the creation of Vossi, CNN’s first multi-platform design system, to unify these digital experiences under one scalable foundation. Our goal was to streamline workflows, enhance cross-platform consistency, and create a flexible system that empowered both design and engineering to innovate faster.
This case study will take you through our journey—from a fragmented, disconnected ecosystem to a centralized design system that drives efficiency across teams, and finally to a platform-specific model. I’ll share how we structured Vossi, the challenges we tackled, and the impact it has had on design velocity, engineering handoff, and brand consistency.
Where it all started
When our squad started in early 2022 at CNN on the mobile apps team, we were handed out-dated Sketch files as the starting point for a design system. Our small, but mighty team migrated these Sketch files to Figma and set up version one of a scrappy mobile app design system, and it worked well for our immediate needs, but there were still inconsistencies and a lack of standardization across the organization's platforms and channels. So this began the start of efforts to move toward more visual design consistency and functional cohesion across all of CNN’s products and touch points.
Our old design system, previously in Sketch.
Migrating our old system from Sketch to Figma.
THE CHALLENGE
How do you create a unified design system that serves multiple teams and platforms while maintaining structure and scale?
CNN’s digital ecosystem was fragmented, with siloed teams working across web, iOS, Android, and TV. Each platform had its own design patterns, component structures, and workflows, leading to inconsistencies that hindered scalability and efficiency. Without a shared system, our teams struggled to maintain a cohesive brand identity and build products efficiently.
THE SOLUTION
Create a unified foundation for efficiency, consistency, and innovation, empowering scale of digital design & brand experience.
In early 2023, we started efforts to address these challenges and the goal was to create a centralized, unified framework of shared components, patterns, and governance structures that scaled across all digital products. By establishing and aligning our tokens at a foundational level, we established a streamlined, scalable system that empowered designers and engineers to build faster and more cohesively. We also leveraged Figma’s latest features—variables, theming, and advanced component properties— to scale faster and smarter.
Vossi, our first multi-platform design system.
GETTING STARTED
Research and kicking off the work
The initiative began with a comprehensive audit of CNN’s digital properties. I led a deep dive into component structures, typography systems, and theming inconsistencies across platforms. Through cross-functional collaboration with engineering and product teams, we identified key pain points and structured a roadmap for consolidation.
Key insights included:
Web, mobile, and TV typography lacked a unified structure
Component inconsistencies slowed down development and design workflows
Figma’s latest features offered untapped potential for efficiency
A snapshot of our siloed systems and experiences.
THE PROCESS
Unifying the Foundation
Our first step, was to assess the current state of design assets and identify inconsistencies. In the typography audit, we identified inconsistencies across web, mobile, and TV platforms. This allowed us to align type styles and ensure a unified visual language. From there, we established a robust tokenization structure, defining base and alias tokens to store key design decisions such as color, typography, and spacing, in a reusable, and platform-agnostic way. By leveraging a flexible token hierarchy, we enabled seamless adaptability across platforms while maintaining brand consistency.
Conducting a typography audit across web and mobile to align styles.
Evaluating component libraries across platforms to identify gaps and redundancies.
Mapping out color styles, spacing, and grid structures to determine areas for standardization.
Documenting inefficiencies in existing workflows to streamline future processes.
The new foundational structure of our design system.
Centralized Foundation Library
A robust component library ensures design consistency across platforms. Additionally, we partnered with engineering to start the development of a Figma-to-code plugin, to bridge the gap between design and development and automate the transfer of design tokens into production-ready code. Key steps included:
Built a scalable component library, including base components (typography, buttons, input fields) with variant-based structures for customization and cross-platform compatibility (iOS, Android, Web, TV).
Developed a systematic tokenization strategy, implementing design tokens for color, typography, and spacing to ensure a reusable, platform-agnostic foundation.
Optimized organization and naming conventions, creating structured systems for components, layers, and variables to enhance collaboration.
Enabled flexible theming and adaptability, leveraging Figma Variables to support multiple themes and streamline design workflows.
Problems with the Centralized Model
Our goal was to centralize everything into a single unified design system. This approach brought immediate benefits—standardized components, a shared design language, and a scalable foundation that dramatically improved efficiency. However, as we scaled, we realized that a rigid, one-size-fits-all system wasn’t ideal for every platform’s unique needs and the customization that needed to be available to our users and their specific channel's components.
Shifting to the Platform-Specific Approach
In late 2023, we realized that we needed a more flexible system to be able to scale across multiple platforms and use cases, while maintaining foundational cohesiveness. We were able to strike the right balance: a platform-specific model within a centralized foundation. By maintaining shared foundations (tokens, core components, and guidelines) while allowing for platform-specific adaptations, we empowered teams to design with both consistency and flexibility.
This approach ensured that each product maintained its distinct identity while still aligning with CNN’s overarching design principles. We empowered teams to maintain their individual systems, while the systems remain connected through our token architecture. This iterative evolution of Vossi was key to unlocking efficiency, collaboration, and innovation—proving that the best design systems aren’t just about standardization, but about adaptability.
Design Systems Inside Vossi
When we set out to build Vossi, our goal was to create a design system that could scale seamlessly across CNN’s diverse digital ecosystem—spanning web, mobile, audio, and connected TV (CTV). Rather than a one-size-fits-all approach, we structured Vossi as a foundational system with platform-specific layers, allowing for both consistency and flexibility. This structure enables us to maintain a unified design language while optimizing for the unique needs of each platform.
Vossi Foundations
At the heart of Vossi lies its foundational framework, which includes our design tokens, core components, and brand guidelines. We built a robust token system to ensure visual and functional consistency across platforms, covering essentials like typography, color, spacing, motion, and elevation. These foundational elements serve as the single source of truth, providing a scalable base that adapts to different platform requirements without sacrificing design cohesion.
Vossi Web
Vossi Web provides a responsive component library optimized for CNN’s web experiences. By leveraging core tokens, we balanced flexibility and consistency, ensuring teams could scale designs efficiently across different screen sizes and themes.
Vossi Mobile
For iOS and Android, we developed a dedicated mobile design system with platform-specific components, gestures, and adaptive layouts. Using Figma Variables, we streamlined theming and customization while ensuring alignment with native guidelines.
Vossi Audio
CNN’s audio platforms required a voice-first design approach, defining transcript styling, interactive elements, and voice UI patterns to create a cohesive and accessible listening experience.
Vossi CTV
For connected TV (CTV), we built a system designed for remote navigation, scalable typography, and motion patterns that enhance readability and usability in a lean-back environment.
Deep Dive: Vossi Mobile
When we set out to unify CNN’s digital experiences with Vossi, we knew mobile required a dedicated system tailored for native iOS and Android experiences. I led the design and implementation of the Vossi Mobile design system, ensuring it was scalable, adaptable, and aligned with native patterns while maintaining consistency with CNN’s broader design language.
By leveraging design tokens, reusable components, and advanced Figma features, we created a system that allowed our teams to build faster, maintain consistency, and scale efficiently across multiple mobile products. This deep dive explores the foundational framework, core content and video components, and our use of variables to optimize for flexibility.
Tokenization Framework
To ensure flexibility across platforms while maintaining a shared foundation, we built a structured tokenization system for Vossi Mobile. Design tokens store core design decisions like color, typography, and spacing in a reusable, platform-agnostic way. This structure ensured flexibility across light/dark themes, scalability across platforms, and streamlined handoff to engineering.
Mobile Content
At the heart of CNN’s mobile experience are highly visual, content-rich screens. We designed a robust component system to support core experiences, including Top News Feed: A modular card-based system that adapts across devices and screen sizes. Article Pages: Scalable layouts for headlines, media, and interactive elements. Your CNN: A personalized experience with saved content, recommendations, and account settings. Each of these components was designed using adaptive layouts, flexible spacing, and modular structures to ensure usability across different devices and content types.
Top News Feed
Article Page
Your CNN
Mobile Video
CNN’s mobile experience is video-first, requiring a design system that supports seamless playback, live streaming, and interactive engagement. Within Vossi Mobile, we built a flexible video component library, including Video Player Modules: Optimized for different screen orientations and aspect ratios. Live TV & Breaking News Alerts: Integrated UI elements for real-time updates. Interactive Overlays: Subtitles, closed captions, and on-screen controls for accessibility. By standardizing these components, we ensured a consistent, high-quality video experience across all CNN mobile properties.
Mobile App Video Experience
Mobile App Video Experience
Building in scalability with variables
To support multiple device types, themes, and platform-specific nuances, we leveraged Figma Variables to dynamically adjust components. This allowed us to create responsive designs without duplicating components, scale UI elements seamlessly across phone and tablet for iOS and Android and support multiple themes (light/dark mode) with a single component set.
Container component using variables to scale in mobile and tablet, and light and dark modes.
Governance & Adoption
For long-term success, we established a governance framework to maintain the integrity of the system as it evolved. We created comprehensive onboarding documentation and hosted cross-functional workshops to train designers, developers, and product teams on best practices. To foster engagement and continuous improvement, we implemented structured feedback loops, ensuring that insights from real-world usage informed future iterations of the system. Through these initiatives, we drove widespread adoption and positioned the design system as a core pillar of CNN’s digital strategy.
Documentation
To ensure seamless adoption, we built a comprehensive documentation site for the design system:
Guidelines & Best Practices: Clearly defined how to use components, including accessibility considerations.
Usage Examples: Provided real-world application examples across different platforms.
Figma Kits & Code References: Linked design files directly to engineering documentation for easy reference.
Video Walkthroughs & Onboarding Resources: Created training materials to help designers and engineers integrate the system into their workflow.
What I Led
Foundation Consolidation
Unified fragmented design assets into a centralized system, ensuring cross-platform consistency across TV, Web, iOS, and Android.
Build of Vossi Mobile
Led the design and implementation of the Vossi mobile design system, establishing a unified base for all of CNN's native mobile experiences.
Advanced Design Properties & Variables
Leveraged Figma variables and adaptive components to create dynamic, flexible design solutions tailored to diverse platform needs.
Scalable Architecture
Designed a future-proof system structure that evolves with business needs and technological advancements.
Streamlined Collaboration & Workflows
Optimized engagement models between design and engineering, reducing inefficiencies and accelerating product delivery.
Cohesive Design Language
Established a shared design foundation that fosters consistency across all user touchpoints, enhancing brand integrity and usability.
Scaling a Multi-Platform design system at CNN
Summary
Senior Product Designer
I led the creation of CNN’s first multi-platform design system, unifying digital experiences across TV, web, iOS, and Android. This initiative streamlined workflows, enhanced cross-platform consistency, and established a scalable foundation for innovation.
UX/UI
iOS/Android
TV
Web
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
OVERVIEW
CNN Digital is the world leader in online news, serving over 2.4 million users around the world.
At CNN, design fragmentation was a growing challenge. Teams working on TV, web, iOS, and Android operated in silos, each with its own design assets, processes, and visual language. Without a unified system, inconsistencies emerged, collaboration became cumbersome, and scaling design across platforms felt nearly impossible.
I led the creation of Vossi, CNN’s first multi-platform design system, to unify these digital experiences under one scalable foundation. Our goal was to streamline workflows, enhance cross-platform consistency, and create a flexible system that empowered both design and engineering to innovate faster.
This case study will take you through our journey—from a fragmented, disconnected ecosystem to a centralized design system that drives efficiency across teams, and finally to a platform-specific model. I’ll share how we structured Vossi, the challenges we tackled, and the impact it has had on design velocity, engineering handoff, and brand consistency.
Where it all started
When our squad started in early 2022 at CNN on the mobile apps team, we were handed out-dated Sketch files as the starting point for a design system. Our small, but mighty team migrated these Sketch files to Figma and set up version one of a scrappy mobile app design system, and it worked well for our immediate needs, but there were still inconsistencies and a lack of standardization across the organization's platforms and channels. So this began the start of efforts to move toward more visual design consistency and functional cohesion across all of CNN’s products and touch points.
Our old design system, previously in Sketch.
Migrating our old system from Sketch to Figma.
THE CHALLENGE
How do you create a unified design system that serves multiple teams and platforms while maintaining structure and scale?
CNN’s digital ecosystem was fragmented, with siloed teams working across web, iOS, Android, and TV. Each platform had its own design patterns, component structures, and workflows, leading to inconsistencies that hindered scalability and efficiency. Without a shared system, our teams struggled to maintain a cohesive brand identity and build products efficiently.
THE SOLUTION
Create a unified foundation for efficiency, consistency, and innovation, empowering scale of digital design & brand experience.
In early 2023, we started efforts to address these challenges and the goal was to create a centralized, unified framework of shared components, patterns, and governance structures that scaled across all digital products. By establishing and aligning our tokens at a foundational level, we established a streamlined, scalable system that empowered designers and engineers to build faster and more cohesively. We also leveraged Figma’s latest features—variables, theming, and advanced component properties— to scale faster and smarter.
Vossi, our first multi-platform design system.
GETTING STARTED
Research and kicking off the work
The initiative began with a comprehensive audit of CNN’s digital properties. I led a deep dive into component structures, typography systems, and theming inconsistencies across platforms. Through cross-functional collaboration with engineering and product teams, we identified key pain points and structured a roadmap for consolidation.
Key insights included:
Web, mobile, and TV typography lacked a unified structure
Component inconsistencies slowed down development and design workflows
Figma’s latest features offered untapped potential for efficiency
A snapshot of our siloed systems and experiences.
THE PROCESS
Unifying the Foundation
Our first step, was to assess the current state of design assets and identify inconsistencies. In the typography audit, we identified inconsistencies across web, mobile, and TV platforms. This allowed us to align type styles and ensure a unified visual language. From there, we established a robust tokenization structure, defining base and alias tokens to store key design decisions such as color, typography, and spacing, in a reusable, and platform-agnostic way. By leveraging a flexible token hierarchy, we enabled seamless adaptability across platforms while maintaining brand consistency.
Conducting a typography audit across web and mobile to align styles.
Evaluating component libraries across platforms to identify gaps and redundancies.
Mapping out color styles, spacing, and grid structures to determine areas for standardization.
Documenting inefficiencies in existing workflows to streamline future processes.
The new foundational structure of our design system.
Centralized Foundation Library
A robust component library ensures design consistency across platforms. Additionally, we partnered with engineering to start the development of a Figma-to-code plugin, to bridge the gap between design and development and automate the transfer of design tokens into production-ready code. Key steps included:
Built a scalable component library, including base components (typography, buttons, input fields) with variant-based structures for customization and cross-platform compatibility (iOS, Android, Web, TV).
Developed a systematic tokenization strategy, implementing design tokens for color, typography, and spacing to ensure a reusable, platform-agnostic foundation.
Optimized organization and naming conventions, creating structured systems for components, layers, and variables to enhance collaboration.
Enabled flexible theming and adaptability, leveraging Figma Variables to support multiple themes and streamline design workflows.
Problems with the Centralized Model
Our goal was to centralize everything into a single unified design system. This approach brought immediate benefits—standardized components, a shared design language, and a scalable foundation that dramatically improved efficiency. However, as we scaled, we realized that a rigid, one-size-fits-all system wasn’t ideal for every platform’s unique needs and the customization that needed to be available to our users and their specific channel's components.
Shifting to the Platform-Specific Approach
In late 2023, we realized that we needed a more flexible system to be able to scale across multiple platforms and use cases, while maintaining foundational cohesiveness. We were able to strike the right balance: a platform-specific model within a centralized foundation. By maintaining shared foundations (tokens, core components, and guidelines) while allowing for platform-specific adaptations, we empowered teams to design with both consistency and flexibility.
This approach ensured that each product maintained its distinct identity while still aligning with CNN’s overarching design principles. We empowered teams to maintain their individual systems, while the systems remain connected through our token architecture. This iterative evolution of Vossi was key to unlocking efficiency, collaboration, and innovation—proving that the best design systems aren’t just about standardization, but about adaptability.
Design Systems Inside Vossi
When we set out to build Vossi, our goal was to create a design system that could scale seamlessly across CNN’s diverse digital ecosystem—spanning web, mobile, audio, and connected TV (CTV). Rather than a one-size-fits-all approach, we structured Vossi as a foundational system with platform-specific layers, allowing for both consistency and flexibility. This structure enables us to maintain a unified design language while optimizing for the unique needs of each platform.
Vossi Foundations
At the heart of Vossi lies its foundational framework, which includes our design tokens, core components, and brand guidelines. We built a robust token system to ensure visual and functional consistency across platforms, covering essentials like typography, color, spacing, motion, and elevation. These foundational elements serve as the single source of truth, providing a scalable base that adapts to different platform requirements without sacrificing design cohesion.
Vossi Web
Vossi Web provides a responsive component library optimized for CNN’s web experiences. By leveraging core tokens, we balanced flexibility and consistency, ensuring teams could scale designs efficiently across different screen sizes and themes.
Vossi Mobile
For iOS and Android, we developed a dedicated mobile design system with platform-specific components, gestures, and adaptive layouts. Using Figma Variables, we streamlined theming and customization while ensuring alignment with native guidelines.
Vossi Audio
CNN’s audio platforms required a voice-first design approach, defining transcript styling, interactive elements, and voice UI patterns to create a cohesive and accessible listening experience.
Vossi CTV
For connected TV (CTV), we built a system designed for remote navigation, scalable typography, and motion patterns that enhance readability and usability in a lean-back environment.
Deep Dive: Vossi Mobile
When we set out to unify CNN’s digital experiences with Vossi, we knew mobile required a dedicated system tailored for native iOS and Android experiences. I led the design and implementation of the Vossi Mobile design system, ensuring it was scalable, adaptable, and aligned with native patterns while maintaining consistency with CNN’s broader design language.
By leveraging design tokens, reusable components, and advanced Figma features, we created a system that allowed our teams to build faster, maintain consistency, and scale efficiently across multiple mobile products. This deep dive explores the foundational framework, core content and video components, and our use of variables to optimize for flexibility.
Tokenization Framework
To ensure flexibility across platforms while maintaining a shared foundation, we built a structured tokenization system for Vossi Mobile. Design tokens store core design decisions like color, typography, and spacing in a reusable, platform-agnostic way. This structure ensured flexibility across light/dark themes, scalability across platforms, and streamlined handoff to engineering.
Mobile Content
At the heart of CNN’s mobile experience are highly visual, content-rich screens. We designed a robust component system to support core experiences, including Top News Feed: A modular card-based system that adapts across devices and screen sizes. Article Pages: Scalable layouts for headlines, media, and interactive elements. Your CNN: A personalized experience with saved content, recommendations, and account settings. Each of these components was designed using adaptive layouts, flexible spacing, and modular structures to ensure usability across different devices and content types.
Top News Feed
Article Page
Your CNN
Mobile Video
CNN’s mobile experience is video-first, requiring a design system that supports seamless playback, live streaming, and interactive engagement. Within Vossi Mobile, we built a flexible video component library, including Video Player Modules: Optimized for different screen orientations and aspect ratios. Live TV & Breaking News Alerts: Integrated UI elements for real-time updates. Interactive Overlays: Subtitles, closed captions, and on-screen controls for accessibility. By standardizing these components, we ensured a consistent, high-quality video experience across all CNN mobile properties.
Mobile App Video Experience
Mobile App Video Experience
Building in scalability with variables
To support multiple device types, themes, and platform-specific nuances, we leveraged Figma Variables to dynamically adjust components. This allowed us to create responsive designs without duplicating components, scale UI elements seamlessly across phone and tablet for iOS and Android and support multiple themes (light/dark mode) with a single component set.
Container component using variables to scale in mobile and tablet, and light and dark modes.
Governance & Adoption
For long-term success, we established a governance framework to maintain the integrity of the system as it evolved. We created comprehensive onboarding documentation and hosted cross-functional workshops to train designers, developers, and product teams on best practices. To foster engagement and continuous improvement, we implemented structured feedback loops, ensuring that insights from real-world usage informed future iterations of the system. Through these initiatives, we drove widespread adoption and positioned the design system as a core pillar of CNN’s digital strategy.
Documentation
To ensure seamless adoption, we built a comprehensive documentation site for the design system:
Guidelines & Best Practices: Clearly defined how to use components, including accessibility considerations.
Usage Examples: Provided real-world application examples across different platforms.
Figma Kits & Code References: Linked design files directly to engineering documentation for easy reference.
Video Walkthroughs & Onboarding Resources: Created training materials to help designers and engineers integrate the system into their workflow.
What I Led
Foundation Consolidation
Unified fragmented design assets into a centralized system, ensuring cross-platform consistency across TV, Web, iOS, and Android.
Build of Vossi Mobile
Led the design and implementation of the Vossi mobile design system, establishing a unified base for all of CNN's native mobile experiences.
Advanced Design Properties & Variables
Leveraged Figma variables and adaptive components to create dynamic, flexible design solutions tailored to diverse platform needs.
Scalable Architecture
Designed a future-proof system structure that evolves with business needs and technological advancements.
Streamlined Collaboration & Workflows
Optimized engagement models between design and engineering, reducing inefficiencies and accelerating product delivery.
Cohesive Design Language
Established a shared design foundation that fosters consistency across all user touchpoints, enhancing brand integrity and usability.
Scaling a Multi-Platform design system at CNN
Summary
Senior Product Designer
I led the creation of CNN’s first multi-platform design system, unifying digital experiences across TV, web, iOS, and Android. This initiative streamlined workflows, enhanced cross-platform consistency, and established a scalable foundation for innovation.
UX/UI
iOS/Android
TV
Web
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
Impact
Unified design language across CNN’s digital products
Reduced design inconsistencies and improved scalability
Increased design and engineering efficiency with tokenization
Established a governance model for sustainable system growth
Enhanced accessibility and cross-functional collaboration
60+
Designers
5
Platforms
8
Months
OVERVIEW
CNN Digital is the world leader in online news, serving over 2.4 million users around the world.
At CNN, design fragmentation was a growing challenge. Teams working on TV, web, iOS, and Android operated in silos, each with its own design assets, processes, and visual language. Without a unified system, inconsistencies emerged, collaboration became cumbersome, and scaling design across platforms felt nearly impossible.
I led the creation of Vossi, CNN’s first multi-platform design system, to unify these digital experiences under one scalable foundation. Our goal was to streamline workflows, enhance cross-platform consistency, and create a flexible system that empowered both design and engineering to innovate faster.
This case study will take you through our journey—from a fragmented, disconnected ecosystem to a centralized design system that drives efficiency across teams, and finally to a platform-specific model. I’ll share how we structured Vossi, the challenges we tackled, and the impact it has had on design velocity, engineering handoff, and brand consistency.
Where it all started
When our squad started in early 2022 at CNN on the mobile apps team, we were handed out-dated Sketch files as the starting point for a design system. Our small, but mighty team migrated these Sketch files to Figma and set up version one of a scrappy mobile app design system, and it worked well for our immediate needs, but there were still inconsistencies and a lack of standardization across the organization's platforms and channels. So this began the start of efforts to move toward more visual design consistency and functional cohesion across all of CNN’s products and touch points.
Our old design system, previously in Sketch.
Migrating our old system from Sketch to Figma.
THE CHALLENGE
How do you create a unified design system that serves multiple teams and platforms while maintaining structure and scale?
CNN’s digital ecosystem was fragmented, with siloed teams working across web, iOS, Android, and TV. Each platform had its own design patterns, component structures, and workflows, leading to inconsistencies that hindered scalability and efficiency. Without a shared system, our teams struggled to maintain a cohesive brand identity and build products efficiently.
THE SOLUTION
Create a unified foundation for efficiency, consistency, and innovation, empowering scale of digital design & brand experience.
In early 2023, we started efforts to address these challenges and the goal was to create a centralized, unified framework of shared components, patterns, and governance structures that scaled across all digital products. By establishing and aligning our tokens at a foundational level, we established a streamlined, scalable system that empowered designers and engineers to build faster and more cohesively. We also leveraged Figma’s latest features—variables, theming, and advanced component properties— to scale faster and smarter.
Vossi, our first multi-platform design system.
GETTING STARTED
Research and kicking off the work
The initiative began with a comprehensive audit of CNN’s digital properties. I led a deep dive into component structures, typography systems, and theming inconsistencies across platforms. Through cross-functional collaboration with engineering and product teams, we identified key pain points and structured a roadmap for consolidation.
Key insights included:
Web, mobile, and TV typography lacked a unified structure
Component inconsistencies slowed down development and design workflows
Figma’s latest features offered untapped potential for efficiency
A snapshot of our siloed systems and experiences.
THE PROCESS
Unifying the Foundation
Our first step, was to assess the current state of design assets and identify inconsistencies. In the typography audit, we identified inconsistencies across web, mobile, and TV platforms. This allowed us to align type styles and ensure a unified visual language. From there, we established a robust tokenization structure, defining base and alias tokens to store key design decisions such as color, typography, and spacing, in a reusable, and platform-agnostic way. By leveraging a flexible token hierarchy, we enabled seamless adaptability across platforms while maintaining brand consistency.
Conducting a typography audit across web and mobile to align styles.
Evaluating component libraries across platforms to identify gaps and redundancies.
Mapping out color styles, spacing, and grid structures to determine areas for standardization.
Documenting inefficiencies in existing workflows to streamline future processes.
The new foundational structure of our design system.
Centralized Foundation Library
A robust component library ensures design consistency across platforms. Additionally, we partnered with engineering to start the development of a Figma-to-code plugin, to bridge the gap between design and development and automate the transfer of design tokens into production-ready code. Key steps included:
Built a scalable component library, including base components (typography, buttons, input fields) with variant-based structures for customization and cross-platform compatibility (iOS, Android, Web, TV).
Developed a systematic tokenization strategy, implementing design tokens for color, typography, and spacing to ensure a reusable, platform-agnostic foundation.
Optimized organization and naming conventions, creating structured systems for components, layers, and variables to enhance collaboration.
Enabled flexible theming and adaptability, leveraging Figma Variables to support multiple themes and streamline design workflows.
Problems with the Centralized Model
Our goal was to centralize everything into a single unified design system. This approach brought immediate benefits—standardized components, a shared design language, and a scalable foundation that dramatically improved efficiency. However, as we scaled, we realized that a rigid, one-size-fits-all system wasn’t ideal for every platform’s unique needs and the customization that needed to be available to our users and their specific channel's components.
Shifting to the Platform-Specific Approach
In late 2023, we realized that we needed a more flexible system to be able to scale across multiple platforms and use cases, while maintaining foundational cohesiveness. We were able to strike the right balance: a platform-specific model within a centralized foundation. By maintaining shared foundations (tokens, core components, and guidelines) while allowing for platform-specific adaptations, we empowered teams to design with both consistency and flexibility.
This approach ensured that each product maintained its distinct identity while still aligning with CNN’s overarching design principles. We empowered teams to maintain their individual systems, while the systems remain connected through our token architecture. This iterative evolution of Vossi was key to unlocking efficiency, collaboration, and innovation—proving that the best design systems aren’t just about standardization, but about adaptability.
Design Systems Inside Vossi
When we set out to build Vossi, our goal was to create a design system that could scale seamlessly across CNN’s diverse digital ecosystem—spanning web, mobile, audio, and connected TV (CTV). Rather than a one-size-fits-all approach, we structured Vossi as a foundational system with platform-specific layers, allowing for both consistency and flexibility. This structure enables us to maintain a unified design language while optimizing for the unique needs of each platform.
Vossi Foundations
At the heart of Vossi lies its foundational framework, which includes our design tokens, core components, and brand guidelines. We built a robust token system to ensure visual and functional consistency across platforms, covering essentials like typography, color, spacing, motion, and elevation. These foundational elements serve as the single source of truth, providing a scalable base that adapts to different platform requirements without sacrificing design cohesion.
Vossi Web
Vossi Web provides a responsive component library optimized for CNN’s web experiences. By leveraging core tokens, we balanced flexibility and consistency, ensuring teams could scale designs efficiently across different screen sizes and themes.
Vossi Mobile
For iOS and Android, we developed a dedicated mobile design system with platform-specific components, gestures, and adaptive layouts. Using Figma Variables, we streamlined theming and customization while ensuring alignment with native guidelines.
Vossi Audio
CNN’s audio platforms required a voice-first design approach, defining transcript styling, interactive elements, and voice UI patterns to create a cohesive and accessible listening experience.
Vossi CTV
For connected TV (CTV), we built a system designed for remote navigation, scalable typography, and motion patterns that enhance readability and usability in a lean-back environment.
Deep Dive: Vossi Mobile
When we set out to unify CNN’s digital experiences with Vossi, we knew mobile required a dedicated system tailored for native iOS and Android experiences. I led the design and implementation of the Vossi Mobile design system, ensuring it was scalable, adaptable, and aligned with native patterns while maintaining consistency with CNN’s broader design language.
By leveraging design tokens, reusable components, and advanced Figma features, we created a system that allowed our teams to build faster, maintain consistency, and scale efficiently across multiple mobile products. This deep dive explores the foundational framework, core content and video components, and our use of variables to optimize for flexibility.
Tokenization Framework
To ensure flexibility across platforms while maintaining a shared foundation, we built a structured tokenization system for Vossi Mobile. Design tokens store core design decisions like color, typography, and spacing in a reusable, platform-agnostic way. This structure ensured flexibility across light/dark themes, scalability across platforms, and streamlined handoff to engineering.
Mobile Content
At the heart of CNN’s mobile experience are highly visual, content-rich screens. We designed a robust component system to support core experiences, including Top News Feed: A modular card-based system that adapts across devices and screen sizes. Article Pages: Scalable layouts for headlines, media, and interactive elements. Your CNN: A personalized experience with saved content, recommendations, and account settings. Each of these components was designed using adaptive layouts, flexible spacing, and modular structures to ensure usability across different devices and content types.
Top News Feed
Article Page
Your CNN
Mobile Video
CNN’s mobile experience is video-first, requiring a design system that supports seamless playback, live streaming, and interactive engagement. Within Vossi Mobile, we built a flexible video component library, including Video Player Modules: Optimized for different screen orientations and aspect ratios. Live TV & Breaking News Alerts: Integrated UI elements for real-time updates. Interactive Overlays: Subtitles, closed captions, and on-screen controls for accessibility. By standardizing these components, we ensured a consistent, high-quality video experience across all CNN mobile properties.
Mobile App Video Experience
Mobile App Video Experience
Building in scalability with variables
To support multiple device types, themes, and platform-specific nuances, we leveraged Figma Variables to dynamically adjust components. This allowed us to create responsive designs without duplicating components, scale UI elements seamlessly across phone and tablet for iOS and Android and support multiple themes (light/dark mode) with a single component set.
Container component using variables to scale in mobile and tablet, and light and dark modes.
Governance & Adoption
For long-term success, we established a governance framework to maintain the integrity of the system as it evolved. We created comprehensive onboarding documentation and hosted cross-functional workshops to train designers, developers, and product teams on best practices. To foster engagement and continuous improvement, we implemented structured feedback loops, ensuring that insights from real-world usage informed future iterations of the system. Through these initiatives, we drove widespread adoption and positioned the design system as a core pillar of CNN’s digital strategy.
Documentation
To ensure seamless adoption, we built a comprehensive documentation site for the design system:
Guidelines & Best Practices: Clearly defined how to use components, including accessibility considerations.
Usage Examples: Provided real-world application examples across different platforms.
Figma Kits & Code References: Linked design files directly to engineering documentation for easy reference.
Video Walkthroughs & Onboarding Resources: Created training materials to help designers and engineers integrate the system into their workflow.
What I Led
Foundation Consolidation
Unified fragmented design assets into a centralized system, ensuring cross-platform consistency across TV, Web, iOS, and Android.
Build of Vossi Mobile
Led the design and implementation of the Vossi mobile design system, establishing a unified base for all of CNN's native mobile experiences.
Advanced Design Properties & Variables
Leveraged Figma variables and adaptive components to create dynamic, flexible design solutions tailored to diverse platform needs.
Scalable Architecture
Designed a future-proof system structure that evolves with business needs and technological advancements.
Streamlined Collaboration & Workflows
Optimized engagement models between design and engineering, reducing inefficiencies and accelerating product delivery.
Cohesive Design Language
Established a shared design foundation that fosters consistency across all user touchpoints, enhancing brand integrity and usability.
Lessons Learned
Building CNN’s first multi-platform design system taught us that balance, collaboration, and adaptability are key to long-term success. Here’s what I learned along the way:
Balancing Consistency with Flexibility
A single, centralized system didn’t work for every platform.
Mobile required native-first solutions for touch interactions, navigation, and performance.
A decentralized approach allowed teams to innovate while maintaining core consistency.
Collaborate Early & Often
Design systems thrive when teams co-own them—alignment is key.
Involving engineers early eliminated misalignment, reduced rework, and accelerated adoption.
Open collaboration built trust and strengthened the system.
Embrace New Technologies
Leveraged Figma Variables and Component Properties to streamline theming and eliminate redundancy.
Staying ahead of new design tools ensured scalability and efficiency.
Experimentation with new workflows optimized the system’s adaptability.
Adapt & Iterate
A design system is never "done"—real-world use revealed gaps.
Refined governance, improved documentation, and optimized workflows to enhance usability.
Flexibility wasn’t a compromise—it was essential for growth and adoption.
The Team
3 Design Systems Designers
1 UX Copywriter
1 Accessibility Specialist
5 Engineers
THE CONNECT
06
Let's Chat
I’m always excited to connect and discuss new opportunities. For a deeper dive into my design process and detailed case studies, feel free to reach out. I’d love to share more about my work and how I approach crafting thoughtful, user-centered experiences. You can also view my resume for more details about my expertise.
© 2025, Ericka Henderson.