CNN
Powering a global news network with scalability in mind.
Task
Define, design and document the design system features
Project overview
CNN’s design system, Vossi, was still in its infancy and growing when I joined the project. The international brand needed a system that could respond to their developing portfolio of sub-brands and new business ventures.
- So we created a design system that could accommodate for the following:
- Design tokens for easy scalability & maintainability
- Facilitating more immediate sharing of breaking news & high-priority shares
- Unique architecture that capitalized on primary brand guidelines
- Newly established design patterns for cohesive, brand-wide usage
Outcome
I coordinated with the lead designer that created CNN’s current digital design system, which has directly and positively affected CNN’s reputation as a leader in its industry and a globally recognizable brand.
Our work allowed CNN to break stories even faster, as the design system could better account for news that had been flagged as high-priority.
Building from the ground up
Design tokens – the foundation
Design tokens are the foundation to any system. CNN used JSON to deploy their tokens to various parts of their org for consumption by different platforms (e.g., mobile, web, show broadcasts, etc). Each team consumed these design tokens to construct their style sheets.
Grid layout – the structure
As CNN is a story-driven platform, the grid had to ensure that content was easily viewable from any device. The current system naturally allows for various page aspects to respond to the content, whether articles or videos, that still maintains the highly-recognizable CNN brand look.
Page templates – creating consistency
Much of CNN’s story flow follows a particular theme and structure. Sub-brands follow the same structure with their own unique brand flare. We were successful in linking the consistent brand pattern with the needs of each sub-brand and integrating the system with CNN’s internal CMS. In doing this, breaking news and other high-priority shares could be expedited within the same org without delay.
Recap
By focusing on creating design elements that connected the whole of CNN’s brand portfolio, we were successful in meeting the company’s needs and having a positive impact on a brand globally recognized as a leader in its industry.