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

Web site design ~ Sysao

Paola Kathuria

2000

[Sysao, 2000]
Sysao, 2000 (graphic design by Denison Design)

Sysao wanted to replace their existing web site with one that would help generate new business, and support existing customers and partners. They wanted marked-up web pages for each page type and a style manual.

We were recommended by marketing consultant, Margo Rosenberg, to help design a site that Sysao could then construct, host and maintain.

Sysao is a fast-growing, young and successful company; they provide Oracle solutions based on applications developed by Sysao. Sysao has expertise in specific areas and has developed systems to support them, such as financials, customer relationship management and human resources.

They had launched a number of web sites without much success. The latest site was quite text-heavy, it was not registered on any search engines, it wasn't spider-friendly, nor linked from other web sites. Visitors had complained that the site was slow to use.

Planning workshop

[Site structure diagram]
Site structure diagram

The project started with a two-day workshop we ran for Sysao and Margo Rosenberg, their marketing consultant. The workshop was used to discuss and plan site goals, target audience, content, functionality and site structure.

[Requirements: page list]
Table detailing the required pages

Once a list of content and functionality was formed, the group prioritised them to determine what would be in the first phase of the web site.

After the meeting, we documented the requirements in the form of a table of pages and a site structure diagram. We marked pages according to whether they'd be included in the first or next phase of the web site.

Design routes

[Head routes]
Visual design stage 2: development of Head route

We called in graphic designers, Denison Design, who supplied a Creative Director, a Senior Designer and two Graphic Artists to the project. We requested that design routes be presented by showing the home page, two section pages and a page a lower level in the site.

Six design routes were created, all initially presented as marker sketches. By presenting routes on paper, rather than on screen, more routes were available within the budget.

Sysao's existing printed materials used navy and a water-like image; Denison incorporated these themes in the routes.

Sysao picked two of the six routes to take forward to the next stage.

[Pool routes]
Visual design stage 2: development of Pool route

Denison mocked up home page variations of the two chosen routes; Sysao decided on a route with clean white pages and a water theme.

Colour and shape landmarks

Ten sections had emerged during the planning phase; a section is a group of pages which is linked from all pages on the web site.

[skip to the end of these example menus]
Why choose us
Our services
Solution finder
Contact us
News & events
Our partners
Recruitment
Resources
Site search
Site contents
[Why choose us]
[Our services]
[Solution finder]
[Contact us]
[News and events]
[Our partners]
[Recruitment]
[Resources]
[Site search]
[Site contents]
Sections links implemented in plain HTML or as text graphics - they vary only by text
- end of example menus -

The sections were grouped by importance and type, resulting in three levels of prominence. We briefed the designers to convey grouping, prominence and landmark cues through the visual design.

Most sites today implement section links in plain HTML or as text graphics. Whilst HTML links are the easiest to implement change and to download, they are the hardest to add visual cues of grouping and to provide structural landmarks.

Button graphics of text have the advantage of being of a predictable type size and typeface. But text in graphics cannot be resized or translated into another language (e.g., by AltaVista's Babelfish). Graphical-only links also require more skill to create and maintain.

For these reasons, we continued with our practice of associating unique colours and shapes to graphical buttons accompanied by separate text links.

[Section shapes]

The addition of colour and shape allows seemingly decorative graphics to convey brand whilst also providing navigational and landmark cues.

Colour is recognised before shape, and shape is recognised before a text link. Shape- and colour-coded sections make a site easier to navigate by allowing quicker answers to the typical scenarios of "what section am I in?", "am I still in section [x]?" and "how do I get to section [y]?".

The three groups of section buttons in the Sysao design were conveyed by size, position, shape style and colour schemes.

Icon development

[Icon development: main section buttons]
Development of abstract icons for the three main sections: 1) Why choose us 2) Services and 3) Solution finder
 
