BBC News App: Videos of the Day Promo

From October 2016 to November 2017, I was one of three UX designers working on the BBC News app for iOS & Android. The News App reaches over 7 Million weekly unique users worldwide.

I helped improve and deliver several features across the News app. But, this is the story of how I, as a design lead, improved Videos of the Day and BBC Stories daily video plays by designing a better entry point.

When
Apr - Jun 2017
Client
BBC News
Platform
iOS - Android: News App
Hats Worn
• UX Lead • Ideation • Wireframing • Visual design • Prototyping • UX research

Overview

Videos of the Day and BBC Stories were created to be a finite package of succinct, sharply edited and visually-enticing videos, made to be viewed vertically in full screen and designed to encourage habitual usage.

The package of videos of the day is accessed by a promo with a single entry point into a linear experience from the News app Top Stories.

My Role

Throughout the project, I was the design lead collaborating with a Business Analyst, iOS and Android engineers.

I created visual and interaction designs. Built prototypes, conducted guerrilla testing and presented the findings back to the product and editorial teams.

I was responsible for the design output. Working with engineers, I ensured that the interaction models were robust and easy to implement.

I create a set of image styles and Photoshop templates for the cover of BBC Stories videos and trained video editors how to use Photoshop.

Ideas sketched on post-its following a meeting with the BA and iOS & Android engineers.
Ideas sketched on post-its following a meeting with the BA and iOS & Android engineers.

The Problem

Videos of the Day (VotD) formerly known as Ten to Watch, was conceptualised and executed to be a package of ten videos accessed through a single access point from the app's top stories screen. This approach has created a few problems, such as:

  • Users are not exploring the full package of videos. The further the videos are from the start of the carousel, the more significant is the drop in video views.
  • We know that users who have visited VotD come back more frequently and view significantly more videos. But, there has been some potential adverse effects on the News app video viewing which has seen a (-24%) decline in daily video views.

The Challenge

Improve the click-through rate into the Videos of the Day and BBC Stories experiences. By including more detail from within the package on the promo (currently just images, but potentially including headlines and summaries).

Changing the existing model (a single entry point into a linear experience) may compromise the editorial integrity of the package concept.

Goals

To increase the number of users engaging with the promo and entering into the Videos of the Day and Stories packages.

To retain the concept of the editorialised sequence of items, and ensure the Welcome and Completion screens don't become redundant or confusing.

Original Ten to Watch promo before being renamed later to Videos of the Day.

Design Process

In a nutshell my design process is...

Observe Think Make Test Repeat

Design Process → Observe.

Observe the data and discover what are the user pain points

The business analyst collected the data around the performance of VotD and we identified possible user pain points:

The number of users consuming Videos of the Day is low, but those who visit VotD consume more videos than the average user.

Users are also not exploring the full package of videos. The further a video is from the beginning of the carousel, less video views it gets.

Design Process → Think.

The Three Amigos — Kick off session with UX, BA and Developers

From the outset of the project, myself (UX), a Business Analyst, an iOS and Android developer collaborated in building a shared understanding, on how we could deliver improvements to Videos of the Day and the BBC Stories promo. We question or selfs:

How might we get more people watching more Videos of the Day?

We devised three hypothesis:

  1. If we display the number of videos in the package next to a watch CTA, then more users will tap on the promo, scroll further down the package and watch more videos, because they will know how many videos are in the package.
  2. If we display the videos' headline and image rotating within the promo, then it will be more likely for users to tap on the promo, because showing more detail of the videos from within the package on the promo will help grab user's attention to explore the full package.
  3. If users have the option to preview the package of videos by using a carousel instead of a single promo, then users can pick the video that most interests them without initiating the vertical video experience. Consequently, this could increase video views because we will be providing multiple access points into VotD in a non-linear fashion.
Hypothesis 1
Hypothesis 1 – Original experience. A single entry point to Videos of the Day with rotating images from within the package and with video count.
Hypothesis 1 – Original experience. A single entry point to Videos of the Day with rotating images from within the package and with video count.
Hypothesis 2
Hypothesis 2 – A single entry point to BBC Stories promo with rotating images and headlines from within the package of videos.
Hypothesis 2 – A single entry point to BBC Stories promo with rotating images and headlines from within the package of videos.
Hypothesis 3
Hypothesis 3 – Carousel featuring the total of videos within the package with images and headlines.
Hypothesis 3 – Carousel featuring the total of videos within the package with images and headlines.

Promos designed in Sketch and prototypes built using Tumult Hype and Principle.

Design Process → Make.

Design & Prototype

I started making the prototypes using Tumult Hype. I created the prototype in HTML/CSS. Click here to view several exploration prototypes built using Hype.

To explore other types of interactions, I started using Principle to create high fidelity prototypes with animations that feel fast and responsive.

The explorations below designed in Sketch and interactions built in Principle.

Design Process → Test.

Guerrilla Testing

I went out into the street to validate which of the three hypothesis people preferred.

Hypothesis three was the favourite. Changing the promo to a carousel, performed better among the people we tested on the street. Users prefer to have the option to preview the stories available in the package before committing to watch a video.

Design Process → Test.

AB Testing

We've picked the winning variant (Hypothesis 3) and tested against Hypothesis 1 (the editorial preferred option).

The experiment ran on Android for just under a month, and we have seen significant statistical improvements in promo engagement and video plays for hypothesis 3 (the carousel), compared to the original experience.

We saw 96% uplift in unique play conversion rate (at least one VotD video consumed in a visit), and 36% uplift in total daily video views.

Hypothesis 1 - Variant A
Original experience – Editorial preferred option. A single entry point into a linear experience.
Original experience – Editorial preferred option. A single entry point into a linear experience.
Hypothesis 3 - Variant B
Winning variant – 96% uplift in unique play conversion rate and 36% uplift in total plays/browser
Winning variant – 96% uplift in unique play conversion rate and 36% uplift in total plays/browser

Outcome

Although the carousel option proved to be successful, this approach challenges the editorial concept of a daily drop package of videos designed to be consumed linearly.

Currently the introduction of the carousel as an entry point to Videos of the Day and BBC Stories is pending. The user journey of the original concept must be updated. The welcome and completion screens would need to be rethought to take in consideration a non-linear approach into the vertical video experience.

BBC Stories cover images' visual style

BBC Stories is a new digital product from BBC News, which delves deeper into human stories beyond the daily news agenda.

I was tasked to create a set of image styles that would characterise the essence of BBC Stories.

These image styles would need to be reasonably easy to implement for video editors that had limited or no experience working with photoshop.

The images visual style would also need to enhance images' quality that often was poor.

I have also trained three video editors how to use Photoshop.

Photoshop actions in 'action'.
Colour palette was limited to the BBC Stories visual identity.
Tags: Case Study