Website Re-Engineering Design

Website Re-Engineering Design

For

NSW-Vietnam

Chamber of Commerce

Post-Implementation

Review

Report Document

2 December 2004

Author: Ray Salmon

Executive Summary:

The project was for the NSW-Vietnam Chamber of Commerce located in Sydney NSW, to comprehensively re-engineer their business web site, adding additional commercial functionality and improving the look and feel of the site.

Most of the design goals were achieved, with most discrepancies caused by lack of time rather than change of mind.

Functional Requirements:

The current site:

The site http://www.nswvnchamber.com.au/ was written in and is administered using FrontPage. The site administrator is Mr Peter Allan who was the Country Manager in Vietnam for Telstra and is well connected with the Vietnam government and business environment. However he is self-taught in web design and management and is now struggling to expand the web site functionality.

Approval for the site must be gained with the Chamber which is a panel of Vietnamese officials and local businesspeople.

The client requirements for the site:

The general requirements are for a more professional look and feel on all the pages. They also wanted some database integration for a new Members database as well as database driven content management. However they want to be able to continue using FrontPage and they want to keep some symbols and the logo because the approval change process is somewhat bureaucratic.

The hosting company runs a Microsoft environment with Access database hosting and .asp support.

The product objectives:

Objectives were to achieve agreement from the Chamber for a new design which will attract more enquiries and end-user interest by offering interesting new content, better site and content management procedures and some database driven customer service processes.

This was achieved

How those characteristics will impact on the design of the product and the media used to deliver the site content:

The design must look professional but be clean aesthetically and easy to navigate. It must be easy to keep up to date. Functional code should all be server side and the databases should be inaccessible without security checks. The database implementations must be in Access.

This was achieved

Client database requirements:

Member Database:

The Chamber will have a Member Database containing information input to the web site and detailing member details and interests.

This was achieved

Event Database:

Upcoming events will be described as database records for search by interested surfers.

This was achieved

Opportunity Database:

Trade opportunities entered by members or by the site management will be entered in an opportunity database for search by members only and subject to expression of member interest form on a per opportunity basis.

This was achieved

Products & Services Database:

NSW and Vietnamese products and services interested in being marketed through the Chamber web site will be added to a database so that surfers can browse the products and services. However no direct sales will be available through this site, being passed to a sister site instead.

This was somewhat achieved – there is a list of client sites with links, but the Chamber does not yet act as an agent of these companies, therefore the commercial portal has been postponed

Usability tests (identify and plan)

The site was to be tested for general usability and accessibility criteria such as:

· Navigation

§ Able users

§ Visually handicapped users

§ Physically handicapped users

· Clarity

· Speed of loading

· Multimedia aesthetics

· Spelling

· Syntax

· Consistency

· Warnings of plugin needed (eg, Flash, Quicktime, Crescendo) and where to find the free downloads

This was achieved (see Appendix A) – however there are currently no warnings of the need for a Flash plugin

Design Section:

As shown in the diagram, the site has a home page which describes the Chamber and offers navigation to subsidiary areas. These are Events & News, Opportunities (for trade and tenders etc), Products & Services (of advertisers and also of the Chamber themselves) and finally NSW & Vietnam Region info (providing general knowledge information on geography and industry in the regions including tourism)

The four page groupings was to each have an index page providing listings of the respective sub-pages.

There were to be databases for Members, Events & News items, Opportunities and Products and Services. The Members database collects members online and take their details, interests, etc and the other databases will be managed by the system administrator using material and content found through usual sources and also from a Submit page where parties can offer material for review and possible inclusion in the site.

In actuality, direct database access was provided for trade opportunities. The Submit page for parties to offer news and business content is not specifically offered, although a simple adaptation of the Trade Opportunities entry form would suffice.

The Members database was to activate member mail-outs based on the members stated interests and information which is deemed by the site administrator to be relevant to the members.

This was achieved – however as mentioned the Products and Services database is postponed. The Information about Vietnam is contained in a multimedia Flash presentation and has no database supplying the content. The member mailouts currently go just to me at CHEC.

Visual Elements:

The main pages have a similar look, as below, with a different background image to the Nav Bar depending on the page.

The Flash page (below) has an adaptation of the 3756F class exercise multimedia photo/text viewer with some modern Vietnamese music as a mood backdrop.

Interactive Components:

Interactive components will include a member data collection section, site search and presentation of material based on user preferences selected in the member data collection process.

Instead of this, there is a database SEARCH facility so that customers can make their own choice of criteria for content selection

Site Function and Navigation:

The home page will contain a nav bar on the left and a group of splash event boxes on the right. Other pages will keep the nav bar and drop the right box section.

This was achieved. The Home Page has some photo op items on the right. All the main pages have the Nav Bar on the left.

The Nav Bars on each page can still call their own page. This would have been better if each Nav Bar instance had no link on its own Nav Bar element.

Further Development

We had plans to do a number of things:

1. A member only section; Not yet

2. A calendar of events; Not yet

3. a database for members; Yes

4. Some "Flash" on the home page concerning the sponsors logo's No

5. an e-commerce facility (optional) No

6. A more professional look and feel. Yes

7. Feedback; Yes

8. Trading Section; Not yet

9. incorporate our mail list somehow?? (The site manager has compiled a 340 odd mail list on excel and uses an evaluation copy of Mach 5 Mailer to send mail) - it

would be good to have some type of integrated function with the website. Yes

10. The key to this website is that it is very dynamic - they need to have

the ability to add articles on demand easily. This is provided for trade opportunities, but should be adapted for general content proposal and announcements – maybe even a BLOG site.

Database Schema for Web Site Project

