Today we have launched the new Radio 1 and 1Xtra homepages that completely reinvent how we think, design and interact with a radio station online.

What you see on the beta websites right now is a dynamic, real time Radio 1 and 1Xtra:

bbc.co.uk/radio1

bbc.co.uk/1xtra

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.

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.

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.

The third approach illustrates how we decided to combine the previous two designs with logical timeliness and a 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.