Origami wireframing

The Desert Island Discs project had a very aggressive development plan. At several points in the project we had to work very quickly.

As usual, when working for a large employer, there were many stakeholders, each of whom needed to be satisfied in order to achieve signoff.

One of the crunch points we found was when we were trying to achieve signoff on the wireframes. One of the designs that Magnetic North proposed was not accepted at the review meeting. We could have waited for another round of amends and another opportunity to get all the stakeholders in the room.

I realised that instead of waiting for these amends, and struggling to get all our stakeholders to signoff a new revision, we could do someĀ (really bad) Origami :-). All the necessary UX was on the original design, just not laid out in quite the right way. So……

We took multiple copies of the original wireframe, folding each wireframe to create individual components. Then we repositioned the components on the table. Once we had a layout we liked, we took a photo using a camera phone. You can see the photo we took below:

By doing this, we were able to achieve signoff quicker, because all of the stakeholders were able to signoff the origami wireframe, without needing to wait for another set of amends and wait for another chance to gather together.

You can see the final design of this page here.

website-rapid-wireframing
Components of the original wireframe rearranged and then captured using an iphone camera.

Desert Island Discs

The desert island discs project is one of the highlights of my career. It does lots of things that I think a redesigned site should do, and working on it gave me the chance to work with some of the best content the BBC has (which lets face it, is pretty good :-)).

You can find out about the project here, but suffice to say it has been months in the cleaning, curating and building.

My particular role was to lead the information architecture for the BBC. As part of the external projects team (EPIC) for the BBC, I worked closely with magnetic north., a brilliant agency, and a brilliant team.[Props to @cazsotorrio,@raymosley , sanj and Adam Todd amongst others for excellent work!]

To start the project, I suggested we domain model the experience, which starts with considering ‘What is desert island discs?’.

The constituent parts of the desert island discs experience are (I believe):

1. The castaway – the guest being interviewed.

2. The presenter

3. The music

4. The artists who wrote and or performed the music.

5. The luxuries.

6. The book

7. The author of the chosen book.

These are the core concepts in the domain model – and each concept has a relationship to other concepts. By starting with ‘What things have we got?’ and ‘How are these things related to each other?’ we begin to articulate the data we have to gather and clean.

Having defined the concepts, we can then define the attributes for each concept. For example, a castaway can be a musician (which means they can have a musicbrainz identifier – useful for the rest of the BBC and elsewhere to identify them). A castaway can also have a wikipedia article about them – which can be easily used to identify that person, since it can be used to derive the dbpedia URL for that person. Having unambiguous identifiers which are webscale (ie used around the world, across the web) helps us syndicate this content if we choose to. It also helps us in the BBC, because these identifiers are used across the business. So, if the music team want to build deep links into the DID site from /music , they can, because they know exactly which artists are being interviewed or played on the programme.

Once we know what data we might want, we can also start to describe a full list of user stories (the things we want users to be able to do).

As part of this redesign, we were required to use much of the BBCs existing infrastructure. Since much of this is well built, it also encourages good practice. For example, we now have a page per episode of desert island discs. We also have a tracklist for each episode, which tells the audience which pieces of music were chosen. This tracklist data is then used on /music to populate parts of artist pages, which gives us many links into the desert island discs site, which benefits the DID site ‘Search Engine Optimisation’.

BBC - Desert Island Discs - Home_1301506560181
The data cleanup and assembly for DID took a long time, and also involved a ‘traditional’ IA piece of work – classification. Jo Attree (@romneymarsh) did a great job classifying the castaways and their luxuries. It’s perhaps worth pointing out that this isn’t a traditional library classification – it’s a classification to try to build a great user experience. So, at one point we had a very precise classification, which had several categories with only one castaway in them. Great, accurate, but not that great for the audience if they select a category to be shown only one result. This is what we might call ‘a cul-de-sac’ of an experience.

So, each of the categories on the site have many castaways in them by design. My rule of thumb is at least 5 castaways for each category – not a cul-de-sac to be found until you start really using the filters.

The results of this classification are that the related episodes part of a castaway page really works. The site data is stored in solr, and (while my technical knowledge isn’t expert) solr is matching the classification given to a castaway, and then prioritising those castaways who have audio you can listen to.

As part of the site redesign, you can also now use the URLs of the different pages to talk about the site. Castaway URLs (each castaway has a unique URL) and search URLs should deep link into interesting results (or maybe this one is more interesting) you can blog about!

