Will Linto
cover-lisa-1@2x.png

CNN One Tap to Play

One Tap to Play (OTTP) was a feature enhancement for CNN's mobile web video product that removed the friction within the original experience. We reduced the number of clicks to start a video from three to just one, increasing video starts by more than 15%.

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

ONE TAP TO PLAY

Users of CNN.com struggled to easily watch videos on both the homepage and section fronts. The original experience forced users to tap three times and visit two pages to start a video. One Tap to Play (OTTP) was a feature enhancement for CNN's mobile web video product that removed the friction within this experience.

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

  • Phased approach for implementation

    • Phase 1: launch video with native player

    • Phase 2: launch video with new inline player

    • Phase 3: introduce recirculation module

  • Leveraged existing player controls for larger alignment with non-mobile CNN video products

  • Results

    • Phase 1: 13% increase in video starts

    • Phase 2: 6% increase in video starts

    • Phase 3: 3% increase in video starts

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)