“We won’t be doing any user testing for this project. There’s just no budget for it, and we don’t have time.” Hear this often? We do, particularly since we work in Ireland – a small country with similarly small companies and budgets. However, we believe user research is too important to give up. So instead, we have to run tests quickly and cheaply for our clients to accept the cost – and we have to clearly show how it brings value. Because of this, we’ve developed a toolbox of quick, cheap UX research techniques.

In this article, we’ll talk about one technique known as fast prototyping, and how we effectively used it in a recent project for Vodafone Ireland. We’ll also be talking about this subject at EuroIA 09 in Denmark.

Background: Vodafone Ireland

The Vodafone Ireland webiste

Our task was to redesign the Vodafone Ireland information architecture (IA), which the company had quite simply outgrown. Traditional business areas dominated the website and left little breathing room for new business streams in which the company was investing heavily. Our challenge was to provide Vodafone’s users with a clear map of the site and its products in a quickly shifting market.
We investigated traditional IA user testing tools such as card sorting, but we felt given the complexity of the site, it would give us limited results. A prototyping solution was a much more effective use of resources.

Why Prototype?

Card sorting is great for defining natural associations among a selection of words and objects, and really helpful in deconstructing concepts into logical groupings. But we felt that it often places undue weight on the unusual cases that straddle concept groupings, and not enough on the main paths that most users pursue when navigating a site.

True, prototyping doesn’t provide the volume of statistical data you’d get from a large group of card sorters. You have to invest more time in fewer people, but the qualitative and comparative data can be a really rich resource.

At Vodafone, our focus was on efficient findability – getting users to their destination easily. So we had to test not just our product groupings, but the usability of our principal purchase flows.
A prototype combined with specific use cases or scenarios was perfect for this.

Making the Prototypes

We have a small development team of 3 full-time front-end programmers who spend their days (and often nights) writing production-quality code. For us, assigning developers’ time to prototyping is a huge expense. But for our interaction designers – who aren’t all expert coders – creating prototypes in HTML is too time-consuming (even if 37Signals say otherwise). Therefore, we needed a prototyping technique that was simple and didn’t involve a lot of coding.

While there are many methods around, (for example, Phil Frelinger of Xero champions working with Flash, others have even suggested Powerpoint or Keynote), we found that for static pages, image map prototypes worked best, and for forms integrating image map prototypes with HTML.

Static Pages – Image Map Prototypes

Most wireframing tools (Omnigraffle, Axure or Visio) allow you to assign actions to shapes, such as opening a new wireframe or displaying a layer on click. The wireframes can then be exported to HTML, with clickable areas represented by image maps.
We’ve found this is a great way to prototype static web pages and have used them to test:

• Information architecture
• Navigation
• Labeling
• Content

What’s best about them is that they’re fast. A prototype created in HTML takes about 2 days of development and 1 day of interaction design. An equivalent image map prototype, starting from existing wireframes, can be created by an interaction designer in just 3 to 5 hours.

Forms – Image Map + HTML

Unfortunately, image maps can’t be used to test forms. Forms must be filled and submitted. They must validate input. They must provide error and confirmation messages. This means form prototypes must be built in HTML.

To minimise development work, we integrate image map prototypes with forms built in HTML, CSS and JavaScript. (See the below video for how to make one).

In our projects, we use prototypes to test process flows (e.g. online purchases and applications) – from the homepage to the confirmation message. We use image maps for all static pages, and build the forms in HTML, CSS and a JavaScript framework. We then link the image maps and the application forms together, and it works seamlessly.

We can built these prototypes in just one day, with a half-day each of development and interaction design.

Testing With Prototypes

The Vodafone IA project involved 2 rounds of user testing.

• Round 1 was 2 days with a total of 12 people for just under an hour each. We tested 2 low fidelity prototypes against the existing website.
• Round 2 involved just one combined prototype for verification purposes and looked a little harder at some of the decision pages, content and design decisions that needed firming up.

We used scenarios when testing to provide depth of context and richness of content. We inserted live videos and advertisements into the prototypes, and used posters and storytelling to get the user to take on a role and reenact scenarios. It led to very effective, real life, real world conversations.

How prototypes provided context

The Vodafone site had enormous similarities between its product subsections. Mobile phones and home phones all had plans, costs and bundle offers, and could be used to access the internet. Because card sorting approached IA analysis from the bottom up, we would have had to prefix each choice with a content heading like “mobile plans” or “mobile costs” in order to provide context. Using prototyping to test from the top down, we were able to avoid this and base our analysis on the user’s contextual position once they’d clicked on a particular section.

Testing page designs and IA at once

The previous design of the site included a number of decision pages to minimise reliance on an IA. These served a purpose within the site structure, but we found they had usability issues – and analytics confirmed our suspicions.

Still, we saw these pages as an integral element of the IA itself, so making them work was a key objective. Prototyping also allowed us to explore a number of design concepts for these pages. For example, there was discussion in the project team over the best approach to display IA layouts. When we looked at other global Vodafone sites, we saw two distinct approaches:

1. A single top level IA exposed
2. A top level IA with a sub level IA exposed

Prototyping allowed us to feasibly examine both possibilities and unearth the most efficient solution.

Conclusion

In cases such as the Vodafone Ireland project, we found that fast prototyping techniques opened up possibilities for innovative, low-cost and iterative approaches that engaged users in task and scenario-based exercises during the design process.

Fast prototyping gets us close to a real-life scenario of a website, but affords us the flexibility to test different structures and designs very early on in a project – before any costly development work has begun.

For more on other cheap UX tools, see our workshop at EuroIA, “Cheap and efficient tools: how to engage users in IA design when there is no budget and there is no time“.

Acknowledgments

We would like to thank Vodafone Ireland for allowing us to feature their projects.