I am also particularly pleased that this is a multiplatform site – one URL for one thing, delivered in a way that is appropriate for the device being used. So, each URL can be shared and browsed using a mobile phone or a PC.

I hope those of you with screenreaders find the site reasonable to use – if not let me know and Ill try and get it fixed.

Hopefully you find browsing the archive to be useable and fun, I hope we’ve done the great content justice.

Quizmaster – multiplatform quiz publishing with accessibility

It’s been a while since I did a blog post. I thought I would write about one of my favourite projects of the last few months.

Quizmaster is a new content management system for the BBC which is specifically focused on multichoice quizzes. Using it, content producers at the BBC can quickly develop and deploy a quiz. The quizmaster platform publishes to facebook, flash, ajax and mobile (Ajax and J2ME) platforms, and is fully accessible.

The project started in March 2009, with a small (but perfectly formed?) company called Kite.

[you can also read their take on the quizmaster platform.]

Back in March we were asked by BBC Radio 2 to develop a multiplatform quiz for the Ken Bruce show, an online version of his ‘Popmaster’ quiz.

popmasterscreen1

As the BBCs Lead Information Architect on this project, and part of the ‘External Projects and Integration Consultancy’ team, it was my job to shepherd the project through to launch. It’s quite a simple looking quiz, but arriving at the final result was a long, and surprisingly convoluted journey.

I can’t take much of the credit for it really (most of that goes to Kite!) but there are bits I’m particularly pleased about.

1. It is fully accessible.

We tested the different versions of the quiz with a wide variety of audience. This included testing with blind and partially sighted users (result: we increased the default amount of time you get to make an answer, and increased the vertical distance between the hot spots for answer buttons in the design). Kite also rebuilt the flash version to be more accessible using tab/enter keys).
The vertical distance between answers increased as a result of user testing.

popmaster multichoice question page
We also did testing with autistic users (result: Some of the comments the presenter makes were made less negative, since autistic users we tested had difficulty recognising them as humour and got upset by them. This is something that I was surprised about at the time, although with hindsight it seems obvious – it’s one of those results that makes me love user testing!

Other interesting bits – the options screen, accessed from the quiz home page, and its impact on the quiz (again trying to keep it accessible).

[But not everything can be made accessible]

The last point about accessibility is the timer. We could have taken the timer out for some parts of the audience (for example if you have difficulty reading the answers within the time limit). However, it wouldn’t be the same game.

Taking it out would fundamentally change the offer to the audience, and the core principal of the BBC when it comes to accessibility is to offer as many people as possible the same experience.

Hopefully, with this project, we achieved that. I hope that the audience with accessibility needs enjoy the resulting experience. If not, let me know, and I’ll try and get quizmaster adjusted.

2. The design is flexible, the technology is reusable.

The same technology platform has now produced many different ‘multichoice quizzes’ for different parts of the BBC, all of them pretty quick and easy to produce, and fully accessible from the start. It would be easy to build a one-off product that delivers a small amount of functionality to bbc.co.uk. I’m pleased that we designed and built a product which has been reused many times across the BBC.

Here are some examples of quizmaster in use:

Popmaster – the original, flash version.
Popmaster – the ajax version (more accessible for screen readers)
Popmaster mobile versions (j2me and ajax)
Popmaster on facebook

glastonbury mobile iphone quiz
Glastonbury 40th Anniversary Quiz – Flash version here
Radio 3 Proms Quiz- Flash version here
And an interesting extension of the original version – the 5live world cup shootout quiz (with a tournement/football match structure).
This version of the game was playable on iPhone and Android mobile phones.

promsmaster question screen
An example question screen from Radio 3’s Proms quiz
The Evolution of the Quizmaster

You’ll notice some subtle changes through the different versions, as we try to refine the experience. For example, the proms and glastonbury versions score points for each tenth of a second that is left on the clock when the player answers correctly. In popmaster we scored for each second. This resulted in a large number of players having the same score (not good). The 10th of a second scoring gives much more variations in scores.

3. Social integration

My favourite way to play these quizzes is on facebook, because it’s really easy to invite your friends, and I think its when comparing scores with friends that it becomes truly fun! [even if like me, you’re rubbish, so score really badly!]

My favourite user journey is ‘Send to a friend’ from the home screen (after you’ve decided to play with sound or not), or as I called it, the ‘I forgot to send this quiz to my mate, but I like it and I don’t want to play the whole game before being able to tell my mate about it’. That button (and rather wordy journey) is one I’ll take credit for ;-). I think its actually quite important in improving the chance that the quiz can ‘go viral’ amongst internet users.

Let me know what you think.