Year
2022
Client
CNN
PROJECT TYPE
DESIGN SYSTEM
CNN Digital is the world leader in online news, serving over 2.4 million users around the world and design fragmentation was a growing challenge.
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.
Create a unified foundation for efficiency, consistency, and innovation, empowering scale of digital design & brand experience.
We kicked off 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.
When our squad started 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 a more unified approach.
Establish a precedent for design, engineering and innovation that consistently maintains the CNN brand and elite industry design standards.
For Users:
Create a consistent, flexible and intuitive digital experience across every platform for users, maintaining brand trust and CNN’s voice.
For CNN:
Reduce design and engineering duplication at scale and enable experimentation without rebuilding from scratch.
I co-led the consolidation efforts of CNN's multi-platform design system foundation and owned design and implementation of the Vossi Mobile App design system.
We audited CNN's typography, color, and components, then unified the foundations into shared design principles and a single source of truth in tokens and variables. From there I built reusable, scalable mobile app components, established the governance and contribution framework, and tested and rolled out the system with engineering and product partners through roadshows.
During this process, we realized that a fully centralized system created limitations as teams and platforms scaled. To support flexibility without losing consistency, we evolved toward a platform-specific model built on the same shared foundational system we had created.
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.
Vossi set the precedent for scaling product experiences, establishing a foundation that continues to evolve over time.
Supporting new features, platforms, and new ways of working, it positioned the organization as a driver of both operational efficiency and long-term innovation.
