« Previous | Main | Next »

Developing the World Service archive prototype: UX

Post categories:

Pete Warren Pete Warren | 19:54 UK time, Thursday, 29 November 2012

The World Service archive prototype currently contains over 70,000 programmes and 40,000 distinct tags. As designer, my aim was to make the interface intuitive, frictionless, uncluttered and attractive. We want to encourage users to not only enjoy the archive, but interact with it and help us improve the metadata.

Image of tag voting

Theo Jones led the design process from the outset and developed an initial interface for an earlier version of the archive. Shauna Concannon did user research and statistical analysis to help inform the subsequent design decisions. I became involved to build on the existing design thinking.

As a team, we had regular catch-ups. We investigated who might use the archive and what features they would need, from the homepage entry point through search/search results, to the programme pages and user interactions (playing the audio, selecting relevant images, and tag voting and additions). New ideas for additional features and interactions required further design exploration, through layout and interaction pattern wireframes.

Image of early wireframes

After an initial period of exploration, Theo, Shauna and I had a design review session in which features were re-prioritised from a practical user-experience perspective. This led to a series of sprints focused on delivering the necessary designs and interaction patterns to the developers/software engineers. This was a productive, conversational process between design and development.

As we put new features in front of users, we took their feedback on-board in improving the prototype, and continued to iterate UX improvements until launch.

Home page

Some users know exactly what they're looking for whereas others are happy to browse. Because of this, the homepage was designed to provide more than just a Search. Initial aspirational layouts contained some future-thinking ideas which were impractical to implement in the given time. The designs progressed towards a clean, glanceable layout which provided choice features which facilitated serendipitous content discovery: Editorial Picks (items of interest chosen by us), Recent Items (most recently listened to by any user), and On This Day / In The News which connected timely news events and topics to items in the archive. This helped avoid overwhelming users with the magnitude of the archive. However, if the user knew exactly what they wanted, the simple Search provided the obvious way in -- the Search engine itself was improved according to user feedback.

Image of home page

Search results

Exploratory designs for the Search results included the ability to sort and filter the Search results. Some of these options were parked for future development but we did manage to implement filtering by year of broadcast. I applied a simple information and typographical hierarchy to each result and kept the individual programme items spacing generous to help users scan the pages.

Image of search results page

Programme episode page

Users listen to World Service archive programmes on the individual programme episode pages. These pages contain programme information (date, genre, programme brand, programme title, synopsis and duration), a tag-related image, an audio player for listening to the programme, and a list of programme tags.

Allowing users to interact with the tags required thinking. The logic of voting a tag up or down, and then removing your vote, required clear behavioural rules. I researched existing voting interaction paradigms, then Theo and I sketched-out different interaction possibilities and behavioural logic variations on layout pads before I designed a digital layout for implementation.

Image of tag vote logic diagram

The images were pulled in from Ookaboo according to the programme tags. Although this was a nice-to-have feature, it helped add a splash of colour and visual interest to an otherwise minimal interface. We constrained the image sizes to help maintain visual consistency regardless of aspect ratio. Sometimes the machine-picked image seemed less relevant, so a carousel was added to allow users to pick alternatives.

Image of programme episode page

The World Service archive prototype UI as it stands is clean, functional and minimal. However, some of the original exploratory design-thinking remains unrealised. We are looking forward to applying fresh thinking to the features and behaviours, with a view to producing bold new interaction patterns in the next phase of the project.


Be the first to comment

More from this blog...

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.