« Previous | Main | Next »

Building the Radio 1 and 1Xtra Home Pages

Post categories:

Chris Johnson Chris Johnson | 15:00 UK time, Thursday, 15 September 2011

Screenshot of home page, with new content streaming right to left

Radio 1 home page beta

About a year and a half ago I was sat at my desk writing a very ambitious proposal to re-invent Radio 1 online. 

Radio 1 has had a website for over 15 years and it has always done us proud. But recently we've been struggling to keep up with the radio station. With the internet at the centre of young people's media consumption it was critically important for our website to not only be a portal for experiencing the best bits, but to act as a platform to visualise and interact with live radio, and a place that can stimulate and reflect reaction from social media spaces.

Somehow I managed to convince people that this was possible and after months of research, wire-framing, design, prototyping, coding, testing and publishing, I'm excited and delighted that we can now share it with you.

Today we've launched new homepages for Radio 1 and 1Xtra that aim to re-invent what the website is for and how you use it.  There is no longer a radio station and a website, they are one and the same.

You can try out the new homepages here:

For now, you’ll need to get a BBC iD to access them.

When designing and building the new homepages we followed three key principles: They need to be as live as radio, content should be immediately and easily accessible and they should cater to your personal tastes.

Live

From now on both Radio 1 and 1Xtra will have a live feed that let’s us visualise what's happening on-air, as it happens. If we're playing a track, you'll see what we're playing; if we've just taken a photo of a guest, you can see them immediately; and if the cameras are on you can watch a live video stream of the studio right there in the page.

