Case Study: Kick-starting the Vossi Design System at CNN. The first 6 months.

Role: Senior Staff Product Designer for the CNN Vossi Design System

Introduction

When I joined the CNN Product Design team in 2022, the Vossi Design System was in its early stages of maturity. My role was to help elevate and expand the design system, building it from the ground up to create a cohesive and scalable framework that could meet the growing needs of CNN's diverse product design teams.

Opportunity

Upon joining, my immediate goal was to organize and increase the system’s footprint. Key initiatives included transferring and enhancing design kits, starting a new documentation site, managing intake and governance, setting up office hours, fostering collaboration across teams, and establishing new processes and ceremonies all while a major CMS migration was taking place. This case study highlights my contributions and the impact I made as the sole contributor to the Vossi Design System during its critical first six months.

Challenge

Primary Challenge: Establish processes for design kit building, information architecture and content development for the documentation site, as well as set up office hours, intake, and collaboration workflows, all as a one-person contributing team.

Problem: Assets were scattered across various locations including Dropbox, GitHub, Abstract, Sketch, Miro, and SharePoint, without centralized management or maintenance.

Research, Analysis, and Strategy

Assessment: My first step was a deep dive into the existing design system assets, uncovering that many resources—like those in the Sketch Design Kit and GitHub documentation—were outdated and scattered across multiple platforms. This made maintaining consistency and efficiency a challenge. To tackle this, I interviewed stakeholders and gathered input from various product design vertical teams to pinpoint foundational needs for core component design kits. I then evaluated the current state of assets, categorized their readiness and determined necessary actions—such as adding, editing, discarding, consolidating, relocating, or archiving them. I also developed a feedback analysis to highlight pain points and used this information to build a backlog and roadmap.

Planning and Strategy: With the assessment complete, I prioritized key actions to streamline and elevate the design system:

  • Build Initial Figma Design Kit: I identified which foundational and component items needed to be moved from Sketch to Figma.

  • Centralize Assets: I began consolidating assets from various platforms into a unified Figma design kit, starting with the Core Web.

  • Formalize Processes: I set up clear intake and governance workflows, including contribution checklists and educational ‘how-tos’ for designers interested in contributing, ensuring everyone was aligned and empowered.

  • Develop Roadmaps: I created detailed backlogs with timelines, guiding the ongoing development and scaling of the design system to meet the needs of the growing design community at CNN.

Implementation and Expansion of the Vossi Design System

Foundation Design Kit Setup and Governance: As the sole driver, I established the foundational structure of the Vossi Design System by transferring core components and design foundations—such as color, typography, and grid—from Sketch to a new, centralized Figma design kit within the new Vossi DS Figma Project area. I also set up intake and governance workflows and initiated regular Vossi office hours—weekly touchpoints where product managers, engineers, and designers could align, discuss, and resolve design system-related issues. These sessions were instrumental in understanding component updates and new requests that would inform future design kit work.

Team Expansion and Process Development: At the six-month mark, I led the training and onboarding of new hires, including a designer and content writer, which allowed us to better support over 30 CNN product designers and meet the expanding needs of the product and engineering teams. I introduced new design system ceremonies such as product design check-ins, team syncs, and demos to improve communication and alignment. Additionally, I pioneered a hybrid intake model, balancing centralized governance with federated design contributions.

Documentation, Education, and Relationship Building: I spearheaded the proof of concept and eventual creation of a new DS documentation site, overseeing the information architecture, content development, and education efforts to familiarize the broader CNN design community with best practices and design system principles. To ensure the system evolved in line with organizational needs, I actively built relationships across product teams, conducting regular outreach and check-ins.

Design System Architecture and Component Development: I played a pivotal role in unifying Figma Design Kits across diverse product verticals, ensuring consistency in design implementation. I led the development of core components, tokens, and variables, progressing from simple to complex component building to meet a wide range of design requirements. Additionally, I started comprehensive design audits to identify areas for improvement and ensure adherence to design system standards across all projects.

Summary: Results, Impact, and Key Takeaways

Quantitative Results: In six months, expanded the design system team, growing from a solo effort to include a dedicated designer and content writer. Created a new Figma design kit while also increasing the number of foundational and component and icon items within the Figma design kit, enhancing the design system's breadth and usability.

Qualitative Feedback: Received positive feedback from designers and stakeholders who felt the design system made an improved impact in a short amount of time. The design kit was embraced across teams, and its impact demonstrated how it upped the consistency and efficiency of CNN’s design work.

Success Stories: Put together demos that showed off the design system’s positive impact across different teams at CNN. This highlighted how streamlined processes and a cohesive design approach made a difference in product outcomes.

Key Takeaways: Getting stakeholders involved early and keeping feedback loops open were key to making the design system work. Regular weekly or bi-weekly communication and flexible processes helped ensure it met the evolving needs and kept everyone on the same page. 

Successes and Challenges: Clear communication and well-structured processes were crucial wins. But as the initial solo contributor, managing the broad scope was definitely a challenge, highlighting the need for scalable governance and more team support as our system grew. 

Summary: By combining leadership, stronger collaboration across teams, consolidation, education, and asset building, I elevated the CNN Vossi Design System, setting new standards and advancing its overall design maturity.