Optimising the Blinkbox Experience on 10ft Devices

I redesigned the blinkbox Smart TV application to maximise performance on low—powered TV devices.

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.

Click to enlarge

  • 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 5 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.

Click to enlarge

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 put 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 an 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.

Click to enlarge

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.

Click to enlarge

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.

Click to enlarge

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.