banner-underscored.png

PROJECT SUMMARY

As CNN expanded into affiliate commerce, it launched Underscored, a product reviews and shopping platform. But the MVP relied on generic news article templates, which limited editorial flexibility and made it hard to showcase products in a compelling way.

I designed a suite of purpose-built templates and partnered with another designer to refresh the brand’s visual identity and distinguish Underscored from CNN’s core brand. The redesign gave editors more creative control, improved product visibility, and positioned Underscored as a credible, standalone commerce property within CNN’s portfolio.

Goals

  • Solidify CNN Underscored as distinct brand

  • Create more layout options for editorial team

  • Add ability to search the site

  • Increase engagement to drive revenue

Contributions

  • Journey mapping

  • IA and wireframes

  • Project management (design)

Research

Initial research showed a strong growth in visits from social traffic. We also noticed higher traffic from mobile users than desktop. We kept these two key things in mind while designing for the future of this site, ensuring all designs adapted well to every platform, particularly smaller screens.

Journey mapping

We wanted to better understand the users who were visiting our site, particularly those coming in from social. What questions did they have and how could we help answer those through design?

 
journey-map
 

Wireframes

When approaching the wireframes, I focused on a few different elements: 

  • Flexible cards and templates

  • Recirculation modules

  • Removing the advertising units (a legacy of the CNN.com framework the original site was built on).

  • Incorporating search into navigation

The decision to remove ad units from the page was a conscious suggestion. As Underscored is a for-profit site, the addition of ads felt more like double-dipping since the entire site is a recommendation platform. 

A primary focus for this work was creating modular components that would allow the editorial staff to create numerous template styles and create specialized components for seasonal features.

ux-underscored-1.png
ux-underscored-3.png
ux-underscored-2.png

Design

The design phase of this project involved creating a distinct brand for underscored, separate from CNN in addition to incorporating the features highlighted in the wireframes. 

homepage-design
article-design
 
 

Team
User Experience : Will Linto
Visual Design: Akoua Smith
Motion Design: Kelly Flynn
Business Development: Bryce Widelitz, Stephanie Quick