Paola was hired to design and build a database that would document the user interface of hotels.com.

The user interface is everything the user sees or interacts with.

She was hired as an Information Architect with software experience and sat within the User Experience department, next to the Visual Designers.

The web site was designed and built by 20-30 designers and developers. The site site was constantly changing as Product Managers tried changes within multi-variate tests to increase bookings.

Paola wrote some questions one could ask of such data and hung them by her desk to prompt conversation. Some people added additional questions.

When meeting with the User Experience Designers, Visual Designers and developers, Paola introduced Lucy, a representative customer.

When people are shopping for a product, they first look at many options, compare them using whatever criteria are important to them and make a short-list. This activity was borne out by the ethnographic research.

Research-mode Lucy doesn't yet know what she wants to spend her money on, nor whom she should trust with it. She's just looking for evidence that, if she buys with a company, it will be money well spent.

She is imagining a time in the future when, card in hand, she can book a hotel with confidence that it provides the best value for money for her budget, be it £50, £200 or £1,000.

Paola enlisted the help of the UX Manager and Lead UX for audit the web site systematically.

We divided the site up between us so that we would cover the whole UK site between us. Paola specified that we list each variation of a page in the company intranet, writing down how to reproduce that page.

Page variations are about page layout and style, not about content.

For example, a form has three states:

1. default form
2. form with error messages
3. form after successful completion

Once the audit was complete, Paola used the page lists to print out every page type twice.

The first copy set was used to refer to in discussions.

For a site that was essential a search engine (search form, results list, detail page), there were a lot of page variations.

Paola assigned a unique id to every page variation (using the section and a sequential number), such as R1 for the first results list in the audit.

On the back of the second set of print-outs, Paola printed the id on the back.

This meant that when the user interface element was cut out, you could see where it came from.

Paola decided to look for variation from the customer's point of view, rather than the designer's or developer's, because the customer is the constant; theirs is the only point of view that can create a significantly better customer experience.

The project looked at the site as a whole, irrespective of how came about, because that's how customers see it.

Initially, Paola wanted to work with the designers and developers in small sessions to identify those page elements that should be reviewed and standardised.

However, the first session was challenging and so Paola identified them herself:

Paola went through the second set of print-outs and cut out the page elements she had identified.

The cut-outs were marked with a unique id on the back so that one could identify its source.

Paola then grouped like elements together, for example search forms, storing them in large labelled envelopes.

For the presentation at the end of her contract, Paola stapled the elements of each type onto A1 sheets of paper.

Paola found 27 variations of hotel summaries.

They varied by what information was in it, its style and position.

For a visitor to the site, this would cause a lot of confusion because they would have to re-interpret the information each time; there were no standard rules for information display to aid readability.

There are two sets of prices in hotels.com - one where the site doesn't know when you want to travel (it shows From prices), the other where it knows your dates and can give you actual prices.

In addition, sometimes a rate is reduced. The original (higher) price is shown strike-through with the reduced price next to it.

Paola found variations in wording, size and colour for prices. This, again, causes confusion for visitors, but also slows down changes on the site.

Once the variations of page elements were grouped as paper cut-outs, Paola organised sessions with two other staff members - UX, visual designers and developers. She wanted to hear their input bu also for existing staff to have a say in and be invested in the result.

Format

The refactoring sessions started by spreading out the print-outs of the page element on a table and seeing if one already stood out as the variant to replace the others.

We discussed the pros and cons of the variations and came to a consensus. Paola placed a gold star if a variant was good enough. If a variant was okay but needed tweaks, Paola added a blue star next to it.

Paola ran a session like this for the 30 page elements. In some sessions, we tackled more than one.

The UX department had been using Axure for prototyping. Paola had noticed that they were highly-finished when presented to teh Product Managers.

She and the Lead UX Designer decided to present sketches. It was quicker to iterate designs and, when presented to managers, they started a conversation rather than seeming the final design.

Paola initially sketched on A4 paper and then transferred final versions onto A3.

For the search form, 32 variations were reduced to 2. A bigger form for the home page and a strip for all inner pages that would sit between the top header and the page heading.

Hotel summaries were the hardest element to sketch because it contained so many elements.

Paola settled on a format where factual information about a hotel (name, location, photo) was on the left-hand side.

There were a lot of forms on the site.

Paola sketched two versions. One default version to show the position of labels, and the difference in prominence between Cancel and Submit.

The other version showed the error state.

Temporary messages often apeared on the site.

Paola's sketches showed where they would appear and be contained somehow.

A message would always be displayed under the page heading, be associated with an icon and might have a heading.

Depending on whether a visitor has entered their travel dates on hotels.com, the site displays two kinds of prices: From prices or actual prices.

In addition, sometimes a rate is reduced. It is shown with a strike-through with the reduced price next to it.

Paola used coloured post-it notes to demonstrate the 2 x 2 variations needed to style.

In preparation for a meeting to all the Product Managers, Paola wrote notes for various page elements, such as prices and how adverts were used.

She also stapled the cut-outs of hotel summaries and search forms to large sheets of paper because they were the best refelection of the amount of variation in the site's user interface.

Introduction

Anything that slows down development, or that increases the cost or complexity of making changes to the site, is a drag on the entire business.

Partly as a result of our rapid expansion, we now find ourselves suffering under a heavy, and increasing, burden, one that affects all the user-experience designers, creative designers and developers.

Every time they start work on a new task or project, they have to discover what must be added or changed, which is actually a huge amount of work, because the site is enormous and growing, and there is no master library for the site.