After a lot of hard work the BBC iPlayer Radio app is finally in the app store and available for download. It’s been quite a journey to design and create the app, I was involved with it from the outset leading the user experience and creative direction.

The app is part of the wider iPlayer Radio product launch, a new brand that brings together all of BBC Radio and Music. Designing iPlayer Radio has been more than just a redesign as it’s a complete rethink of the BBC Radio & Music digital experience. Previously all of the BBC Radio websites were very separate and lacked consistency but now they share a common user experience and visual language. Part of this rethink has been our multi platform approach and the app is one example that demonstrates this.

It was a fairly unique project in that we were starting from scratch so we had the opportunity at the beginning to be quite exploratory in our thinking and try a range of different ideas. At the beginning we thought about who the app would appeal to and sketched ideas. Many of our visitors to BBC Radio are typically task orientated in that they know exactly what they are looking for whether its a station or a programme. So we thought a simple entry point would be to select a station and start listening live. Beyond this idea we also considered how a user could personalise the interface. We initially thought this could be interesting as mobile phones are inherently very personal devices and the idea of creating an interface that a user could customise with their favourite stations and programmes could be a good way into content.

After the home screen we then shifted attention to the playback page which is the most important area of the app. We really liked the idea of creating a dynamic experience, much like what you get on the Radio 1 website, where you can see which tracks are being played, messages from the audience and studio but also have the ability to interact with the show you are listening to using the built in functions of the phone such as the camera, location and messaging. The thinking was that this could potentially open up the opportunity for presenters to talk about this feature on air to encourage audience participation.

During this sketching phase we also payed a lot of attention to how a user would navigate the app using gestures and touch. We spent a lot of time looking at other apps and taking note of what works and doesn’t. Our main aim was to create a simple and intuitive interface and to achieve this we sketched a rough architecture of the app so we had an idea of how it might hang together and then considered the user journeys between sections. At a granular level we then considered which touch controls or gestures would be appropriate to use in each section.

It was really important to me that the app had an element of playfulness. Tai and I spent time discussing transitions, movements, sound and elements of the interface that would make the app a joy to use and have what I called a ‘signature’ element of its experience which would make it stand out from other apps.

To encourage regular use we also thought about how we might give the app some kind of utility which led us to think about the alarm clock feature. It started life in these early sketches.

The sketching phase was really helpful to explore a range of ideas and then start forming some decisions around what we thought could make a compelling app. Moving on we then decided to prototype to bring our ideas to life. For this phase of the project we partnered with Kent Lyons who provided both visual and technical expertise to translate the ideas we wanted to explore in the prototype.

Working on the prototype helped to challenge some of the ideas we had during the sketching phase as seeing things working in front of you is very different from what you have on paper. The team at Kent Lyons initially built some simple wireframe prototypes based on our sketches which helped to rationalise which sections we needed to get designed and built. Then the visual design was applied, this was an iterative process as we had the general look and feel to consider and specific interface elements such as icons.

It was while we working on the visual design that we started exploring how we might use the radio station logos in the interface. The logos are really well suited to a touch interface because their shape and size are finger and thumb friendly and because of this they have an inherent playful quality about them. Initially we thought they would work well in the EPG as a way of ‘tuning’ into different stations. As a concept it was well received by the wider team internally at the BBC. So we began to iterate on it and it evolved like this (click on the numbers or the image to see them):

Version 1 of the dial
Version 2 of the dial
Version 3 of the dial

Version 1 of the dial

Version 2 of the dial

Version 3 of the dial

The playback page went through a number of iterations to. We mainly focused on music programmes as they have richer info we can play with. We prototyped how dynamic data such as tracks being played would animate in and work as a timeline in the interface. This is an example of the Annie Mac playback page that enables a user to swipe the track left and right and its also possible to tap on each track to favourite and reveal more info.

One aspect of the app that was particularly difficult to get right was the EPG. Perhaps not the most exciting aspect of any design process, its important in this app because it gives the user an overview of all the radio stations and quick access to on demand programmes. We struggled with how a user would navigate to it. Initially we considered a button in the interface, but after designing the EPG in portrait it clearly wasn’t practical. Changing orientation was the answer as it provides a lot more space, it also means that a user can access the EPG at any point in the app if they feel like browsing and listening to something else.

We prototyped many ideas that didn’t make it in the final app but unfortunately I can’t share them just yet as it would spoil the surprise of future features we may want release.

After this prototyping phase we looked ahead and started planning the app for launch. We learnt a lot from the prototype but there were still many improvements we could make. We had suffered from overloading the interface with too many features and sections. So to get the app ready for launch we went back to basics. Kathryn Leach joined the project at this time and she created a flow diagram of the entire app which visualised all the key user journeys. This helped us to get rid of an unnecessary sections and keep track of what we needed to do in order to deliver the final app. This is one example of a flow for live listening.

For the final version of the app we reworked the look and feel and simplified the interface. We set out to achieve a logical flow to the page. The station branding sits at the top so that there is a visual relationship between the schedule button and the station. Reducing the size of the programme image helped to create space and also give us the opportunity to make it a useful part of the interface.

 When you tap it, the page flips around to reveal more info about the programme, onward journeys and the option to set an alert for the next broadcast and share options.

The other key change was the play control panel. The new iPlayer Radio website provides a range of curated content for each station. We wanted to include this content in the interface but not at the expense of cluttering the interface. So we designed the play control panel to be swipeable and reveal the additional content such as video and audio clips. To indicate the hidden content the panel bounces when the user first views the page. This visual cue brings a playfulness and element of discovery into the interface.

We also overhauled the now playing information (data corresponding to what it is on air such as track information). The initial approach was very visual, however using text is a lot more scalable, as the panel has to work across a range of both music and speech programmes.

A useful feature is the ability to save track information to a favourites list to email or tweet. We prototyped lots of ideas around this feature which I haven’t elaborated on as some of them may appear in future updates. The graphic equaliser is a fun addition but also really useful feedback to indicate to the user that the programme is playing and not paused (or buffering).

The final home screen went through a number of iterations to get the animation to have the right amount of responsiveness, friction and easing. We also integrated a new feature which is the ability to add and edit your local radio stations.

While we were working on the iPhone app we were also busy with the Android version. It’s currently being prepared for launch and offers a similar user experience and design to the iPhone app. The key difference is that we have optimised elements of the interface specifically to be consistent with native Android behaviours and interactions.

This is the first version of the app, so expect new features and interface refinements in time.

Credits

This app was the combined effort of some very talented people. Wai Tai Li worked with me in the early stages of the project to brainstorm and sketch ideas. I worked with Paul Sissons to commission the prototyping work and review the work in-progress that Kent Lyons had produced. The team at Kent Lyons were superb, their expertise helped us translate our ideas into a working prototype. James Simcock worked with us during both the prototyping phase and the final implementation of the app. Not only did he provide creative input and also led the project editorially, he ensured the stakeholder process was as smooth as possible. James is a mobile guru, his insights and experience were invaluable.  Mark Timson helped us refine the home screen with his After Effects talents producing many iterations to get the animation just right. Last but not least I worked with Kathryn Leach during the final stages of the app. She created the  flow diagrams, visual design and produced all the assets and worked with our technical partners to ensure they delivered it to our requirements – for both iOS and Android.