2. Website Design Document
Executive Summary
The purpose of this document is to outline the guidelines
and standards to which this website will adhere, how the
general design process occurred (methodology), aspects
of the conceptual design process including navigation,
page designs, etc.
The intended audience of this document is the Swin Field
project group and possible future project teams who may
expand upon this website.
Website_Design_V3.1.doc Page 2 of 23
3. Website Design Document
Contents
1. Introduction ............................................................................................................................ 4
1.1 Document Purpose .......................................................................................................... 4
1.2 Document Scope.............................................................................................................. 4
2. Website Design Process........................................................................................................ 5
3. Website Standards ................................................................................................................ 6
3.1 Website Design Standards............................................................................................... 6
3.2 Website Coding Standards .............................................................................................. 6
4. Client Requirements .............................................................................................................. 7
5. Architecture Requirements .................................................................................................... 8
6. Hardware and Software Requirements.................................................................................. 9
7. Hierarchy and Navigation Diagram...................................................................................... 10
8. Main Page Type Designs..................................................................................................... 13
8.1.1 – Early prototype: Login page ..................................................................................... 13
8.1.2 – Final prototype: Login page...................................................................................... 13
8.1.3 – Final Design: Login page ......................................................................................... 14
8.2.1 – Early prototype: Volunteer Home page .................................................................... 15
8.2.2 – Final prototype: Volunteer Home page .................................................................... 15
8.2.3 – Final Design: Volunteer Home page ........................................................................ 16
8.3.1 – Early prototype: Volunteer Personal Details page ................................................... 17
8.3.2 – Final prototype: Volunteer Personal Details page.................................................... 17
8.3.3 – Final Design: Volunteer Personal Details page........................................................ 18
8.4.1 – Early prototype: Staff home page............................................................................. 19
8.4.2 – Final prototype: Staff home page ............................................................................. 19
8.4.3 – Final Design: Staff home page................................................................................. 20
8.5.1 – Early prototype: Staff Events page........................................................................... 21
8.5.2 – Final prototype: Staff Events page ........................................................................... 21
8.5.3 – Final Design: Staff Events page............................................................................... 22
9. Server Side Script................................................................................................................ 23
Website_Design_V3.1.doc Page 3 of 23
4. Website Design Document
1. Introduction
1.1 Document Purpose
The purpose of this document is to comprehensively dictate the design standards to which the
Swin Field project team will adhere to while creating the Red Cross Field System web
application. It is to also provide evidence of the design process and how the final design and
navigation was determined.
1.2 Document Scope
The scope of this document ranges from the methodology Swin Field used during this project
and how it impacted upon the final design and navigation, the website design standards which
will be adhered to, the client requirements and how they have helped to shape the final
product, the software and hardware requirements required, hierarchy and navigation design,
and the design of server side scripting.
Website_Design_V3.1.doc Page 4 of 23
5. Website Design Document
2. Website Design Process
Please refer to Section 2.5.1 of the Project Plan, which can be located at:
http://cit3.ldl.swin.edu.au/~swinfield/documents/projectplan/Swinfield_Project_Plan_V2.1.pdf
Website_Design_V3.1.doc Page 5 of 23
6. Website Design Document
3. Website Standards
3.1 Website Design Standards
Please refer to the section of the Swinburne Major project site related to website design
standards, which can be located at:
http://cit.wta.swin.edu.au/cit/majorprojects/quality/standards/webSiteDesignStandards.html
3.2 Website Coding Standards
Please refer to the section of the Swinburne Major project site related to website coding
standards, which can be located at:
http://cit.wta.swin.edu.au/cit/majorprojects/quality/standards/webSiteCodingStandards.html
Website_Design_V3.1.doc Page 6 of 23
7. Website Design Document
4. Client Requirements
Please refer to Section 4 of the Functional Requirements Document, which can be located at:
http://cit3.ldl.swin.edu.au/~swinfield/documents/functional/Swinfield_Requirements_V3.1.pdf
Website_Design_V3.1.doc Page 7 of 23
8. Website Design Document
5. Architecture Requirements
After developing several prototypes and discussions with the client, it became apparent that a
certain consistent style of navigation should be implemented for both main user groups
(Volunteers and Red Cross staff).
A side navigation bar was decided upon. This was mainly due to the fact that it is likely this
website will be expanded upon in the future, and as such a horizontal navigation bar style was
not suitable as it would not effectively handle this expansion. This was applied to both user
groups, as at times Volunteers can be changed to a Field Officer status and it is best that the
navigation layout stays as similar as possible.
This side navigation bar is to stay on all pages throughout the site as it enhances efficiency
and effectiveness of browsing the site.
Website_Design_V3.1.doc Page 8 of 23
9. Website Design Document
6. Hardware and Software Requirements
Please refer to Section 4 of the System Requirements Specifications document, which can be
located at:
http://cit3.ldl.swin.edu.au/~swinfield/documents/srs/swin_field_SRSV2.2.pdf
Website_Design_V3.1.doc Page 9 of 23
10. Website Design Document
7. Hierarchy and Navigation Diagram
This is the hierarchy diagram from a ‘volunteer’ perspective
Login
Main Page
Shifts Personal My Teams Availability
Available Details
Teams Events Sites Clients
This is the hierarchy diagram from a ‘staff’ perspective
Login
Personal Availability
Details
Main Page
Shifts Clients
Available
Teams Events Sites My Teams
Website_Design_V3.1.doc Page 10 of 23
11. Website Design Document
This is an example of the navigation of our ‘staff’ system.
Login Screen
Staff Home
Personal Events Sites Availability User Search
Details
Shifts My Teams Teams Clients
Available
Global Navigation
Shift details Users
Details
Agency
Website_Design_V3.1.doc Page 11 of 23
12. Website Design Document
This is an example of the navigation of our ‘volunteer’ system.
Login Screen
Staff Home
Personal Shifts My Teams Availability
Details Available
Global Navigation
Sites Teams Clients Events
Users
Details
Website_Design_V3.1.doc Page 12 of 23
13. Website Design Document
8. Main Page Type Designs
Several prototyping sessions were conducted during the Analysis phase to help determine the
main page type layouts. Below are samples of an early stage prototype and then a last
prototype of several of the main pages.
8.1.1 – Early prototype: Login page
8.1.2 – Final prototype: Login page
Website_Design_V3.1.doc Page 13 of 23
15. Website Design Document
8.2.1 – Early prototype: Volunteer Home page
8.2.2 – Final prototype: Volunteer Home page
Website_Design_V3.1.doc Page 15 of 23
17. Website Design Document
8.3.1 – Early prototype: Volunteer Personal Details page
8.3.2 – Final prototype: Volunteer Personal Details page
Website_Design_V3.1.doc Page 17 of 23
23. Website Design Document
9. Server Side Script
We have made use of the following in our system:
Ajax
CodeIgniter with Model View controller Framework
PHP/MySQL
Website_Design_V3.1.doc Page 23 of 23