Recently we launched our first baby step towards improving the current mobile experience for BBC Radio and Music.
Visit bbc.co.uk/radio on a phone and you get the following landing page:
When we started off this project we had lot’s of ideas, requirements and features. We considered a number of different options for how we could design the interface. But many seemed to complicate what needed to be quick and easy access to content.
The hardest thing to do in any project is to take things away. But that’s exactly what the team did, through our conversations about what was important for the audience we decided to remove bits and pieces from the interface until we arrived at what you see now in your mobile browser.
To communicate our thinking to the wider team and stakeholders, Nick Ritchie (a designer on the team) created this prototype:
It’s lo-fi but a great way to try out ideas quickly and gauge audience reactions. Over time we will look at how we can enhance the mobile experience adding new features gradually and this way of prototyping is going to help us keep the interface intuitive and simple.
In the next few weeks they will replace the current homepages but for now you need a BBC ID to access them.
It’s an interactive channel that enables the audience to see the output of both stations (by using the station switcher) including music, SMS, tweets, photo’s, video and messages from the presenters themselves. Although it’s usually driven automatically by live feeds of data coming out of the studios, the editorial team are able to manipulate the live stream. When something interesting, e.g. the presenter chatting to a guest, the panel can switch to live video.
Why this new approach is exciting is that it lets you see all of Radio 1 and 1Xtra including the bits that don’t fit into the audio broadcast. The internet is at the heart of how the Radio 1 and 1Xtra audience consume media. To make what we offer compelling, we’ve created a platform for the audience to interact with live radio both directly through the website itself and across the social media they use.
Background
This project kicked off with a team brainstorm to explore, sketch and present ideas. The output of the brainstorm gave us a range of ideas to play with. Reflecting the liveness of Radio 1 was the core theme we wanted to pursue.
We were not starting totally from scratch, we’ve done work in the past that has explored ideas of liveness and visualising radio. The ‘Meet the Listeners’ project is one example where Radio 1 asked listeners to send in a picture of themselves while they were listening to a show and these were displayed in real time on the website.
Back in 2009 we ran visual radio trials. They were most successful when they showed audience participation, what was happening in the studio and the tracks that were playing. You can read more about these trials on the Radio Labs blog.
The difference with this project was that we wanted to rethink the entire Radio 1 and 1Xtra homepages as a live experience and design an interface that would accommodate a range of content such as the music played on the station, text messages and tweets from the audience, messages from the presenters, photos and video.
Designing the live experience
At the beginning of the design process we explored a number of different approaches to reflect the liveness of the stations. These photos give a flavour of the many design iterations we went through.
Some of our initial ideas explored the concept of a stream, similar to what you may find on Facebook and Twitter.
Early content stream concept
To push the stream concept further we explored a more visual approach. One early design concept we were excited about was the idea of presenting live information as a content quilt and creating a feature that would enable the audience to navigate the Radio 1 and 1Xtra schedule.
Content Quilt
Another approach to the quilt was adding hierarchy and weighting to the content. In this screenshot we explored the idea of making recent content appear larger. This idea of timeliness started to give the quilt a logic and order.
Content quilt with hierarchy
The third approach illustrates how we decided to combine the previous two designs with logical timeliness and a hierarchy.
Stream with logical timeliness and hierarchy
At this stage the team were thinking of the live stream only being present within a certain area of the homepage. However we decided to be more ambitious and explore how it could scale to the entire width of the page to be something striking and prominent. The end result was something that strongly resembles what you see live on the websites.
Early version of the live panel
The next step from here was improving the interface of the live panel. We made a number of improvements on initial designs including a more descriptive treatment of the programme navigation.
The live panel on the website
By including this programme navigation it’s possible to navigate the live panel by specific shows. This becomes a really great way to discover new music, for example, if you check out Huw Stephen’s show in the timeline you get all the tracks he played.
All the tracks played on the Huw Stephen's show
To enhance the live experience further we also designed the functionality to send a message directly to the studio. This has huge potential as it enables DJ’s to talk about it on air and encourage the audience to participate with the show. The best messages can then be presented in the live stream for everyone to see.
Sending a message
The new design also integrates the most popular sections of Radio 1 as tabs enabling the user to switch the content of the live panel. The DJ’s and Shows tab is where we’ve introduced the ability to customise your Radio 1 and 1Xtra experience.
Radio 1 DJ's
This panel effectively acts as a short cut for regular visitors to access their favourite DJ’s and shows.
User testing was a really useful part of our design process to help validate the concepts we had for presenting and navigating the live panel. The feedback helped us iterate the responsiveness of the interface and also refine the visual design.
Another new feature we’ve introduced is ‘love’.
Recommendations
“And in the end, the love you take is equal to the love you make”
Lennon/McCartney 1969
‘Love’ is a totally new feature of the Radio 1 and 1Xtra websites that provides our audience with recommendations. Throughout the schedule both stations generate a lot of content. So we thought a great way to surface some of this content is by providing the user recommendations when they express an interest in something.
Keeping the ‘love’ interaction simple and responsive as possible required a bit of prototyping work to get right. We tried out a few ideas, exploring different animations and interactions. The video below is an example of an early prototype.
The end result is a very simple interaction, every object on the page has a ‘love’ icon and when clicked you get an instant recommendation that relates to that content.
Homepage recommendations
A new way of presenting the message of the station.
On the old websites, Radio 1 and 1Xtra promoted their biggest shows and best content in a conventional carousel. Although this was neatly placed in one space, what it didn’t do very well was give the audience a sense of change and reflect the mood of the station.
Current Radio 1 homepage
With the new homepages we designed a promotional area that can change throughout the day reflecting all the exciting stuff that each stations wants to shout about.
This video illustrates how we imagined the promotional area to work with content pouring out of the live panel and into the space around it.
To visualise the concept further we produced a grid that illustrates how the latest content would filter through the grid.
How content flows through the grid
The final design stays true to our content quilt concept. Instead of hiding the content within different areas of the website the homepage now reflects all of it in a very visible and immediate way. Every piece of content is clickable, interactive and can be watched and listened to in-situ. With music tracks we’ve made the experience as rich as possible, designing a lightbox that can aggregate lots of content about the track and the artist such as chart position, biog and related clips.
A light box of a track showing chart position, 30 second preview, artist biog and related clips.
Watching content in-situ
Final thoughts
The new homepages create a contemporary radio experience, visualising the output and making it interactive online. We hope to learn as much as we can from this launch and use the insight we gain to design and build better radio experiences in the future.
Credits
The team behind this project included myself (Senior Creative Director), Tom Spalding, (Senior Designer), Tim Broom (Designer), David Wilson (Designer), Wai Tai Li (Designer), Chris Johnson (Project Lead), Patrick Sinclair (Tech lead/producer) and Sarah Dain (Project Manager). We conceived and designed the website and partnered with the very talented technical team at Kite that included Tim Stansbie, Matthew Glub and Oli Ashford who wrote the code, built the admin system and delivered the technology to make the project come to life.
Recently I’ve been using a technique called Challenge Mapping. The technique frames problems as challenges which enables you to cut through negative thinking. In a recent workshop my challenge was “How might I enable the UX team to synchronise their work”. After establishing the challenge you begin to diverge on a question such as “Why might we want to enable the UX team to synchronise their work”, in my example the reason why I want to synchronise their work is so that they are able to create a common set of features, functions and designs. In the challenge map this is phrased as “How might we create a common set of features, functions and designs.” The secondary area of divergence is asking the “What’s stopping…” question. This narrows the original challenge into more task orientated sub-problems. In my example, what is stopping me from synchronising the team’s work is a lack of shared priorities. So in my challenge map this is phrased as “How might we create a set of shared priorities”.
I’ve found this exercise a very effective way to focus on what I need to do to meet a challenge. It enables you to understand the relationships and connections between challenges. Asking a “What’s stopping…” question is a great way of uncovering the obstacles that are in the way of resolving a problem. Similarly the “Why…” question can give clarity on what might be the next step on from meeting a challenge.
The image below is my complete challenge map that shows the original challenge “How might we enable the UX team to synchronise their work”. With everything below that being the “What’s stopping…” challenges and everything above the “Why…”.
Desert Island Discs recently relaunched on the Radio 4 website (at the end of March) on almost the same date that we held the Desert Island Discs hackday a year ago to explore what we could do with the archive data. Since the hackday a lot of work took place including the rebranding of Desert Island Discs and commissioning magneticNorth to help us design and build the new website and create a compelling experience for exploring the archive. It’s been exciting seeing the project take shape over the year and building up to the launch date.
This project had many challenges and one of the first we tackled was the branding. We commissioned Fallon to produce the brand kit and it went through a number of iterations before we settled on a unique and distinctive design that combines and reflects the concept of music and being stranded on a desert island.
We took inspiration from a number of sources which predominately came from album covers and record label designs. Trojan record covers and the Island records brand stick out in my mind as the most influential pieces of inspiration during this phase of the project.
Trojan records
Island records
We wanted the new logo to be as versatile as possible to enable us to use it in many different contexts and permutations, in particular it was important for us to have a toolkit that could be used to give the website a sense of life and distinctiveness which is something we achieved.
The brand kit provides flexibility not only in how we can use the lock up but also the discs and colour palette.
Another key challenge for this project was creating a simple and intuitive way to explore the archive. Chris Thorne led the IA on the project and has written in detail about how he approached the domain model. The process was iterative exploring different routes to present the navigation, layout and filters.
An early wireframe showing an example of the search page.
The result of this iterative wireframing and prototyping process is the killer feature of the website, the search page, which enables the audience to filter the archive by date, occupation, gender, musical choices, books and authors, presenter and of course castaway names.
A photo of the search page being pieced together from different options that were proposed at the time.
All searches eventually take the user to the castaway page which the guys from Magnetic North designed elegantly. It’s the overview of musical choices that bring’s the page to life and a nice touch is how each musical choice links to our BBC Music artist pages providing an onward journey to discover more content.
Musical choices from Jamie Oliver's castaway page.
Early in the concept phase we considered many different ways to introduce the audience to the archive, one example was enabling the audience to input their musical tastes or provide their last.fm profile and the website would then automatically suggest episodes for you to listen to. In the end we decided that a strong editorially curated homepage would enable our audience to browse and discover the rich archive Desert Island Discs has to offer. The discovery and serendipity of the homepage works particularly well with the combination of a visually compelling carousel and a selection of programmes organised by occupation.
Desert Island Discs homepage
Myself and David Jones (editorial lead) considered a number of different ideas that could enhance the Desert Island Discs website beyond searching the archive. The programme lends itself well to audience participation because of the loyal fan base. The rare insight into the lives of very successful people using music as a soundtrack to emphasise particular memories in their lives and provides a stimulus for discussion on social networks. Early on during our development myself and David did a quick audit of Desert Island Discs activity on various websites and we found that there was healthy activity on facebook and twitter. This initially made us think about ways in which we could encourage audience participation on the Desert Island Discs website.
Audience participation wireframe
At the time we thought this would introduce a new dynamic enabling the audience to contribute their content to the website. Although it felt like an exciting avenue to pursue eventually we decided time and effort was better spent on the core editorial proposition of the archive. This doesn’t mean we may never do this in the future however…
The Desert Island Discs website is, in my personal opinion, one of the best BBC websites we’ve ever done as it provides such a rich resource of unique and intrguing content that you cannot find anywhere else. The beauty of it is that it presents a simple user interface with an elegant design, driven by a considered data architecture that provides the audience with opportunity to discover and stumble upon insightful and thought provoking content.
Currently I’m working on a new product for the BBC. As ever with something that is completely brand new its important to explore and generate lots of ideas early on using a variety of methods and techniques. In the context of this project I encouraged a multi disciplinary team of people to brainstorm and help define what this new product could be using a technique called Product Pinocchio. The technique is featured in a book called Gamestorming that contains a number of different ‘games’ that can be played in a variety of contexts to engage people in ideation, planning and sketching.
Brainstorming
Product Pinocchio requires the group of people you are working with to suspend belief as its all about pretending that the product you are working on has come to life. By personifying the product its possible to better to relate to it and craft it into something amazing.
What am I like? What are my values? What is my mission in life?
To some people this is a bit of a leap so its useful to emphasise why the work they are doing is so important and what the group are aiming for.
In the context of the session I facilitated its essentially about defining a set of key characteristics for the product and enabling the team to do three things:
firstly it enables the team to arrive at a consensus on what the defining values, behavious and characteristics of the product should be.
secondly the output of the exercise provides stimulus for the design process (from both a creative and product management perspective).
finally on a broader level the work from the exercise will help influence the way in which we think about the product and its direction.
After an initial warm up exercise we dived straight into Product Pinocchio. The game involved the following five exercises:
What am I like?
This exercise is all about each group describing their character using adjectives and phrases. To help some groups it was useful to use associations such as ‘what animal would your character be’ or ‘if your character was a celebrity who would he or she be’.
What am I like? Post it note exercise to define the values of the product.
What are my values?
The purpose of this exercise is to get the teams thinking about how their character would respond in a specific situation. So for example, how would your character react to someone asking he/she for change in the street? would they be kind or cold to that person? the aim of this exercise is to tease out the characters values from its behaviours in a particular situation.
What are my values?
What is my community?
Who does the character hang out with? What is the characters circle of friends? Who does she/he interact with in their daily lives?
What is my community?
What makes me different?
How does the character stand out from the rest of the crowd?
What makes me different?
What is my mission in life?
What motivates the character? What keeps him or her up at night?
What is my mission in life?
After tackling these five exercises the final task was to prioritise the characteristics . This was done by dot voting against the characteristics the team felt best reflect the aims and aspirations of the product. The output of this prioritisation is key as it enables the team to arrive at a consensus and also provides triggers for design stimulus and a set of principles or criteria that can be used as a reference throughout the product development.
The feedback following this workshop was very positive, everyone felt engaged and that it was a successful exercise in shaping and defining what the product should be and what we should be aiming for.
As with all brainstorming exercises the technique becomes more refined with practice. When I’m conducting this exercise again there are number of things I would repeat and a few things I would change. Useful things to bear in mind if you are running your own Product Pinocchio workshops in the future are:
A brief run through the exercise at the beginning (using a popular product) is a useful technique to get the group warmed up and really helped to set the scene.
Right at the beginning of the workshop give people a sense of how their work and the output of their exercises will be used to inform the product development.
At the end of each exercise get the groups to feed back to each other.
Prioritisation of the output from each group is important. I did all the prioritisation at the very end however in retrospect it may have been more manageable to do it after each exercise and then summarise at the end.
Give each group plenty of examples at the beginning of each of exercise. This helps to contextualise what they are brainstorming and start them off in the right direction.
I found some groups did better at some exercises than others. This is ok as long as you get the groups feeding back to each other so they can inspire each other and take learnings from other groups into subsequent exercises.
With workshops such as Product Pinocchio, product development can be fun and engaging and change the way we capture stakeholder, business, user requirements and ideas.
The creative process is riddled with unexplainable moments, this scene from Mad Men captures the frustration of losing an idea to that moment of genius where one piece of inspiration sparks another.
A new section on the BBC Music website launched today called Music Showcase. This section brings together all of the best audio and video music clips from the BBC and enables you to browse them in collections compiled by presenters and staff. As its just an alpha release this will be the first of many iterations with more improvements and features released as we move to beta and then a final version.
It’s a great achievement and lots of talented people have worked on creating a compelling experience for music loving audiences. One of my favourite features is the play bar. For the first time on a BBC website its possible to have a continuous watching/listening experience as you browse. The service also features around 3000 clips at launch with more to come and a selection of collections made by our own DJs and presenters.
For me this is an exciting milestone as I think we have launched a distinctive music service, which is no easy task given the huge number of digital music services that are out there. It’s an important launch because for the first time its possible to find music content from the BBC outside of its original full length context. The iPlayer does a good job of aggregating full length programmes and if you know what you are looking for its possible to navigate your way through one or many programmes to watch or listen to your favourite artist. However this can be a hassle if all you want to hear is a specific interview or live session for example. With the music showcase its possible to view an aggregated view of short form content in a number of different ways such as genre, artist and most popular. This is a more intuitive and appropriate way of navigating music in the digital space, providing a neat way to be entertained and discover new music.
From the outset we focused on developing a service that fulfilled what audiences wanted from a BBC music website. One of the key pieces of feedback we received from people was having curated collections of content from the talented people that the BBC employs. This provides a unique angle on the content which can be inspiring, for example check out this interview with Marvin Gaye featured in the Gideon Coe collection. Andy Puleston, Interactive Editor, discusses the editorial aspect of the site in more detail over at the Music blog.
In terms of the overall user experience of the website we have kept things simple focusing on putting the music at centre stage using a contemporary bold design. As well as the seamless playback we have created an intuitive interface that includes useful features such as being able to switch between different views of the content, quick access to collections and clips and an artist quickfind. Sacha Sedriks, a Senior Designer on my team, has posted his thoughts on the interaction design of the website, highlighting both the innovation and challenges we encountered in the creative process.
This is the first step in what is going to be an exciting 12 months for music on the BBC!
It was the end of a really busy and I was making my way home when I saw this poster on the tube.
It made me smile and contemplate for a moment. It’s a simple intervention that gives a fleeting distraction from the chaos of the usual peak time tube journey. The quotes are also announced by London Underground staff either on the train or the platform. I haven’t experienced this myself but you can see a video on the BBC News website. What I like about the concept by Jeremy Deller is that its simple and it has humor and these two ingredients can make a profound difference to everyday life when you find them in unexpected places.
‘A Story of Deception‘ at the Tate Modern is a comprehensive exhibition of work by artist Francis Alÿs. What I like about Alÿs’s work is how each of his actions have an underlying social and political motive but are carried out with humour and a sense of absurdity.
The exhibition is inspiring, surprising, funny and at times it seems totally implausible that someone would do the things that Alÿ’s manages to carry out. ‘Re-enactments‘ is the work that springs to mind. Here Alÿs buys a gun and walks down the street to see how long it will take for something to happen and after about 11 minutes he is arrested. Somehow he manages to convince the Mexican police to re-enact the whole thing.
Francis Alÿs in collaboration with Rafael Ortega Re-enactments Mexico City, 2000
The work ‘When Faith Moves Mountains‘ is particularly poignant. The video is a documentary of how 500 volunteers took part in the act of shovelling a sand dune and displacing it by a few centimeters. It’s both futile and heroic and watching the spectacle is inspiring. For me it was interesting to hear how the students interpreted their involvement with the work and the concept. They describe many facets of Alys motivation behind the work such as the politics, its social element and how it will live on as legend passed down in an oral tradition.
Francis Alÿs in collaboration with Cuauhtémoc Medina and Rafael Ortega When Faith Moves Mountains (Cuando la fe mueve montañas) Lima, 2002
There is almost something very Monty Python in the work ‘Sometimes Doing Something Leads to Nothing‘ where Alÿs pushes a block of ice along the streets of Mexico City until it melts to nothing.
Another one of my favourites in the exhibition is ‘Rehearsal‘. In this performance Alÿs drives a red VW Beetle up and down a road accompanied to the soundtrack of a brass band rehearsing on his stereo.
Francis Alÿs in collaboration with Rafael Ortega Rehearsal I (El Ensayo) Tijuana, 1999-2001
‘Tornado‘ captures the essence of the exhibition well, its humorous and unbelievable at the same time. Watch carefully as the artist runs after a tornado with the intention to be smothered by it.
