BBC People presented by Faith Mowbray at the BBC Connected Studio

The brief for the event was focused around One Service. We want to create experiences and connections across the BBC portfolio so that whichever of the ten BBC products you are using it's possible to move between them seamlessly through features and interactions.

It's a brief that conveys the role of User Experience and Design at the BBC. The team work right across the BBC portfolio ensuring that whatever product we are working in we are reflecting the Global Experience Language (GEL) which informs the way our products look and behave.

The UX&D Connected Studio highlighted how complex meeting this challenge is but it also brought some fresh perspective on how we might begin introducing some great new features that could make a really distinctive digital BBC service.

Six teams were shortlisted for the build studio on October 30 and 31. The outcome of those two days varied between the teams but the most successful projects did three things really well:

1. They had insight that illustrated that their idea was meeting a real audience need.
2. A clear articulation of why the project would help to achieve the One Service ambition.
3. A demo or prototype to bring the idea to life.

At the end of the second day all six teams presented 12 minute pitches with a Q&A afterwards from the judges. Here is an overview of each of the ideas.

383 Project showing a demo of their project BBC Highlights

383 Project created a prototype called BBC Highlights. It's a feature that enables the audience to create and share their own personal highlights. Using Top Gear as an example they illustrated how their feature could work in the context of the current BBC video player that exists across bbc.co.uk.

When the team pitched the project they did some research using Twitter and found that lot's of people refer to particular moments within programmes, sharing timecodes or references. This sparked their motivation behind the project and it was great to see how they pursued and developed their idea from the pitch to a working demo.

The pitch was a good example of how the team took on board the brief and thought about how their concept addresses the BBC's four screen strategy.

In contrast the project Crowd Surf evolved quite a bit from the original idea that was pitched during the Creative Studio. The core idea of reflecting moments of popularity across content remained. However, the method of navigation and discovery moved away from the idea of zooming in and out of popular content and seeing the number of people watching/listening.

Instead the team chose to develop a multi direction nav that delivered onward journey's deemed most popular by other users.

BBC and System Concepts demo Crowdsurf

The most radical idea during the connected studio was Face Value by Soda and Nottingham University's Mixed Reality Lab. The team developed facial recognition software that could respond to audience reaction. So it could tell you whether or not the person sat in front of their laptop with a webcam switched on was happy or sad watching something on BBC iPlayer for example.

For me the idea was reminiscent of the Meet the Listeners project by Radio 1 back in 2010 but that relied on people taking photos of themselves and sending them to the station.

This idea sounds fairly novel but it's an interesting concept to consider when many devices that people buy now have built in cameras. It's a method of input that is rarely considered when designing experiences for content, but as the recent version of iPlayer for Xbox (that uses kinect for gestural navigation) illustrates maybe that could change in the future.

Soda and Mixed Reality Lab showing a demo of their face recognition software

The agency TorchBox teamed up with BBC to explore an idea called the Live Companion. It's an app that enriches a live event by collating relevant information from around the BBC and enables the audience to add their voice creating a mix of social and BBC content. The team put together a simple prototype using Javascript and CSS to present the idea.

Sarah Plant from TorchBox has written a good overview of her experience of the Connected Studio which is worth a read.

Torchbox presenting their mobile app prototype Live Companion

I've always been interested in how you can use time as a method of navigation through content so it was great to see one team try and tackle this concept.

Mudlark and the BBC teamed up for the project Time Machine - an interactive timeline of BBC content that lets you explore the threads of a story. The used BBC News as their starting point. So, if I'm reading a story about the Leveson enquiry for example, Time Machine would enable me to go back in time and explore all the events leading up to the most recent event.

BBC People is a really compelling concept that explores the idea of using BBC talent, historical figures, contributors or subjects as a way to navigate content across products.

Professor Brian Cox was their example of choice and although the team didn't have a working demo to show they were able to tell a good story with some nice illustrations of user journeys that conveyed how their idea would meet the audience need they had identified during the creative studio.

It was a tough couple of days for the teams but as a judge I found it really inspiring. It was interesting for me to see the range of approaches that the teams took to convey their ideas and also the fidelity of their visualisations and prototypes.

We Are Mudlark presenting their Time Machine concept

Hopefully the UX&D Connected Studio provided the teams taking part with an insight into the BBC, not only its complexities but also the opportunities that exist to create new kinds of experiences.

It was good to have people from my team at the BBC working together with external companies as it gave them an insight into how other teams work and think. This kind of collaboration is important to encourage innovation.

Although we only selected a couple of projects for the pilot stage each project that was presented during the build studio offered lots of food for thought in terms of how we might approach creating a One Service BBC.

Yasser Rashid was formally head of User Experience and Design for TV & iPlayer, Radio & Music. He has now left the BBC.

The launch of BBC iPlayer Radio in October was an important step in the evolution of BBC Radio online. It's the first time we have been able to think about the future of the radio websites in a holistic way.

For the User Experience and Design team responsible for iPlayer Radio it was more than just a redesign. It was a complete rethink of the BBC Radio digital portfolio.

We've made a video to give an insight into what we do and who we are. It's only an overview but if you do have any questions about specific user experience topics then it would be great to hear them.

There will be a blog post soon about the iPlayer Radio design process.

Yasser Rashid is the Head of User Experience and Design for TV & iPlayer, Radio & Music.

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 BBC iD right now is a dynamic, real time Radio 1 and 1Xtra:

• bbc.co.uk/radio1/beta
• bbc.co.uk/1xtra/beta

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.

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 video of an early prototype is available to watch on YouTube. 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 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 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 also available on Yasser's personal blog.

It's available for the Chris Moyles show on weekday mornings (6.30am - 10am) and Annie and Nick on Sunday night (7pm - 10pm). Go to the Chris Moyles or Annie and Nick pages during those times to check it out. Outside of these times you won't be able to see it - but that's why I've written this post. It is also only available for one week as we are trialling the service and hope to get as much feedback as possible to see what audiences think of the concept.

Read more and leave comments over on the Radio Labs blog.

Yasser Rashid is Creative Director, Audio & Music Interactive.

Thanks to the work of the central Future Media & Technology (FM&T) team in rolling out the new page layout system called Barlesque, we are now updating all our radio network websites with a new look and feel and integrating the programme and schedule data from /programmes. At the same time, we have have had another team which has been working on improving our event websites.

Yasser Rashid is a Senior Designer, Audio & Music Interactive.

Read on and comment at the Radio Labs Blog.