Will Linto
banner-cnn-live-story-1@2x.png

CNN Live Story

banner-cnn-live-story-1.png

CNN LIVE STORY

The evolution of news post-2016 required CNN staff to cover multiple events simultaneously. However, the organization’s toolset lacked a live storytelling platform. The project aimed to empower editors to not only give users regular updates on major events, but also allowed them to cover multiple major events from a single tool.

Goals

  • Develop a web-based tool for editors to report on a live event with text and multimedia content

  • Give editors a live preview of content

  • Allow for multiple editors to author content simultaneously

  • Improve overall performance and user experience of the tool

Contributions

  • Information architecture

  • User journey mapping

  • Wireframes

  • Prototyping and interaction design

TLDR

  • 3 months upfront research

  • Multiple rounds of wires and validation through user testing

  • Positive feedback from all editorial staff, including frequent and continual requests for access from CNN editorial outside Live Story team

  • Daily uniques to the redesigned website (dynamic live experience) increased 21% from April to May 2018 (first full month). The frontend redesign combined with the performance improvements from the new tool created this impact.

Research

While much of the editorial staff was well-aware of the many failings and successes of the current CMS, a third-party research group conducted roughly three months of initial research. The team conducted several in-depth user interviews with key players from programming, editorial, photos, videos, design and other departments. This information informed the creation of the Live Story tool and was referenced as the team pushed toward a larger CMS rebuild.

Wireframes

I went through several rounds of wires as we tested multiple options with the editorial stakeholder group along the way. We landed on a card-based approach with the ability to independently publish each card. This allowed one editor to publish work without publishing another editor’s card.

Many of the patterns established during this process were used later during the larger CMS redesign.

Click here to view the full desktop experience

Designs

As the project evolved, I worked with another team member who transitioned the wireframes into designs. While she handled much of the UI decisions, I was able to begin working on feature enhancements for the remaining requests from the editorial team. During this time, I also helped facilitate additional user testing as designs neared completion.

Note: the original designs were completed by another designer. The below is an example of a workflow status feature I developed for phase 2 of the project.

Card states

design-cnn-live-story.png

Results

The Live Story tool launched in tandem with a redesign of the consumer-facing experience in March 2018, and we saw immediate impacts end-to-end. The daily uniques to the DLE (dynamic live experience) increased 21% from April to May.  

On the internal side, we've frequently heard the feedback, "it's a pleasure to use," which is a great compliment knowing the issues editors have with our current CMS. Editorial team members outside of the breaking news also asked when they will be able to use the tool, so the interest grew quickly within the larger organization too.

Team
UX design and prototyping: Will Linto
Visual design: Laurie Warlick
Creative direction: Robert Hamburger
Development: Katie Adams, Brad Alger, Jesse Welnick