Case study

Scrubbable: Creating interactive video

Scrubbable is a novel way of allowing a user to control the flow of a short, high frame rate video clip.

The Challenge

We needed to turn large, high quality videos into single images, super-quickly, and in a super performent fashion

Turning an idea into reality

Turning an idea into reality

Expanding on an original concept, we needed to create a production ready Scrubbable tool to be used across the BBC real estate in any number of ways, under extreme usage stress.

Tiny payload capacity

Tiny payload capacity

We needed to reduce the file size down massively, to allow our entire application and video to be under a 500mb library download.

Making it smooth, and obvious

Making it smooth, and obvious

We worked hard to make sure the interactions were obvious, intuitive and fun - meaning anyone can Scrub quickly and easily.

The Solution

We used image processing to present single frames each side of the users current time frame, all controlled by touch - or scrubbing

Continual optimisation of libraries and code

Continual optimisation of libraries and code

We needed to continually re-imagine our technical approaches to create a highly optimised and performant experience for usage and CMS upload. We removed all large libraries (Angular, jQuery), replacing with either vanilla JS or micro libraries, greatly reducing the download needed.

Responsive image resolution / download

Responsive image resolution / download

We worked hard to deliver a responsive solution to handling and presenting imagery, enabling device specific presentation of images for performance.

CMS controlled Scrubs

CMS controlled Scrubs

We created a simple, bespoke CMS to allow editorial to control video frame-rates and thus total image downloads.

The Result

One of the most successful BBC iWonder tools ever, Scrubbable has been used extensively for the 2014 World Cup, Bitesize, Comedy and loads more.

Reduced page download

Reduced page download

After careful development, we managed to reduced initial page download to under 150kb, 100kb under the BBC's internal 250kb target.

Reduced like for like

Reduced like for like

Reduced like for like instance from 17mb to as low as 2mb total download on mobile devices.

Application accepted, and loved!

Application accepted, and loved!

Our application was succesfully accepted into BBC iWonder suite and advertised on television nationally, including a TV slot with Frank Skinner. Furthermore, Scrubbables have been made for any number of programmes, including the 2014 Football World Cup.

The most fun I've had with a video in a long time! Launching the rocket was awesome!
BBC iWonder user

Performance & Statistics

150Payload optimised to be a meagre 150kb
2mb download size

Like what you see?

View more work

Got a project in mind?

Contact us

Item 8 of 15