This Web Site has an access database (chamber.mdb) with 3 tables. The data type definitions for these tables are as follows:

Table 1 - members

Field / Type / Description
Id / Autonumber / Primary Key
CompanyName / Text
ContactName / Text
StreetPostalAddress / Text
Login / Text
Pwd / Text
Email / Text
Phone / Text
Fax / Text
Mobile / Text
Website / Text
TypeofBusiness / Text
NoofEmployees / Text
YearStarted / Text
CompanyProifile / Memo

Table 2 – Enquiries

Field / Type / Description
Id / Autonumber / Primary Key
Name / Text / Links to members table
Title / Text
Organisation / Text
Phone / Number
Fax / Number
Email / Text
Website / Text
Interest / Text
Comments / Memo

Table 3 – News

Field / Type / Description
Id / Autonumber / Primary Key
PageType / Text
Label / Text
Link / Text
Content / Memo
Author / Text
Archived / Text
LatEdited / Text

Notes:

A committee member must be logged in to edit the tables.

Live news items will appear on their list pages.

Archived articles will be held in the database and can be searched

Appendix A: Customer Review Form

The customer’s project manager gave the following appraisal of the draft site :-

NSW Vietnam Chamber of Business
WebSite Quality Assessment Review 1 Dec 2004
Parameter / Score (out of 5) / Comments
Aesthetics & Appearance / 3 / The sponsor graphics were changed to suit the page – this is not acceptable to the corporate sponsors and must be fixed before the final site goes production
Suitability for Purpose / 5 / The site brings the Chamber much closer to achieving some important commercial ends online
Speed / 3 / Only the Flash with music backing was unacceptably slow to load
Useability / 4 / Especially liked the site management access to the databases
Navigation / 4 / Straightforward navigation which works. The Member forms have no way back other than the “back” button of the browser
Flash graphics / 4 / This could be ideal for multimedia depiction of a few major events, or tourism related content
Bugs, blind links or Malfunctions seen? / 4 / Prefer that pages cannot link to themselves in the navigation
Functionality Gaps / 4 / Basically this is just final setup to represent our commercial policies and deciding who will get the emails from trade enquiries
Authorised Reviewer – P.W Allan (President)
Signature: Peter Allan 2 / 12 / 2004

Appendix B: Website User Testing Technique

One of the most effective forms of inspection-based user testing involves the use of a "usability checklist". This method gives a structure to evaluation and can be used at virtually any time throughout the development cycle, from the earliest prototype screens to a full-blown Website.

Setting the Stage

The basic method for employing the checklist-based user test is as follows:-

Step 1. Preliminary Self-Appraisal

You can save considerable time, both for yourself and for your evaluators, if you start with a basic sweep of your site for known usability problems. View this self-appraisal as a preliminary step, however, and not as a substitute for user testing methods.

Step 2: Provide checklists to your testers

Ideally, the more independent and autonomous your testers are, the more valuable the feedback they can provide. A working site will probably want to enlist the aid of volunteer testers with some interest in the subject of the site.

One important consideration is: how many testers are enough? There's no hard-and-fast rule, but inspection-based testing methods provide a surprisingly quick payback, even with a small number of evaluators. A handful (4 or 5) is more than adequate to ensure a generally reader-friendly Website. It's also desirable to include 'Net novices in your test group. I used my family to review the site, with a wide range of web familiarity from power user to novice. Only the customer delegate got to fill in the evaluation form, with the others making subjective comments.

NSW Vietnam Chamber of Business
WebSite Quality Assessment Review 1 Dec 2004
Parameter / Score (out of 5) / Comments
Aesthetics & Appearance
Suitability for Purpose
Speed
Useability
Navigation
Flash graphics
Bugs, blind links or Malfunctions seen?
Functionality Gaps
Authorised Reviewer –
Signature:

Step 3: Provide some brief instructions

Understand that your evaluators will naturally assume that the problems they encounter in using your site are the result of some fault on their part, rather than a flaw in the design of the site itself. It is therefore important for you to explain that you need them to make note of any problems they encounter.

Step 4: Let them review without your presence

In formal usability experiments, the experimenter typically remains in the room to observe and record testers' behavior. But unless you're a trained usability professional, your presence will likely as not serve to inhibit your evaluators, and thus compromise their ability to test your site.

Appendix C: A Generic Checklist

Some parameters for criteria that define reader friendliness and whether visitors return to the site.

Communication

Does the site convey a clear sense of its intended audience?
Does it use language in a way that is familiar to and comfortable for its readers? Is it conversational in its tone?

Accessibility

Is load time appropriate to content, even on a slow dial-in connection?
Is it accessible to readers with physical impairments?
Is there an easily discoverable means of communicating with the author or administrator?

Consistency

Does the site have a consistent, clearly recognizable "look-&-feel"?
Does it make effective use of repeating visual themes to unify the site?
Is it visually consistent even without graphics?

Navigation

Does the site use (approximately) standard link colors?
Are the links obvious in their intent and destination?
Is there a convenient, obvious way to manoeuvre among related pages, and between different sections?

Website Re-Engineering Design

Contents:

Executive Summary:

Functional Requirements:

The current site:

The client requirements for the site:

The product objectives:

How those characteristics will impact on the design of the product and the media used to deliver the site content:

Client database requirements:

Member Database:

Event Database:

Opportunity Database:

Products & Services Database:

Usability tests (identify and plan)

Design Section:

Visual Elements:

Interactive Components:

Site Function and Navigation:

Further Development

Table 1 - members

Table 2 – Enquiries

Appendix A: Customer Review Form

The customer’s project manager gave the following appraisal of the draft site :-

Setting the Stage