banner-cnn-one-tap-to-play.png

PROJECT SUMMARY

CNN’s video pages suffered from high abandonment rates, limiting engagement and ad revenue. I led the design and rollout of One Tap to Play, a phased initiative to streamline video playback. Through iterative testing and cross-functional alignment, we increased video starts by 22% overall across three phases—turning a high-risk idea into a core part of CNN’s video experience and a meaningful revenue driver.

Goal

  • Allow users to start playing videos from the mobile CNN.com homepage with just one click.

Contributions

  • Information architecture

  • Wireframes

  • Visual design

  • Prototyping

Overview

We had a phased approach for the implementation of this feature:

  • Phase 1: launch video with native player

  • Phase 2: launch video with new inline player

  • Phase 3: introduce recirculation module

Research

Video is a major driver for CNN.com traffic and an expectation of our users, so all video teams look to find new ways to increase engagement. The idea for this project started with a simple question: how do we improve the video experience on CNN.com's mobile site?

To answer this question our partners in UX Research hosted a design studio, gathering members of the cross functional team (product, design, dev, QA, editorial, research, biz dev) to ideate on potential solutions. This is how we developed Phase 1 of OTTP and the subsequent releases for the improved web video player. 

User Flows

With the design studio complete and features prioritized, I started to outline the project's high level impact. We used this documentation as one tool to communicate the plan for this product enhancement to our stakeholders. As seen in this example, there was a drastic reduction in the amount wait time to start a video.

 
play-video-original@2x.png
play-video-OTTP@2x.png
 

Design

After analyzing the high-level user flow and the ideas from the discovery phase, we formulated a plan for the design and implementation. I developed an experience that highlighted the simplified user flow and feature enhancements to the video player. The existing player functionality was used whenever possible to mirror the experience in other areas of the mobile site. However, newer functional pieces went through several design iterations and testing before selecting the final option.

iteration-1.png
iteration-2.png

Implementation

For implementation, we decided to use a three phased approach. This helped us deliver value faster and better measure increases/decreases in video consumption. 

  • Phase 1: functionality-only release. Launch device's native play when tapping on a video link.

  • Phase 2: custom THEOplayer release (inline player). Launch design updates with the faster video player technology.

  • Phase 3: video recirculation release. Launch new end slate, countdown timer and module

design-ottp.png

Results

The hypothesis our team had at the start of the project proved to be true. As we released each phase of the mobile web video update, we were able to deliver value to the users, which was shown in the increases to video starts. 

  • Phase 1: 13% increase in video starts

  • Phase 2: 6% increase in video starts

  • Phase 3: 3% increase in video starts

Team
Design: Will Linto
Product: Nikita Thareja
Dev: Hamish Hamilton, Subi Babu, Levvel (agency)