CNN CMS DESIGN SYSTEM

—

When I first joined CNN to help tackle creating a new in house CMS, one of the biggest struggles was designing without a design system. Because they were leveraging an open source CMS (Clay) that was pulling from multiple other open source libraries (Material Design, Keen UI, Quill Text Editor, and more) it was becoming increasingly difficult to track what changes would affect what component, and if we even had any control over the component at all.

I took the initiative to create a design system that would allow for future designers to leverage and contribute to, making everyone's lives easier. Thus Spectra was born!

SYSTEM AUDIT

I started by conducting a system audit. This included documenting each and every single element, where it's used, how it's used, and how it behaves.

I documented every single component used in the system with screenshots, categorized and labeled them, then worked on consolidating styles.

FIGMA COMPONENTS

There were no design resources for any of these libraries, so I recreated each and every component by scratch which included creating the component in Figma, applying autolayout styles, creating varients, and defining and applying text and color styles.

DOCUMENTATION

Once I had created all of the components and had them in a usable statel, i worked on adding documentation for how to use. This will provide guidance for other teams to start using the system effectively.