Paola Kathuria was wholly responsible for the design, construction and maintenance of the web site for the Windsor Half Marathon (WHM - formerly the Building Industry Windsor Half Marathon) for five years from 1996. Our time was provided pro bono.

The half marathon is an annual event in Windsor Great Park with around 5,000 runners. The event has building industry links and raises money for charity (over £1,000,000 since 1982).

In recent years the web site accounted for the majority of entries to the event. Paola led the requirements definition phase for a relaunch of the site in 2001. (See the resulting requirement document.)

Phase 1

The original Race Director of the Windsor Half Marathon did not have access to the web; Paola took responsibility of the site structure, design and content.

The site was originally based on the 4-page entry booklet (entry details and forms) and, after the event, expanded to include the souvenir results booklet event (with results, photos, and organiser's report).

The basic grouping of this year's event (entry booklet) and detail on past events (results booklet) determined the structure of the site.

The design of the events printed materials changed every year and so did the web site design.

Entrants mailed with event reports which were then added to the site with the author's permission; event reports became a regular feature and exclusive to the web site.

WHM, 1999

WHM, 1998

WHM, 1997

WHM, 1996

Site features

A thumbnail from WHM 1996

The WHM web site was the vehicle with which Paola learnt about making the thumbnails and photo images. All photos included captions, even the 100x100 pixel thumbnails.

At first, Paola made thumbnails to include as much as possible of the original picture but, at the small size, the resulting thumbnails were too complex.

A thumbnail from WHM 2000

Paola later improved on this approach by basing thumbnails on a zoomed area of interest in the larger photos. This meant that the thumbnail itself was useful whilst linking to a larger photo of a larger area.

Larger photo with caption (shown 50% actual size)

The site contained hundreds of photos in the event archive. Paola added information at the bottom of the large photos so that a) they'd make sense when seen out of context, for instance, on a search engine and b) to discourage images being copied.

The information included at the bottom of photos included:

a longer caption
the site name
the web site address
a photo credit

The navigation panel was repeated at the bottom of long pages

Site navigation was arranged horizontally across the top of pages. It was duplicated at the bottom of long pages in its entirety; that is, links appeared in the same graphical (and cached) form rather than appearing like a different set of links.

As a result of a discussion on the CHI-WEB mailing list about graphical vs. text links, someone posted a request for examples of good graphical links on CHI-WEB. The criteria were (quoting from Joe Grant's post):

clearly convey they are indeed links (not just images);
clearly convey that they have not yet been visited;
clearly convey that they have have been visited;
do not require rollovers or other mouse action to be understood to do the first 3 criteria.

Joe said that "icing on the cake would include:"

clearly convey some kind of hierarchy, priority, or relevance to the particular content of the page
convey some kind of hierarchy or priority across the site or sub-site.

Paola converted the graphical buttons on the WHM web site to use HTML borders. That is, the borders of the buttons was achieved by BORDER="1" in the IMG tag.

There were two rows of three buttons on the WHM site. The top row were designed to be more prominent by including a photographic element. The photo element and part of the button text was colour-coded (the ubiquitous red, green and blue).



Button graphics use HTML borders to show visited and unvisited pages

The second row on buttons were were general site pages, such as site contents. The three buttons on the second row were in the same style. The main button graphics were 3D in that they were in a embossed (unselected) and inset coloured (selected) style.

Out-growing the site structure

Site structure diagram of the site before it was redeveloped, 2000

The number of people who used the entry form from the web site had increased each year; in the last few years more than half of the event's 5,000 runners used the web site to sign up.

However, Paola felt that the 74 web pages could be better organised to meet more of the event's goals, such as encouraging new sponsors and corporate hospitality at the event.

In 2000, the event was taken over by a new race director who was a web user. Paola helped the new organiser define the requirements of a new WHM web site to be taken over by another company.

Phase 2: requirements definition

Windsor Half Marathon Web Site Requirements Contents

Introduction

Purpose of the web site
Measurable goals

The Building Industry Windsor Half Marathon

Fund-raising
Event profile
Timeline
Main relationships
- Race Director
- Charities
- Runners (general)
- Elite runners
- Experienced runners
- Inexperienced runners
- Clubs
- Spectators
- Companies
- Sponsors
- Corporate Friends
- Volunteers
- Suppliers

The current web site

Location
If the event name is changed
Size
Popularity
Traffic
The electronic announcements mailing list

The new web site

Site structure
Site content
Graphic design
- Printing
- Design cues
- Button labels
- Button colours
- Sub-section links
- Display

Appendix: The Planning Group

Paola organised a full-day requirements workshop. The discussions and decisions were written up as a requirements document (available online) and site structure for the new developers.

Site structure diagram showing three groups of site sections, 2001

Instead of discussing the potential expectations and needs of visitors to the site, Paola invited representative visitor types to the workshop. She used the electronic WHM announcement mailing list, which she maintained, to solicit interest.

The workshop was attended by the race organiser, a Sponsor (Nike), an event charity (CRASH), a corporate Friend, an inexperienced runner and an experienced runner (by proxy). It started with a general introduction to the event, followed by each person's experience of it.

During the course of the day, content and functionality was discussed, as well as short- and long-term targets for the site. Paola wrote the discussions and decisions into a requirements document, and completed the site structure which was included as a 2D diagram.

The new Windsor Half Marathon web site was eventually redesigned and redeveloped by another new web company and relaunched at [off-site] www.runwindsor.com in July 2001.