|About us||RCL 20||Projects||Colour Selector||Library|
In early 2003, Oxford University Press (OUP) asked us to help reorganise, redesign and redevelop the public area of oed.com, the web site for the Oxford English Dictionary (OED).
We had helped design and build the original OED marketing site in 1997, which had been maintained and extended by OUP.
The new site was launched in October 2003. It was redesigned by OUP in 2010.
The original site was developed in 1997 when Netscape 3 and IE 3 were commonly used; the standard at the time was HTML 3.2 and CSS wasn't available. In addition, the site's main colours were limited to the browser-safe palette because most people had 8-bit displays in 1997.
The site was first launched with less than 50 web pages and has been maintained by Oxford University Press since then. By 2003, the site had grown to nearly 370 web pages, and much of the new content was buried deep in the site.
1. Define requirements
We drafted a requirements document for the new web site. The document included design requirements and a style guide. As the project progressed, the document was extended and refined with OUP.
2. Reorganise the content
We ran a one-day workshop at OUP to reorganise the site structure. To do this, we created a representation of the existing site structure, using coloured sticky notes on several sheets of A1 paper.
With the sheets attached to the walls of the meeting room, we then discussed the problems with the existing structure and the requirements of the new structure. We then built a new structure on blank sheets of paper by moving the sticky notes around.
The result was photographed and converted to a spreadsheet and a 2D diagram to capture the new site structure. As the structure was refined throughout the project, the spreadsheet was updated.
Using tools we developed, the same spreadsheet was later used to generate the web site.
3. Define the page layout
We worked with OUP to decide what common elements should exist on each web page, where they should be placed, and with what prominence.
To define the page layout, we compiled a list of page elements with 0UP, such as links to the main content sections, a copyright notice and pull-quotes. We then created prototype page layouts with different combinations of elements. Using feedback and suggestions from OUP, these were developed and refined until a page layout was agreed.
The page layout was incorporated into the requirements document, and a colourless prototype page was created. We then used the requirements document to write a design brief for our chosen graphic designer, Francois Jordaan.
4. Graphic design
The designer developed three design routes. We applied each design to three pages within the site, and we also created a set of pages using the same section colour, so that colour would not be the deciding factor between the routes.
The design routes were presented to the OUP project team and to key OED staff, including the chief editor of the OED. One route, with the addition of tab-style navigation from another route, was a clear favourite.
Through iteration, we reached a design for the home page and inner pages that OUP were happy with, and that fulfilled the key original requirements.
5. Other updates
OUP added and reworked some of the content on the web site. We reformatted the pages and some of the pages, we added a detailed listing of pages on the combined site search and site contents page, and also applied consistent styles to content elements, such as lists of featured links, off-site links and lists of links to headings on certain pages.
6. Content management
Pages are generated using a site generation system we developed in perl. The flexible system makes use of separately-held page templates, an XML page database and content files. OUP can generate their choice of live or pending pages using a simple web-based form.
Copyright © Limitless Innovations 2023