Chris's hand, holding an iPhone running the iPlayer app his team designed

Hello, my name is Chris Elphick and I'm the Senior Designer leading the BBC iPlayer iPhone App project. Earlier this week saw the debut release of the BBC iPlayer App for iPhone and iPod Touch. In this post, I'd like to give you a brief overview of the thinking that went into the design.

Background

As Executive Product Manager David Madden explained in his blog post more and more people are choosing to watch television programmes or listen to the radio on their mobile. In fact a staggering 16.5 million programmes were watched on mobile this October 2011 alone. A large proportion of those mobile views were on iPhone.

This significant user demand provided an opportunity to create an improved user experience more appropriate to the iPhone as well as introduce enhanced features and interactions to our audiences.

In an initial brainstorm, the team identified a series of questions to answer such as:

• How might we let people plan their TV viewing?
• How might we improve the Live TV/Radio Experience?
• How might we encourage people to explore more programmes?

We also had to consider the various restrictions and opportunities that designing for a mobile device offered us. These included:

• The difference between portrait and landscape orientations
• Gestural interactions
• Screen Size.

First Steps

To kick things off, we held a number of workshops. First off we focused on generating as many ideas as possible in answer to our list of design challenges. We went for quantity over quality at this point.

sticky note heaven: some early thoughts and ideas

Next came the fun bit. We sketched out how those ideas could look visually and considered how users might interact with them. Any medium is appropriate at this point, as long as it's quick and demonstrates the idea effectively. Paper prototyping is a great way of illustrating and testing basic user journeys. For instance here is my rather rudimentary version of our channel hopping feature:

my early thoughts on flipping between live TV channels

Sticking these basic concepts in front of users helped test the integrity of early ideas and narrowed down our options.

Not reinventing the wheel

This isn't the first time the BBC iPlayer team has designed an app. Last year saw the launch of the iPad and Android iPlayer apps. An integral part of our process was reviewing those current products and exploring what we could learn from them and how to develop them further within the context of an iPhone.

The iPlayer App on Android

In essence the iPlayer Apps contain the same features and content, but of course Android users, for example, have a different expectation of how to navigate from iOS users. Gestural interactions are a good example of differences between the user interfaces.

Gestures: get me there quick!

Network and Wifi connectivity is obviously a major concern when it comes to using apps. To reduce the number of journeys and page loads we looked at implementing gestures that would let the audience trigger actions more quickly.

An earlier idea we had for revealing additional functionality without having to go through to an episode page. A 'long press' on a programme would reveal the icons.

With a wealth of potential flicks, taps, and drags to choose from we have kept things simple. To reveal the favourites star on the app, you simply swipe on a programme item in a portrait list.

Swipe and tap the star to favourite a programme

And to play a programme immediately and by-pass the epsiode page, you can simple double tap on any programme item in a vertical list.

Portrait vs Landscape Orientations

Earlier I mentioned the opportunities that designing for mobile offers us. One, of course is the ability to change orientation. There was a frequent debate within the design team as to the importance of portrait versus landscape - whether or not it was helpful, necessary or even pleasing to present content differently in a landscape view compared to portrait.

We explored multiple possibilities for landscape views dependent on where you are within the app. In early designs we considered showing as much content as possible in a single view but we felt it wasn't taking full advantage of the screen real estate, nor presenting anything new.

User research, told us that certain users including those who are dyslexic liked the simplicity of a more visual menu with fewer options.

Some potential landscape views

By rotating the phone to landscape we wanted to offer a different cut of the content. In the case of TV and Radio Featured, the landscape view provides a full screen image to scroll through like a picture gallery.

Portrait and Landscape views of the app

Users can tap on the "i" button to reveal the programme synopsis and the Favourite button. We call it the 'lean back' mode where the interface is stripped right back showing only what is necessary.

A landscape view showing the info overlay.

Improving the Live experience

In the past, thanks to weak connections and poor quality streaming, watching live television on a mobile phone has not always been the best experience. The introduction of adaptive bitrate technologies has brought about a much-improved streaming quality. This offered up an opportunity to provide an enhanced 'live experience'.

I borrowed the idea of 'channel hopping' from TV, and my colleagues and I explored various ways of switching channels or stations whilst playing a programme.

This early design explored the idea of swiping the entire screen to flick between channels.

We developed a very simple mechanic that lets users browse what's playing on other channels whilst watching live television, letting them compare programmes across the BBC.

The Live Channels Switcher

We employed the same device to reveal related programmes. So now when you're watching Doctor Who you can browse other episodes from the series without leave playback.

Visual design and Branding

The main challenge here was striking a balance in styles. We wanted to stay as faithful as possible to iPlayer's brand and styling whilst being sensitive to Apple's core UI and aligning it with the BBC's Global Experience Language (GEL). Luckily the textures and gradients from the BBC iPlayer website lend themselves well to the tactile styles familiar to the iPhone's UI.

Some examples of how the visual style and layout changed as the project progressed

Where possible though, we have introduced elements of our global experience language that reflect the direction the iPlayer website is taking. This is most obvious in the full screen landscape views or the player controls where the interface is much simpler, letting the content take centre stage.

Branding proved an interesting challenge. Since the black and pink are such distinctive parts of the brand it didn't seem necessary to take up valuable screen real estate with a logo in the header on every page.

Instead we decided to seed the logo throughout the interface.

When the app is launched, as the content is loading the logo appears on a start screen and then recedes into the background to be covered with content.

Throughout the app you will also see the iPlayer play icon discretely sitting behind thumbnails before they load.

Looking to improve

There has been lots of in-depth user research by the BBC for both iPlayer on all platforms, meaning many of our initial research was based on those findings. But launching a product on a new device, especially one as popular as iPhone required some further testing and research to help guide and verify our designs.

We carried out in depth testing sessions with iPhone users (both familiar and unfamiliar with BBC iPlayer, ranging in ages and capabilities) lead by Amelia Still, our Usability & Accessibility Specialist and carried out by external agency Experience Lab.

I also find comments and reviews from across the web invaluable, so thank you for your continued feedback. This app is a first release and is a glimpse of what's to come. I will be looking to improve it and implement some truly exciting features and functionality next year.

Chris Elphick is Senior Designer, BBC Future Media User Experience and Design

Credits

A number of people contributed greatly to this project: Kathryn Leach, Suzie Blackman, Richard Jones, Anoushka Ferrari, Ben Guyer, Mike Albers (Design Team), Amelia Still (Usability and Accessibilty), David Berlin, Mark Bamber (Business Analysts), David Madden (Executive Product Manager).

The dedicated Development Team in Salford : Fiona Iglesias, Andy Hulstone, John Steele, John Haseldon Haselden, Alan Burton, Joe Timmins and all Paul Rutter, Steven Cross, and Richard George (Test Team).

(Credits Updated 19th Dec - Ian; Haselden spelling corrected, Burton & Albers added Jan 10th).