About us RCL 20 Projects Colour Selector Library
Projects
Contracting
Paola Kathuria
Frank Wales
Clients with several projects
the-racehorse.com
BBC
CRASH
Oxford University Press (1997-2005)
Redesign of OED Online
Redesign of OED marketing site
General & technical consultancy
Redesign of OED Online Help
OED Online Tour
OED marketing site
OED Online prototype
@ Limitless Innovations (2000-2003)
Berry Bros. & Rudd
Cardata
One World Telecom
Scott Morrison Photography
Sysao
Gratis & personal projects
Paolability Jewellery
Windsor Half Marathon
Psychology of Programming Interest Group
InetUK Usenet FAQ
Other sites by Paola
@ Limitless (1995-1999)
SilverPlatter Health & Safety Publishing
Institute of Physics Publishing
EU & UK ISP surveys
New Millennium Experience
Moorfields Eye Hospital
totally-essential.com
Cybersport
Ace Records
Embassy of Japan
Reuters Insurance Information Services
Carsource
IBM Global Networks
Barclays Bank BarclayNet
Sainsbury's Wine Direct
@ Zengrange (1984-1990)
HP-41 Emulator for HP-48
Technical services

Windsor Half Marathon web site

Paola Kathuria

1996-2000

Windsor Half Marathon web site [off-site] www.runwindsor.com.

[WHM home page, 2001]
Windsor Half Marathon, 2001

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.

[Home page, 1999]
WHM, 1999
[Home page, 1998]
WHM, 1998
[Home page, 1997]
WHM, 1997
[Home page, 1996]
WHM, 1996

Site features

[Thumbnail from WHM 1996]
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.

[Thumbnail from WHM 2000]
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.

[Bigger photo linked from thumbnail]
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
[Navigation repeated on long pages]
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).

[this year's event] [fund-raising] [past years' event]
[contacts] [links] [site contents]
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, 2000]
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

[skip to the end of this list of contents]

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

- end of list of contents -

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, 2001]
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.