Redesigning the Radio 1 and 1Xtra User Experience online
Post categories: Radio & Music,ÌýRadio 1,Ìýuser experience & design
| 14:00 UK time, Tuesday, 20 September 2011
1Xtra beta home page
I'm Yasser Rashid, Senior Creative Director responsible for the user experience and design team who work across Radio, Music, TV and iPlayer. Last week the new Radio 1 and 1Xtra homepages launched as beta, completely reinventing how we think, design and interact with a radio station online. What you see on the beta websites with a ³ÉÈË¿ìÊÖ iD right now is a dynamic, real time Radio 1 and 1Xtra:
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.
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. A . 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 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 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 who included Tim Stansbie, Matt Glub and Oli Ashford to write the code and build the admin system.
Yasser Rashid is the Senior Creative Director for Radio & Music,TV and iPlayer. This post is .
Comment number 1.
At 26th Sep 2011, Paul Shanahan wrote:Good effort boys and girls
Complain about this comment (Comment number 1)
Comment number 2.
At 11th Oct 2011, noblematt wrote:I have to say this website design is everything that web design should not be, it just too me 10 mins to find out the teen award results and I'm a web designer, I understand how navigation should work, and I'm afraid this doesn't work. The web needs to be simpler, information is king and this site has way too many photos and no where near enough information. too many bright images are just causing visual stimulation overload. The last site buy Studio Output was better but not perfect.
Try again I'm afraid.
Complain about this comment (Comment number 2)
Comment number 3.
At 19th Nov 2011, markiteight wrote:Overall - I like it a lot - the new design is visually engaging. I particularly like the 'Live Panel' it is a great visualisation tool for radio and the flow, carousel treatment is striking and an appropriate adaptation of a stream - good UX. A great feature to include, would be to allow users cue-point access to each quilt item in a DJ stream in the past. This would allow direct on demand access - negating the need for scrubbing - this would be so great! I think the 'content-quilt' as an idea is clever however the visual execution is a bit disjointed and UI-unbalanced.
Complain about this comment (Comment number 3)