CNN.com

The new design revolutionized the CNN site architecture, giving editors new flexibility to build a variety of pages quickly and easily. We also wanted to give users a highly impactful, structured and visually browsing experience throughout the site.

This editorial flexibility and visual impact is especially prevalent on the CNN Homepage, which now adapts seamlessly to unexpected changes in the news cycle, providing immediate context when news breaks.

The redesign of the article featured dramatic full-width page-top images, galleries and video collections, giving users an immersive experience on all content pages. For the first time ever, all embedded content and media elements reflowed elegantly across devices.

The redesign featured robust new special coverage, show and author pages, each showcasing CNN Digital’s breadth of programming offerings and on-air and digital talent.

CNN.com is built using an atomic model of components — story elements (headlines, images) combine to form cards, cards combine to form containers, and containers are arranged in responsive zone layouts to create pages.

I worked closely with editorial stakeholders to conceptualize, build and iterate the card, container and zone model, determining reflow across viewports, and assuring the information architecture was clear and usable.

Initial designs took heavy cues from CNN’s on-air graphics, featuring deep blues, heavy typography and skeuomorphic elements throughout.

In breaking news scenarios, red backgrounds emphasized the gravity of unfolding events.

I created robust style and usage guidelines spanning all aspects of the site, including stylesheets, card, container and zone guidelines, and rich training materials for product, design and editorial staff.

Ultimately, user testing led to a pivot in the visual look and feel of the site. In the span of only a few weeks, we revamped the entire design, replacing bold typefaces with thin weights of Helvetica, removing superfluous colors, textures and shadows, and replacing colors with a minimalist palette of grays, blacks and red. 

Eventually, this digital transformation actually helped influence a redesign of CNN’s on-air look, bringing a unified visual aesthetic across platforms.

CNN.com’s growth has continued year after year, and the site has evolved to better showcase the dynamic nature of the news cycle.

Constant iteration and optimization of layouts is possible without the need for significant code deployments — adaptability that has helped CNN.com maintain its position as the number one most visited news site in the world.