Recently I sat on a panel titled ‘UX’s role in great branding and how to get it right‘. The panel included Lawerence McCahill from Spook Studio, Jon Darke from Every Interaction, James Bloom a freelance Creative Director and discussion was chaired by Russell Vaught. The audience were a mix of start ups and UX professionals.

In summary we discussed why UX is important in terms of brand strategy, tone of voice, the importance of good UX to build trust and loyalty with an audience, start ups vs big organisations, good and bad examples of UX and branding, user testing, iterating products and where to start with the brand experience.

The evening finished up with pitches from three start ups who talked through their user experience problems. Hidden Little Gems, a facebook app suffered from button language and the limitations of Facebook, Bagservant faced problems with prioritising their brand message and Yoomoot struggled with their complex commenting system.

I thought I’d capture a few notes and key themes from the discussion.

Tone of Voice

Tone of voice is important. Get it right and you can engage and grow your target audience, get it wrong and people will be turned away and may never come back. The UX is can support the tone of voice in many ways. A playful UX can reflect the playful nature of a brand and so on.

For large organisations maintaining a consistent tone of voice can be tricky because of the heritage, legacy and multiple brands an organisation owns.

Radio 1 and Radio 4 are two stations that attract very different audiences and the UX is prioritised to support the two different audience needs. However, despite the diversity of brands the BBC’s tone of voice is maintained through the Global Experience Language (GEL). It’s the common thread that enables everything that the BBC does on digital platforms to hang together in terms of typography, interactions and design patterns.

Start ups have an advantage because they don’t have any legacy. They can evolve the brand and tone of voice over time. Dropbox is a good example. They have done a good job of making the complicated task of sharing files simple and the relationship between the UX and branding is really strong and supports the tone of voice they express through the copy and illustrations on their website and apps. Check out the tour of Dropbox as an example.

Why UX is important to brand strategy?

If I attempted to purchase something through a website and it was complicated, wasn’t secure and didn’t inform me whether or not my purchase had been successful then I wouldn’t trust the brand and I wouldn’t use the website ever again. This is why UX is important to brand strategy. Good UX is pivotal to building trust with audiences. If its a great experience that is engaging and reliable and then people are likely to use the product or service again.

User Experience beyond the website?

We moved into service design territory when we discussed how user experience needs to extend beyond just a website. Amazon was cited as an example of good customer experience not only online but also the service provided when calling them and returning products. Whether a start up is offering digital or physical products how they respond to their customers particularly when things go wrong is crucial to their success. This is something that can’t be automated and a human touch is often the best way to resolve issues.

User testing

Testing was an interesting area of discussion where we talked about how important testing early and iteratively is to refining a user experience. In terms of scale (e.g. number of participants and testing facilities) it depends on the project and the complexity of thing that you want to test. We also touched on the idea of A/B testing (or sometimes termed as split testing) and how that can also to refine different interactive features, layouts and positioning of buttons or calls to action. Stats also play a role in optimising the UX. Being able to track not only user journeys but also interactivity provides a rich insight into who is using what within a product or service.

Simplicity and transparency

It was mentioned a few times but generally a lot of what we were talking about was common sense. Build a brand and create a great experience around it to keep people happy and coming back for more.

Of course this is easier said than done. Many of the examples we cited are the result of refinement over time using a number of different methods including stats and testing.

Keeping a proposition simple is often the best way to launch a product or service. It’s easy to get carried away and try to cram lots of features. Being disciplined with what stays in and what doesn’t means that you can keep your audience engaged over time. Offer them the best possible user experience with a useful but initially minimum feature set and then introduce more features as you iterate and grow your audience.

Transparency is important to. Maintain a dialogue with your audience and keep them up to date. This helps with building anticipation for your next release and also when things go wrong your audience is more likely to bear with you while you get things right because the dialogue and trust has already been established.

The iPhone app contains a number of challenges to build an object within a certain time limit. Once assembled, you place the object on the cardboard and then take a photo to win points and unlock further objects to build. There is also a two player game and an option to create albums of your own objects that you can catalogue and share your creations. To see how it works check out the video on YouTube.

It’s encouraging that a company that has such a heritage and legacy are able to experiment and explore how they can evolve their products and introduce new ways to experience Lego. It feels innovative because it adds a new dynamic but doesn’t change the fundamental aspect of what people enjoy about Lego , that it’s creative, imaginative and tactile.

Life of George get’s the relationship between physical and digital play just right and it feels like Lego are uniquely placed. Their physical products are still in demand and are compelling for kids, they don’t have the same issues as the music or publishing industry where the pendulum has swung strongly in favour of digital products and distribution.  Personally I think that the tactile nature of  toys and books is hugely important for children but it’s inevitable that kids wil get exposed to and be curious about digital tech early on in their lives especially with their mum’s and dad’s using phones and computers in front of them. What Life of George shows is that technology can allow for new physical experiences without getting in the way.

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.

The new Radio 1 homepage

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.

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.

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.

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

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.

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.

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.

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…”.

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.

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.

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.

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!

You can read more over at the BBC Internet blog.