« Previous | Main | Next »

BBC iPlayer: Designing the iPhone app

Post categories:

Chris Elphick | 18:13 UK time, Friday, 16 December 2011

Hand holding iPhone running iPlayer

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.

Our Design Challenge

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.

Surface with lots of multi-coloured sticky notes saying things like

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:

hand-drawn sticky notes with channels to the left and right of the screen

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.

hand holding Android phone running iPlayer

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.

printed mockup with superimposed play and favourite icons

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.

a sticky note with a hand on it next to a star icon, on a printout of a mockup of an episode list screen

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.

Printouts of mock-ups of different landscape views, stuck to a wall

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.

The app, showing Frozen Planet, in portrait and landscape orientations

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.

Landscape view, showing

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.

Printed mockup of a side-swipe arrows with BBC1 and BBC3 logos

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.

What's currently playing on other channels, overlayed over the current programme (Frozen Planet)

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.

Three versions of the episodes screen, in portrait format, side by side.

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.

Three shots of the BBC iPlayer application on iPhone startup

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.

iPhone in hand, loading up an episodes list screen, showing the BBC iPlayer icon as a loading screen.

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).


Comments

  • Comment number 1.

    Please add the ability to download shows to the next release! That would be brilliant! And whilst I know the international app is a different beast, it seems bizarre that they have this ability and yet we don't ...

  • Comment number 2.

    @Kenichi

    Thanks for your comment. But Chris' blog post is about its design; conversation about feature suggestions should go on David Madden's post.

  • Comment number 3.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 4.

    For the favourites function, are you investigating a way that can identify a programme already viewed or listened to?

    Russ

  • Comment number 5.

    I Really like it. I especially like the portrait/landscape views, very clever! great work

  • Comment number 6.

    It’s interesting reading how you came up with the main design for the iPhone app. I think it's a great start and by far the best of the various "player" apps. I have made a few observations in ways it could be improved.

    Icons: A lot of the icons are not retina resolution (tab bar icons, info icon in horizontal portrait, channel logos in episode view). The screens in this post shows testing on an iPhone 4 and thinking of the amount of eyes that must have seen it along the way it’s somewhat surprising it didn’t get picked up.

    Use of gestures: Gestures are like keyboard shortcuts. Not easily discoverable but can speed up your workflow if you know them. With this in mind why not go crazy and have gestures for everything? For example left to right swipe to favourite (as it is now) and right to left to instantly play. But to avoid accidental gestures have it track your finger in real time to a certain point before executing. Swipe down on the channel/station selector to show a grid of channels/stations for quick selection.

    Animations: Most of the animations feel either too slow or extraneous. For example switching between Featured, Most Popular and Channels/Stations has a slow slide up animation which makes no conceptual sense and makes the app feel super slow. I think either a subtle cross fade or fast swipe would be less jarring and feel 100x faster.

    Horizontal view: Is the info button really necessary when there is ample space to show all the information without it feeling cluttered. I end up tapping it almost every time anyway to read the synopsis.

    Terms, Privacy and Help shouldn't kick you out to Safari, it should load a simple web view instead. Or get rid of the arrows to hint that you will leave the app when you tap them.

    When you unfavourite a program (which can be quite difficult because the target seems to be very small) you show a modal dialogue which explains that it will be removed from your favourites. Is this not already implicit? But if you choose to keep the dialogue surely the button should say what is going to happen, i.e. 'Remove' and not just 'Continue'.

    Program names get two lines in the list view but only one line in the episode view. Shouldn't the episode view strive to show all or as much of the information on a program as possible?

    Anyway, this is what I've noticed so far! Thanks for the insight.

  • Comment number 7.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 8.

    Hmm. Looks like the moderators are having an off day. Ian jumps on Kenichi for a mildly off-topic post, but they completely misses the fact that "Robert Barnett" was spamming for the "Tapjoy" product. Yes, you removed the link, but missed the fact that the entire post was merely an ad.

  • Comment number 9.

    Fascinating to learn the design process you went through. One massive frustration I have though (and if it was solved I would use the app more) is that there is no offline playback capability (at least not that I've found): seems strange for a mobile device... after all, if I have to be connected to the network I might as well use the website - apps are great for use in disconnected scenarios...

  • Comment number 10.

    @Eponymous Cowherd

    I merely directed Kenichi to the right place for his feedback.

    I agree with you about #7, and think the whole post, not just the web address, should go.

  • Comment number 11.

    Very interesting read. I'm really enjoying these semi-technical/theoretical 'behind the scenes' blog posts.

    One question: Many people are confused on how to enable AirPlay, expecting to see the AP icon within the player controls of the app. Was there an explicit decision taken not to implement AirPlay in this way or was it due to a limitation of the api?

    Also would love to know how the app was built. i.e. was the native iOS SDK used, use of any 3rd party products (Appcelerator, streaming frameworks, etc)

  • Comment number 12.

    Excellent post, thanks.

    For those interested in learning more about the design process of a mobile application, I recommend the following course from Stanford University on iTunes University:

    http://itunes.apple.com/gb/itunes-u/developing-mobile-apps-web/id384233308

  • Comment number 13.

    you just ignoring android entirely now?

    id comment on the design but all we get is a bookmark for the bbc site, which frankly, given the android market share, is ridiculous.

  • Comment number 14.

    Connecting to a television via the dock connector and an Apple home-cinema video cable doesn't work. This does work on the iPad version. Same OS versions.

  • Comment number 15.

    Can we have a windows phone version please!

  • Comment number 16.

    Please release the iPlayer in the USA, I'd happily pay a monthly subscription to have access to the iPlayer. There never seems to be any news released on the reason for the hold up which is frustrating.

  • Comment number 17.

    We want a Windows Phone app as well...

  • Comment number 18.

    can you please sort out the crashing issues on both ipad 2 and ipod touch. every thime the app opens it crashes. ios5.0.1

  • Comment number 19.

    Where is a decent Android app please??? You do realise Android OS out sells Apple OS now? I have an Android phone and brand spanking new tablet but I have to go to the iPlayer website which defaults to Mobile and doesn't allow me to switch to desktop view for iPlayer (although the rest of the BBC website allows this).

    Fair enough I can watch through the browser, but I shouldn't have to should I? I see an App in the market place through a browser but not through the installed Android Market place app.

    I then find out my Honeycomb version tablet apparently isn't supported!!! So does that mean then entire Honeycomb Android OS is not supported?

    Come on BBC, I love the PS3 app - its brilliant. The BBC website is probably my most favourite website but your Android apps are shambolic, pull your finger out!

  • Comment number 20.

    I want to watch LIVE TV and listen to LIVE radio, but I can't... why not BBC??? I can't watch LIVE anything through the website using my tablet because your website identifies it as mobile and won't allow live playback period.

    For an impartial, unbiased establishment it is to say a little strange you are only concentrating on Apple OS!

  • Comment number 21.

    @Skuff

    Hi. Thanks for your comments, but this blog post is about designing the BBC iPlayer on iPhone. Any future plans for iPlayer on other platforms are off-topic here, but David Madden does talk about BBC iPlayer on Android on his blog post.

  • Comment number 22.

    Comment No 1: "Please add the ability to download shows to the next release!".

    Seconded! Without the ability to download, how is this any better, in substance, than the mobile website for iPlayer?

  • Comment number 23.

    Ditto for the comments regarding watching offline. I'd love to watch things on train journeys and don't really see the point of it without that. I'm very rarely in a place with wifi where I'd want to watch tv that isn't home.

 

More from this blog...

BBC iD

Sign in

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.