[Icon ideas: medium-prominence section buttons]
Icon ideas for medium-prominence sections
[Site buttons - icon ideas #1]
[Site buttons - icon ideas #2]
Icon development for the general site sections

The icons used in the button graphics went through several stages of design and refinement by the designers before final graphics were created by a graphic artist.

Button style was represented in a raw form initially and was just one part of a general design route. Although the icons were abstract, thought went into the design.

At the initial design briefing, we discussed possible icons with the designers, such as using a five-pointed star for "Why choose us" to represent the gold star students received in class for good work.

The original solution finder icon was reused for the services section and a new target/radar icon was used for the solution finder.

We suggested three approaches of icon style for the middle set of buttons to the designers. One used curved shapes from the home page pool image, one used single abstract shapes and the third used typographic characters with a loose water theme.

The designers adopted the third - water - route for the medium buttons.

At the last stage, the final graphic was drawn in the chosen colour.

Section groups

[Why Sysao button - unselected]
[Services button - unselected]
[Solution Finder button - unselected]
[Three main sections]
Three main sections using different hues and abstract shapes

The three main section button graphics included the most diverse range of colours - blue, orange and red - were the largest size, and the first set of buttons on the page (top-left of the page).

The icons were drawn as different abstract shapes but were not completely arbitrary (e.g., the icon for the solution finder was target-like crosshairs).

[Four medium-prominence sections] [Contact button - unselected]
[News button - unselected]
[Partners button - unselected]
[Recruitment button - unselected]
Four medium-prominence sections using smaller shapes with a water theme and in similar hues

For the second group of sections, buttons were smaller, icon shapes were less complex, used abstract water shapes and were in similar hues.

The section colour was used in page headings and a version of the section shape appeared in the top-right corner.

[Resources button - unselected]
[Site search button - unselected]
[Site contents button - unselected]
[Three minor main sections]
Three site sections - simple ring shapes in blues

The group of the general site links were in a simple ring style and in similar hues based on the main blue theme.

Selected and unselected versions of buttons were created to help convey current position. For the main section buttons, an animated version of the button was used to give feedback upon mouseover. The selected version of the button doubled as the mouseover style for the other two section groups.

Button states: selected, unselected & mouseover

unselected + clickable selected + unclickable mouseover
[Why Sysao button - unselected] [Why Sysao button - selected] [Why Sysao button - frame from mouseover animation]
[Services button - unselected] [Services button - selected] [Services button - frame from mouseover animation]
[Solution Finder button - unselected] [Solution Finder button - selected] [Solution Finder button - frame from mouseover animation]
Button states of the main section buttons (showing here a single frame from the mouseover animation)

Selected and unselected versions of the icon graphics were created to help convey the section of the current page. "Selected" means that a page is in the section. We chose the animation styles and created the animated mouseovers for the three section buttons.

Despite the number of graphics created for general use of the site, we worked hard to reduce them to the smallest file size whilst maintaining image quality.

Accounting for all mouseovers, the home page contained 30 site graphics totalling 50K. An inner page added an extra 7 graphics totalling just 5K (if an inner page was accessed first in a visit, it contained 30 site graphics totalling 30K).

On a section page (the target of a section link), the selected version of the button was shown, and the text link would become bold text in the section colour. The buttons for the second and third group of site links are shown next.

[skip to the end of these example navigation menus]
unselected + clickable selected + unclickable
Contact us Contact us
News & events News & events
Our partners Our partners
Recruitment Recruitment
Button states of the medium-prominence buttons
unselected + clickable    selected + unclickable
Resources Resources
Site search Site search
Site contents Site contents
Button states of the general site buttons
- end of example navigation menus -

Below is an example page showing the three groups of buttons.

[Inner page]

Construction

[Solution Finder]
Solution finder & results list

Once the web graphics were completed, we created over twenty web page templates representing each page type. These web page templates differed from actual web pages only by the absence of final copy.

Templates included the format of search results following a site search. We also provided sample pages for the solution finder, one of the three main site sections. This was identified in the requirement workshop as a goal-driven way to find out about the company's services.

The solution finder was a specialised site search. Specific pages on the site would be associated with goal questions. The solution finder would pose these questions alongside checkboxes. A visitor was to tick those boxes that applied. On submitting the form, the form would redisplay after an annotated list of pages on the site which addressed the ticked questions.

Sysao was to program the solution finder and so we did not implement it. However, we did document the data structures and processing required to implement it.

Style guide and manual contents

[skip to the end of this list of contents]

Style guide contents

Introduction

Set-up

  • Directory Structure

House style

  • Page structure
    • Home page
    • Home page table structure
    • Inner pages
    • Inner page table structure
    • Inner page elements and features
    • Page margins
  • Prominence
  • Colour-coding
    • Link colour swatch
    • Section swatches
  • Buttons states
    • Button chart
    • Sub-section links
  • Indicating depth in the hierarchy
    • Level 2
    • Level 3
    • Level 4+
    • Link tagging summary
  • Typeface
  • Headings
    • H1 - level 2 pages
    • H1 - level 3+ pages
    • H2
    • H3
    • H4
    • H5
    • H6
  • Links
    • Internal links
    • Off-site links
    • Link text
  • Style for specific pages
    • Contents page
    • Solution finder
    • Site links
    • Search results
    • News item
    • Press release title
    • News archive item
    • Partner logo and summary
    • Top link
  • Wording and writing style
    • ALT text
    • Capitalisation
    • Button and link text
    • Page titles
    • Special characters
    • E-mail addresses & URLs
  • Filename convention
    • Web pages
    • Images

Maintenance approach

  • Development environment
  • Site updates
  • Testing
  • Making live
  • Back-up

APPENDIX: Page listing

- end of list of contents -

We prepared an illustrated 28-page style guide and manual.

The manual described how the pages were constructed with tables and listed special mark-up used. The house style was then documented: it explained the use of colour and graphics, link styles, how depth was conveyed through design, link style and a writing style.

[Style guide and manual pages]

The redesigned site was launched in July 2000.

Sysao have redesigned their web site several times since then.

[Sysao: Sep 2001, Jun 2002]
2001-2002