Mark Barilla
Interaction Design and Creative Direction
cnn-A.jpg

CNN.com

Building a responsive, mobile-first web experience for the world’s number one destination for news.

A dramatic, fully responsive redesign

A dramatic, fully responsive redesign

In early 2015, I served as a lead designer of the comprehensive redesign of CNN.com — CNN’s first responsive web experience powered by a custom layout engine.

The redesign aimed to solve two of CNN’s biggest problems — inflexible page layouts unable to adapt to changes in the news cycle, and a fragmented approach across platforms, with a limited subset of features for mobile audiences. 

A homepage that adapts as quickly as news breaks

A homepage that adapts as quickly as news breaks

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.

 Video and images, front and center

Video and images, front and center

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.

 Beautiful, new digital destinations

Beautiful, new digital destinations

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.

 Dynamic layouts for endless flexibility

Dynamic layouts for endless flexibility

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 concepts inspired by CNN's broadcast legacy

Initial concepts inspired by CNN's broadcast legacy

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.

cnn-initial-B.jpg
Documentation for all aspects of the experience

Documentation for all aspects of the experience

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.

 Updated visual language to deliver a fresh, modern look

Updated visual language to deliver a fresh, modern look

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.

Evolution of the world's most powerful homepage

Evolution of the world's most powerful homepage

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.