An online tour of OED Online would serve several purposes:

The main features of the tour are:

Paola searched for other web-based tours of web services; surprisingly, very few could be found via search engines. She found four of interest and passed the addresses onto OUP with comments on the presentation and functionality.

In one, screen-shots were too small to be of any use. Another included previous/next links for linear navigation and a pull-down list to jump to another tour step.

As a result of this review of other tours, Paola proposed the idea of a "grand tour" comprising individual tours on specific subjects.

Each tour would consist of a number of "tour steps" covering a specific subject. The next tour step at the end of one tour would be the first step of the next tour. Visitors could read the whole tour in a linear way, by way of a "next" link on each tour page, or they could go to any tour step in any order.

Paola spent a day with OUP to discuss and agree tour content. She ran the workshop which started off by making two lists, one of OED Online's features and benefits and the other of specific questions that OED users would want to ask of the material such as: "find quotations in a particular work" (e.g., Faulkner's Hamlet rather than Shakespeare's).

She organised the features and benefits in a way that could be told in a linear story form; we agreed a principle that the tour would only discuss subjects that could be illustrated with actual examples by use of screenshots.

This resulted in seven individual tours; the content for each of these was sketched out on a large piece of paper, referring to the original lists to make sure that all features, benefits and tasks had been accounted for.

After the workshop, Paola wrote up and refined the tour structure. The next stage was to agree the headings for each tour and tour step, as well as how the tour was to refer to itself (e.g., "tour step" or "tour stop").

This structure entailed having the tour index available at every web page. As a result of their market research, a requirement from OUP was that OED Online and other site content had to work on 640x480 screen resolutions. This meant that a vertical tour index would use up valuable screen space.

Paola decided to introduce a feature to hide the index; visitors could click a 'hide' button so that the tour content could occupy more horizontal space. Once hidden, the index would remain hidden until the visitor chose to redisplay it.

It was clear that the tour index had to be vertical. Paola initially tried the traditional left-hand approach. At 640x480, the index overwhelmed the tour content.

Paola moved the tour navigation to the right and found that the layout worked much better.

The purpose of the tour index was recognisable by its layout and formatting; Paola felt that putting it on the right-hand side removed any distraction from the tour content whilst being easy to locate and use when necessary.

By end of this process, Paola had prototyped five different page layouts.

The tour would not work well if the screenshots were only available full-sized; it was obvious that they would initially have to appear as thumbnails. OUP made the great suggestion that when a thumbnail was clicked, that it expand in context of the tour text - that is, a visitor could continue reading rather than have to go "back" to the tour.

The implication of the suggestion was that there would be an additional content web page for every enlarged image that could be shown; clicking on a thumbnail would display the content page with the same text but with the full-sized screenshot in place of the thumbnail. The frames approach meant that only the content frame would have to change which would speed up display.

Thumbnails were headed by an "enlarge" button in the button style used on OED Online. The thumbnail itself was a link to the full-sized screenshot.

When a thumbnail was clicked, the content frame was updated with a new page in which that particular image was shown full-sized, with the image shown at the top of the page.

It was decided to do this in case people didn't realise that the tour text continued below the full-sized screenshot.

The full-sized screenshot was followed by a "shrink" button. Both the button and the full-sized screenshot linked to the page with only thumbnails.

Paola added a panel at the top of each full-sized screenshot taken from OED Online. It included the brand identity (the OUP logo in the house style) and the site URL (www.oed.com) in case the image was seen out of context.

At the end of this content phase, near-final text, screenshots and other tour images had been added to the prototype.

The next stage was to apply the visual design.

Paola approached a graphic designer only after the page layout and content prototype had been completed.

Bill Jones, of Jones Design Associates, had worked as a Senior Designer for Denison Design and had worked on the original OED marketing web site in 1998.

The design brief from OUP was to use their brand colours and to stay recognisably close to the style already used by the OED web site and OED Online. However, there was freedom to explore alternative button styles, such as the use of icons.

Bill was given access to the prototype and came up with three colour combinations.

Paola created a further twelve. The eleventh combination soon became the favourite.

OUP eventually decided to adopt the button style used in OED Online. However, the tour introduced a new background colour. The tour used a number of screenshots from OED Online - when shown full-sized against the standard background colour, only the image border indicated what was image text and what was tour text.

Paola used a lighter version of the standard background colour. It isn't from the "web-safe" palette but would never dither because the background colour was set in HTML, not a tile image. If the tour was displayed on a monitor limited to 256 colours, the background would appear white, which was deemed an acceptable compromise.

To try out each colour combination, three tour pages were marked-up (the tour start page, and a tour step with and without the index). Creating the actual tour started with applying the chosen visual design to each tour web page.

To get the prototype to production quality, the HTML was checked and adjusted. Several changes were made because of the use of frames when OUP decided not to include a print version of the tour at launch: