Prototyping

We develop usable prototypes and wireframes based on user research

Successful web sites put the right things in the right places! Many websites don’t have the content users need in the right locations and often screen elements (e.g. navigation bars, content panes, search boxes, etc.) are not placed in the optimal position from a user’s perspective. Often the layout of pages is based on what an organisation wants to ‘tell’ users rather than on user priorities. The best way to develop a usable wireframe is to involve users in its development.

Wireframe development/prototyping is an integral part of the user-centred design of a website. It should be carried out after the user goals the site should support have been agreed, and the information architecture (i.e. how content is chunked into a hierarchy) has been developed, but before any work on design is undertaken. However, existing sites with poor page layouts also benefit from wireframe or prototype development.

Home Office home page wireframe

Our approach

Normally, wireframe/prototype development is part of a wider user-centred web design project involving research to understand users and their goals, and the development of a usable information architecture. Therefore, the development of the initial wireframes is informed by the user research undertaken in these other stages of the project.

Typically we develop prototypes for a home page, navigation pages and the main content page types.

The prototype is ideally tested and refined through a series of iterative research sessions with representative target users. Two or three iterations of user research are normally adequate.

How we do it

We develop one or more variations of each template based on an understanding of users and their goals (identified through earlier research). We like to populate the wireframes with real content for a small number of user goals) so, when we test the wireframes, users can work through the site and complete their tasks.

User testing of the wireframes can be undertaken in two ways:

Formal testing (2 iterations) involving observed usability testing of the whole prototype; the first round of testing typically follows the development of the first wireframe prototype, and the second is conducted at the final wireframe prototype development stage to enable a ‘whole site’ perspective to be adopted. These iterations will involve key client stakeholders in site development
Informal testing (number of iterations varies) with users, on elements of the site during prototype development. These are ‘work-in-progress’ sessions to test developments of, and identify improvements to, specific elements of the wireframes

The formal testing is conducted as follows:

Each research session is typically conducted at our premises and takes place over one day. The session is attended by up to 8 client personnel
The research is split into two parts: user testing in the morning and consideration of the results in the afternoon to refine the prototype wireframes
Prior to the test day, WUP agrees a set of user goals with the client to be used in the research
WUP recruits the testers – profiles of which are agreed with the client
WUP prepares a simple HTML representation of the prototype wireframe
Each tester tests the prototype for c. 50 minutes individually.
The testers are asked “Where would you click” to achieve each goal, through as many levels as there are in the prototype wireframe. They are asked to ‘think aloud’ so we can understand any issues about the usability of the wireframes.
On the same day, following the user testing, WUP facilitates and contributes to a discussion to produce a revised wireframe for the next round of testing
A report is produced summarising the research, analysis and detailing the revised wireframes.

Informal testing is conducted with a panel of testers, representative of the target audiences, in order to undertake short, fast, informal usability testing of development concepts. These might be new ideas or changes to elements that have previously encountered problems in testing. Testers can be called in at short notice to provide feedback as appropriate.

Outputs

The output of the research is a set of site wireframes showing all the key screen elements on the home, navigation and content pages. This is also detailed in a report.

Client examples

Examples of wireframe development we have undertaken include:

Client	Project	Date
Cancer Research UK	IA and wireframe development and testing of site wireframes with 12 testers over two rounds of testing	March 2011
Hampshire fire and rescue	IA development and wireframe testing of site wireframes with 6 testers	July 2010
LA Fitness	IA Development and testing of site wireframes. Two rounds of testing with 6 testers.	October 2009
Watson Marlow	IA development and wireframe testing with 6 testers	July 2009
Rated People	Nine testers individually explored the prototypes in three rounds of observed user testing. Between each iteration, modifications were made to the prototypes as a result of the evidence obtained during the research.	June 2009
Bible Society	Information Architecture development and testing of site wireframes across two rounds with 4 respondents.	January 2009

Fees

Most of our work is tailored to individual client’s requirements and we quote an inclusive price for each piece of work. However, the following gives an illustration of typical costs:

Template development – £950 per template
Formal (i.e. observed) user testing (6 testers) – £6,950 per round
Informal testing (6 testers) – £4,950

Terms and conditions

VAT will be added to all charges at the currently prevailing rate. Payment will be within 30 days on the presentation of our invoice.
Additional work not identified above would be charged at WUP’s standard rates(£1,000/day for directors, £800 for consultants and £350/day for support staff). Additional expenses not shown above would be charged at cost
Cancellation of booked sessions will incur cancellation fees as follows: cancellation within 4 weeks of the session, 50% of the fee payable; cancellation within 2 weeks of the session, 100% of fee is payable
The rates quoted assume tester remuneration of £40 plus travel expenses up to a maximum of £10. If tester remuneration needs to be greater than this for any reason (e.g. securing individuals with high time value or on short lead times) then any costs above the basic charge will be invoiced at cost.
It is assumed that the client will invite the observers to research sessions