You can now send a message to the studio for free (once you've signed in) so you can join in with features and games on each show.  Or if you're using SMS, Facebook or Twitter you can get in touch that way too and we'll feature our favourite messages, comments or tweets in our feed.

Immediate

Everything you see on the page is clickable. So if you're interested in a track we're playing, you can click on it to listen to a sample and find out more info about the artist.

Also, if you want to see a video we're talking about on-air, you can click and watch it straight away.  We've even improved the search so it’s much easier to find specific things.  Just begin typing what you're looking for and a number of options appear.

Artist info panel about

Personal

Radio 1 and 1Xtra can mean a lot of things to a lot of different people. You may like some programmes but not others, you may only be into certain music genres or you may just want to get access to the latest celebs. The new homepages give you the ability to tell Radio 1 what you love.  Whether it’s a particular track, or even a photo or video, if you tell us you love it we’ll suggest some more things you might like back. You may discover things you’ve never seen before, interviews or mixes you’ve never listened to or artists you’ve never heard of.

Also, we’ve made it much easier for you to keep track of your favourite DJs with the ability to build a list of the DJs you like and to have links to their pages all in one place.

Boxes on screen saying

So that’s a quick tour of the main features but there’s plenty more to play with. If you haven’t had a go yet then now would be a good time, or if your interested in reading more background, read on.

Background

Without doubt this has been the most rewarding project I’ve been involved with at the BBC, but it’s also been one of the toughest. 

Given the breadth of what Radio 1 and 1Xtra offer and the vibrant personality of both stations it was always going to be a challenge to meet their every demand, but there were other factors to consider too. 

We had to satisfy BBC design guidelines, meet rigorous technical standards and the pages had to scale to large audiences. Luckily we had a great team who were cared deeply about getting every detail right. 

Design-wise the homepages are unique and beautiful, they allow the brilliant images that come out of Radio 1 and 1Xtra every day to do the talking. They’re really simple and fun to use, making discovering more about the stations a real pleasure.  Yasser Rashid, Tom Spalding and the rest of the UX team have done a magnificent job in bringing together a number of new concepts in a elegant and exciting way.

Yasser will provide more detail on how the design process worked very soon.

Tech-wise we’ve really pushed some boundaries too. 

The site is built with the next generation of web-browsers in mind (though we're pleased to say it works on older ones too) and it feels much more like an app than a website.There's a huge amount of data to explore, every programme, video or audio clip we make and thousands of tracks are all at your fingertips.

This is not only a testament amount of effort we've put into our technical infrastructure over the years, but to the engineers at Kite (the company who won the commission to build the homepages). The implementation meets every aspect of the ambitious design and the unique combination of Javascript and push technology make live updates to the homepage feel like magic.

Behind the scenes at Radio 1 HQ we've been making a number of changes to the way we work in order to ensure the live experience is as good as it can be.

Over the past year you’ve seen us evolve our webcams from a simple handheld camera to a fully vision-mixed multi-camera offering. We’ve also been optimising the play-out systems so we can tell you what track we’re playing, more often.

But this is just the beginning and as time goes on we hope to evolve and improve what we provide in the live feed for each show.

I don’t expect the new site to be 100% perfect, but I do believe the ideas, principles and technologies it uses will be crucial to the future of Radio 1 as it continues to grow in the online world. 

Please send us your thoughts and feedback at bbc.co.uk/radio1/help/homepage/feedback/. The website will be available as a beta trial for the next few weeks.

Chris Johnson is a Senior Producer for Radio 1/1Xtra Interactive

Comments

  • Comment number 1.

    Just tried a few clicks on bbc.co.uk/1xtra/beta/

    Clicked "Music"

    First bit of content I clicked "Crissy Criss at Creamfields" came up with a "no longer available" message.

    The "Dubset/D&B" link underneath this takes you back to the old site.

    Not really having much joy tbh

  • Comment number 2.

    Hi Briantist, thanks for reporting those bugs... they're now fixed.

    With regards to the links to pages on the old site, we're not re-launching every page at this time, just the homepages.

    Thanks,
    Chris

  • Comment number 3.

    It's a really nice idea and hope it works in reality. It looks great. Just one small thing - i don't think there's any way to 'unlove'.

  • Comment number 4.

    It looks very nice and I think it is good that the amount of visualisation is increasing.

    However, I'm really disappointed that the page is so heavily Flash based. Why? It doesn't work on my iPad, it doesn't work on my Mac where I don't have Flash installed, and it won't work on the Metro version of IE in Windows 8.

    Flash is on the way out yet the new homepage uses it more than the old one! Bit disappointing for me. I hope it doesn't take as long To be dropped as it took the BBCmto move away from RealPlayer!

  • Comment number 5.

    Honestly, the thing I love most is that personalisation is being taken seriously. As for the shading round pop-ups and some of the other elements, it feels like they all need refining. It would be nice if I could unlike something by clicking on the solid heart to hollow it out. And sometimes it feels like you've decided to innovate rather than use some of the established (and better) GEL look.

    Are there any plans to be able to associate BBC IDs with other IDs (Facebook, Last.fm, etc.) to import a taste-graph?

    Thanks for the preview!

  • Comment number 6.

    ad551: I have flash disabled on Chrome on my Mac and the website works perfectly. It looks built in HTML5 rather than flash. The iPlayer side of content (Live stream, live video and playback stuff) is still flash, sadly. WIsh that would change to HTML5 too...

    I like the new site. The live feed isn't always updating exactly live. Sometimes it would just not update until i've refreshed the page. Seems like it stops refreshing itself after a while.
    I've said in my feedback to the site before, I really hope that Flash gets pushed out and iPlayer stuff also gets changed to HTML5 rather than Flash ...

    Still, onwards and upwards this is a great start!

  • Comment number 7.

    @6: The problem is there is no universal HTML5 video file format which will work with all browsers by default. H.264 (MP4) videos only work in IE & Safari, whereas Ogg Theora videos work in other browsers but not by default with IE or Safari. Until a universal format is settled up I doubt the BBC and others will be keen on duplicating content in different formats.

  • Comment number 8.

    Keith: WebM is getting pretty close:
    https://secure.wikimedia.org/wikipedia/en/wiki/Webm

  • Comment number 9.

    great job! still checking out everything - ya know, when you're used to something for years ... ;-)
    BUT i can't find the webcam. maybe my fault, but where can i find it?
    cheers.

 

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.