Paper prototyping

Following on from the development of personas (to help us define the types of users we're developing RippleRap for, and what their goals will be), we're now trying to develop the application that meets these goals.

I have two objectives here; not only developing a great user interface, but also exploring techniques that can be adopted by an open source developer (e.g. potentially someone who doesn't have access to the same resources or money as BT). The technique I've used is therefore a basic version of Paper Prototyping.

Paper Prototyping is the process of sketching out potential interfaces using paper and pencil, to be tested on users, in the hope of finding areas of the user interface that either need improvement or just plain don't work. Doing this in rough sketch format has big benefits:
  • The more polished the interface, the less likely that the user being tested will offer helpful criticism (if it looks finished, he or she will behave as though it is)
  • It's a great way of getting feedback before coding begins, which is one of the number one causes of poor user interfaces
  • Because the sketches are done in pencil, they can be changed quickly at almost no cost and re-tested almost straight away
In fact, as it turns out, the simple act of creating the paper prototype for RippleRap has lead to numerous improvements in the user interface. And it's been a great way of sharing our vision and understanding between the team. We haven't even conducted testing yet, but the benefits are already significant.

For those interested in the direction which RippleRap is taking, we're developing an "event stream" service that sits alongside the note taking / note sharing functionality. This event stream will contain Twitter comments, Flickr photos, blog posts and shared notes specific to that event. All this content will be stored locally and searchable - which is great where flaky conference wi-fi is concerned.

We're also adding a Twitter client, so people can tweet from their browser at the same time as writing their session notes and / or following the event stream. All optional and configurable, for the user and the event organiser.

I've laid out our paper prototype in three configurations so you can see how this might look (the view where you're taking notes will be the same as before, so I haven't included that). There are many other configurations not shown! Click the thumbnails for a larger view.

This is the first dashboard view, where you can see the event stream coming through. Tweets, Photos, Blog posts and shared notes are all shown in chronological order, the agenda can be seen alongside the event stream.

RippleRap - Dashboard (Timeline) view

This is the second dashboard view, where you can see Tweets, Photos, Blog posts and shared notes in each category.

RippleRap - Dashboard (Split View)

This view shows the Twitter client. Note we give users the option to add "#EventName" automatically to their tweet, which in turn means their message joins the event stream. We're adding a hashtag to the event name to promote good practice, but we'll actually pull tweets into the event stream using a terraminds search (the best and quickest Twitter search tool we've come across so far).

RippleRap - Twitter client

Having run through the user journeys using these paper prototypes, we're now ready to test on real users. Large companies would normally go through a costly and time consuming recruitment process, but we're not going to take advantage of that luxury (see objectives, above). So, the next visitors to Osmosoft Towers will get more than they bargained for!

Conducting user research using paper prototypes is a subtle art. I'll talk about this in a near future post. In the meantime, if you're interested in learning more, I can recommend the book "Paper Prototyping" by Caroline Snyder (the companion website at has been down for the last week or so, but if the book is anything to go by the site should be very helpful).

PS Thanks to Jon Lister and Phil Hawksworth for helping with the prototype, user journeys and general support!


Anonymous said…
It's obvious that you're putting a lot of thought into this - and it really seems to pay off!

I have often struggled with the issue of sketching out an interface myself.
These were my approaches:
* drawing on a piece of paper (very limited options)
* using Microsoft Visio (generally not a bad tool, but I'd be happy to hear about alternatives - especially with regards to FOSS)
* drafting an HTML/CSS testcase (often takes quite a lot of effort)
For some reason, I've rarely tried the scissors-powered variant of option #1 - will keep that in mind for next time!
Phil Whitehouse said…
Well, the really important aspect of this isn't creating a prototype, it's that we're creating it *for somebody else*. It forces us to consider things from the user's point of view, which is a constant battle for those creating interfaces. I need techniques that help me avoid falling back into the trap of developing a user interface for myself.

In my previous role, using something like Visio was a good way to do traditional annotated wireframing, which was typically the stage after paper prototype testing. It provided a higher level of detail once the main experiential challenges had been overcome (and also these projects had multiple stakeholders in multiple countries, so distributed sign-off was a factor).

OpenOffice includes a visio equivalent called Draw which might be worth a look. I'm not going to create wireframes for this project, as it will take much less effort to edit the entire RippleRap site (because it's based on TiddlyWiki) than develop a complete website. But for a non-TiddlyWiki based site, wireframes are very worthwhile prior to full on design.
Anonymous said…
> the really important aspect of this
> [is that it] forces us to consider
> things from the user's point of view

Of course - I sort of took that for granted.
However, it is indeed astonishing how such a prototype can help avoid the CCTV* syndrome...

As for using OOo Draw instead of Visio: I had tried that, but was missing ready-made shapes (e.g. form elements like buttons or input fields). Maybe I'm just not familiar enough with Draw?

Web designers often use Photoshop for mock-ups - but that's a bit of a mystery to me, as I have absolutely no Photoshop skills.

* Common Coders' Tunnel Vision
James Shi said…
Phil - You've obviously put a lot of effort into flushing out the design prototypes for RippleRap. For me, I would probably need to use Visio or Draw per yours and FND's comments above since I would need lots of playing around with where boxes would go, the box sizes and so on, even at the rough level you describe in this post. And if you ever did need to advance the doodle to a wireframe, I suppose you would already have a digital version to give you a head start. Just different preferences I suppose, and using a paper and pencil seems so nostalgic ;-).