iPad player app

As movie and TV watching on tablets has become prevalent, blinkbox needed to stake a claim to this territory with a class leading playback experience on iPad.

Apple's app store rules (specifically around digital rentals) aren't compatible with blinkbox's business model, so the iPad app is a playback only experience, without support for browse or purchase.

The app is focused on getting the user to playback as quickly as possible, removing as many conceptual layers as possible. It is tightly integrated with blinkbox.com, such that purchases made in the iPad's browser can be seamlessly played back in-app.

The app has proved hugely successful, with a large proportion of blinkbox's sales now happening on iPad.

I worked with internal stakeholders and product management to determine the scope and requirements and with the API team to determine capabilities. I then designed the end to end user experience including the UI and interaction design for both iOS 6 and iOS 7.

This app is currently live and available now.


Sketching / ideation

Initial app concepts

 

Interface detail for watch offline

IMG_1113.jpg

 

Prototype

Using Keynote allowed the app to be tested directly on an iPad, including most iOS transitions.

A short evolution of the TV series browser can be seen below. Tabs that mirror those used in iOS Safari were used to both maximise screen space and provide familiarity.

 

User testing

Keynote and HTML prototypes were used to test the app with members of the general public, ensuring they could navigate it correctly and that they understood why purchase isn't supported.

I selected and recruited participants, wrote scripts for, and ran lab testing sessions monthly for this and other blinkbox projects.

 

Wireframes

Fully annotated wireframes were produced in Omnigraffle.

 

Interaction design

The indexed scrolling behaviour for episodes was developed and tested using Quartz Composer. The developers then modelled the animation timings and touch response behaviours on the result.

Keynote can't be used to prototype scrolling and After Effects can't produce anything interactive. There was UX community buzz at the time around Facebook's use of Quartz Composer so I thought I'd give it a try.

I was able to create the desired indexed scrolling behaviour as well as contributing back to the burgeoning Quartz Composer designer community. Since then Facebook have released the Origami toolkit and used it to design Paper).

 

Screenshots – live app

iOS 6

 

iOS 7

I prototyped the iOS 7 sidebar transition timings and bounce/zoom in After Effects.

 

 

 

 

Platform
iPad

Deliverables
Wireframes
Prototypes
Application map
Interaction design