banner-underscored@2x.png

CNN Underscored

Underscored is an e-commerce and product recommendation website from CNN.

banner-underscored.png

UNDERSCORED

Underscored is an e-commerce and product recommendation website from CNN. Following a successful market test, the company moved forward with developing an e-commerce site that leveraged the established credibility of the brand.

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