The Spot  

About This Site

HomeWhat is The Spot?Store DirectoryGetting HereFeedback


About This Site
   Project Details
   Group Members
   Design Issues
   Aesthetics & Usability
   Load Times

Privacy Statement - We Own you.

Copyright Notice

Pei and Elliot with the Megalatte ("Coffee in a bowl")About This Site

Project Details

Project Name:
"X" Marks The Spot

Group Name:
We'll Sleep On It

Group Members

Name    Student #     
Pei Li Guan    2251343      
Stuart Loh    2251550    [Personal Homepage]
Andrew Morris    2252903      
Elliot Poon    2252799      

Jeffrey Tang



This site forms the Working Prototype component of Assignment 2 for the subject Electronic Commerce Management (INFS3685), held in Session 1, 2001. It represents a prototype for a shopping precinct in Randwick, Sydney called "The Spot". Because of its prototype status, the site is not complete nor comprehensive in its content. Back-end features have not been implemented and what exists here is representative of what a possible "real live" implementation may contain. Furthermore, the information on this site, while grounded in some fact, may not accurately represent The Spot.

This is a prototype site only, it should not be construed as otherwise.

The required "details on design issues addressed" forms the rest of this page, and is also included as an appendix in the business plan.

Navigation Chart & Storyboards

View the navigation chart for this site
View storyboards used in the design of the site

These can also be found in the business plan appendices.

Design Issues

Design issues regards aspects of site implementation, ranging from visual appearance, interface usability, technical compatibility and so on. Following is a listing of design issues addressed while implementing this prototype, and what was done in addressing them.

Aesthetics,  Accessibility and Usability

Aesthetics, accessibility and usability relates to the physical visual appearance (layout) of the site, and the ease with which a user physically interacts with it.

The layout of this site has been kept clean and ordered. The design is relatively simple, with little on-screen movement (in the form of animations etc.) that may provide as a distraction to the main content. A soft pastel colour scheme has been selected that blends well. There are no clashing, vibrant colours, except for parts where the user's attention should be drawn to. Text colours have been chosen such that they contrast highly with the background, and links have been coloured to clearly demarcate them from normal text. Standard fonts have been chosen for maximum on-screen legibility. The standard nature of these fonts also means that most users should have them loaded on their computer (Arial, Verdana and Times New Roman).

Different sections of the site maintain a uniform screen layout. The uniformity means that a user can familiarise themselves with the site - common navigation or information elements are in the same place on each page. Even so, the sections have been colour "themed" for easy identification of where in the site a user is.

The site's appearance has been designed with sight-impaired users in mind. Most large bodies of text, such as this, are written black-on-white, facilitating viewing as well as printing to paper.


Navigability relates to a site's logical structure, and how easily a user can move around the site, and find with minimal effort any information he or she may be searching for. If a user is not specifically looking for information, but is merely browsing, the structure should also facilitate a systematic perusal of the site.

In a nutshell, a site structure that makes logical sense aids navigation.

This site has a hierarchical structure. From the front page, the site branches off into various major sections. Within those sections, subsection pages branch off. To reach one of the subsections, a user logically navigates through to the section, and then the desired subsection.

To minimise mouse clicks (which is related to the amount of pages that must be traversed through to get to a destination page), a user can access any major section from any page within the site. Links to subsections are not provided on every page - the number of subsections would clutter the screen too much and impair aesthetics.

For the store directory, a search function is provided along with browsing. The search permits a user to find a particular store quicker, whereas browsing allows a user without a target store to view a listing of them at leisure.


Regarding a web site, there are technical aspects which deserve consideration. The site must be viewable, and that means it must run on a web browser. The issue here is, that there are a vast variety of web browsers, platforms and other factors that cause a site to appear physically different on a screen. A site should be able to cater for most, if not all, of an audience regardless of what they are using the view a site.

The first and foremost aspect is that of browser compatibility. The two major players in this market are Internet Explorer and Netscape Navigator, with a variety of smaller ones such as Opera. Web sites are comprised of HTML code, plus a variety of other technologies (eg: cascading style sheets and scripting languages like Javascript). In a perfect world, different browsers would implement standards and render (interpret and display) code identically to others. However, the reality is that different browsers interpret this code differently to others. A page on one browser may appear different on another browser, and in worst cases, may be totally unviewable. Browsers also come with proprietary technologies that will not work on other browsers.

The challenge is to be able to utilise some of these more advanced technologies, without excluding or impacting adversely upon the browsing experience of users using less "capable" browsers. This site takes this into account. Any extra functionality provided is indeed extra. They do not degradate the appearance when rendered in other browsers, and thus do not exclude other browsers from accessing parts of the site. Compatibility is the key - to provide extra functionality to those that can handle it, without affecting those that can't. One such example is the use of cascading style sheets (CSS). CSS provides a way to centralise and enhance design elements of sites. Internet Explorer renders CSS code differently from Netscape. In Internet Explorer, CSS enables hypertext links to change colour when a user moves a mouse over it (providing a visual cue to alert the user of a hyperlink). Netscape does not support this. Although the Netscape user does not get this benefit, their browsing experience is unchanged. Links changing colours is not a critical function of the site. More importantly, no error occurs due to this extra functionality - it is simply ignored by Netscape.

A danger of using proprietary technologies is how wide-spread support of them is. Many of these take the form of "plug-ins" whereby a user must download a small piece of software in order to enable that technology on their computer. An example is Macromedia Flash. The use of plug-ins on this site is minimal. Having to download a plugin in order to view a site is a hassle and may turn users away. However, it should be acknowledged that it is possible for a plug-in to become standardised, at which point the majority of the market can support that plug-in.

This site consciously avoids the inclusion of too many "bells and whistles" that, instead of impressing a user, actually detract from the browsing experience.

Apart from technology and browser issues, users view web sites in different screen resolutions. Although the standard resolution is 800 by 600 pixels, this does vary considerably. This web site is designed in a "liquid" fashion. It will flow to fit any size of browser window it is placed in.

Load Times

Web sites are accessed over the Internet, and this access is not instant. Sites takes time to download, and a site which takes too much time will cause disinterest or even distress to the user. The length of time a site requires to download is directly related to how much media is contained on it. Text loads quickly, whereas graphics contain more data in a smaller area and thus loads relatively slower. However, a text-only page, while quick to load, would look boring and so a balance must be struck. This page adds enough "spice" to each page as to make it interesting to look at, without increasing load times to impractical levels.


A less significant issue, but nonetheless worthwhile considering, maintainability relates to the actual underlying structure of the site. A maintainable site is one where a site designer can upkeep quickly and efficiently. Various technologies exist to help with this, and some of them are employed in this site. A centralised CSS file, which all pages reference, provides an easy was to update the visual aspects of the site. Footer code is standardised into a central file which is "included" into each page. Because each page is uniform in nature, templates can be created to expedite creation of additional pages should they be needed.

 Copyright 2001 Guan, Loh, Morris, Poon, Tang [ About This Site | Privacy Statement | Feedback ] [ Top of Page ]

The Spot (click to go home)