Website design v3.1

WEBSITE DESIGN DOCUMENT
Red Cross Field System

Document Author: Toby Allder & Tim Blackburn

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


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



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.



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



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



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



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.



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



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



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



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



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



8.1.3 – Final Design: Login page



8.2.1 – Early prototype: Volunteer Home page

8.2.2 – Final prototype: Volunteer Home page



8.2.3 – Final Design: Volunteer Home page



8.3.1 – Early prototype: Volunteer Personal Details page

8.3.2 – Final prototype: Volunteer Personal Details page



8.3.3 – Final Design: Volunteer Personal Details page



8.4.1 – Early prototype: Staff home page

8.4.2 – Final prototype: Staff home page



8.4.3 – Final Design: Staff home page



8.5.1 – Early prototype: Staff Events page

8.5.2 – Final prototype: Staff Events page



8.5.3 – Final Design: Staff Events page



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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Website design v3.1

Similar to Website design v3.1 (20)

More from Shu Shin

More from Shu Shin (20)

Website design v3.1