Powering CNN’s International News Network

The Challenge

CNN needed an established and uniform system for their website. They needed to maintain brand awareness across the platform, which led to inconsistencies and long load times. As they moved to a new platform system called Clay, they wanted to find ways to utilize designs to increase readership and engagement.

Pixel Commerce was hired to work with their in-house design team to help make the new design system cohesive, accessible and on-brand. We also needed to work effectively with the myriad of in-house design teams already on the project.

The Approach

We started by doing an audit of the current slate of CNN features – elements such as typography, colors and various components. We whittled down redundancies and created a sketch library of the elements needed – tools, typography, colors, logos, components, patterns, and behaviors.

We also prepared documents and rule sets for the use of each element, to ensure consistent and on-brand use for subsequent design teams.

With the audit completed, Pixel Commerce also took part in the new CNN design system, conducting user testing to ensure that documented elements worked as designed.

The Outcome

With a UI library and rules set, we created a strong foundation for subsequent design teams. We provided documentation, design files and templates for the new CNN design system.

Key Takeaways

Developers can utilize the templates and documentation we provided, which means a high level of consistency can be maintained.