Optimising the Blinkbox Experience on Connected TVs

Blinkbox was an on demand movie and TV show streaming service available in the UK.

Our business model centred around purchase volume and this played out across 3 main themes. Content, Price and device coverage. Our goal was to provide people with the latest content at a reasonable price on what ever device they owned.

To aide this goal I redesigned the blinkbox Smart TV application to maximise speed and performance. This was primarily to meet the requirements of the Playstation platform, as well as other low—powered TV devices, which would in turn open up an entirely new group of potential users for us.

My thanks to Sarah Longhurst (Connected Devices Product Manager) & Chris Miller (Engineering Lead) with whom I worked closely on this project.

The challenge

TVs are low—powered devices. This means they're slow to load and to respond to user interaction. Response rates slow even further when many images are involved or the page is content—heavy.

The blinkbox Smart TV app asset page was image heavy and made many calls for information the user didn't necessarily need to access.

The plan was to improve the performance of the TV app on its own right as well as to make the app viable for other low—powered devices.

It was also important that the asset page worked for both movies and TV shows.

The process

In order to solve the problem we would have to design an application which doesn't use many images and doesn't load more information than it needs to.

This would free up the scarce memory resources of the device to be utilised for other features, thereby making the experience faster and adding value to the product.

I began by auditing the current design of the asset pages and assessing what information was superfluous.

  • Large billboard image using a lot of memory
  • Full list of series available even though it's written above
  • Extra images which also require calls for the image, title and user's entitlement

The design had to work with five point navigation (Up, Down, Left, Right, Enter). This is generally quite easy to achieve until you have a scrolling list, which the design needed to handle as TV shows usually have many episodes.

I began by sketching potential layouts which would allow for loading less information and using images minimally.

I worked with developers to find out which calls to the back end services could be made more efficiently.

Click to enlarge

I then took the stronger sketches and rendered them as high definition wireframes. This allowed me to have a better idea of how much information I could actually fit on the screen.

From this point I built an HTML prototype which worked with five point navigation and could be put onto a smart TV.

This process was invaluable as even my rough prototype ran quickly when ran directly on a TV, which was a good indicator that I was onto something.

Working with our dedicated UX researcher, we put the prototype in front of users. We asked them to perform a number of tasks both simple and complex, I then used the findings to refine the design further.

The solution

The final design utilised a number of smart design techniques to lower memory overhead on the device.

1. The large billboard image disappears once the user digs further into the page

This large image was using a lot of memory but had no purpose beyond the bold impression it gave users when they first entered the page.


2. Only one episode is displayed at a time

This change freed up a lot of memory which was otherwise used loading episodes which the user may not be interested in. As a result I now had memory spare which allowed me to load a slightly larger episode image and a mini synopsis for the currently visible episode.


3. Loading information requires user confirmation

The new design only loads a new set of information when the user asks for it by pressing OK.

Previously the app had loaded each new section as they scrolled over the button. This meant a lot of data was being loaded as a user moved from the left hand side of the screen to the right.


Prototyping

In order to ensure the interaction changes I implemented would be successful I prototyped the experience in HTML / CSS & Javascript. This is a great way to test TV experiences as most modern devices have a browser which you can run without the controls on display.

I mapped the arrow keys to the same inputs a TV remote control uses as well as the return key to represent OK on a remote.

Try the prototype, it is designed to be used on a TV or desktop computer (using the arrows and return key).

The results

The results from user research were outstanding. Respondents confirmed that they found the new design far easier to navigate and much faster to use. Users also noticed improvement in finding the right information.

As a result of the changes the app was more performant and enabled us to make the service available on a number of new devices. I consider this project to be a resounding success.