website design v3.1
DESCRIPTION
TRANSCRIPT
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
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
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
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
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
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
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
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
Website Design Document
7. Hierarchy and Navigation Diagram
This is the hierarchy diagram from a ‘volunteer’ perspective
Main Page
Login
Shifts Available
Personal Details
My Teams
Events
Sites Clients Teams
Availability
This is the hierarchy diagram from a ‘staff’ perspective
Main Page
My Teams
Clients
Sites
Availability
Shifts Available
Personal Details
Events
Teams
Login
Website_Design_V3.1.doc Page 10 of 23
Website Design Document
This is an example of the navigation of our ‘staff’ system.
Login Screen
Staff Home
User Search Sites Events
Availability
My Teams Clients Teams
Global Navigation
Users Details
Personal Details
Shift details
Shifts Available
Agency
Website_Design_V3.1.doc Page 11 of 23
Website Design Document
This is an example of the navigation of our ‘volunteer’ system.
Login Screen
Staff Home
Teams Clients Sites Events
Global Navigation
Availability My Teams Personal Details
Shifts Available
Users Details
Website_Design_V3.1.doc Page 12 of 23
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
Website Design Document
8.1.3 – Final Design: Login page
Website_Design_V3.1.doc Page 14 of 23
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
Website Design Document
8.2.3 – Final Design: Volunteer Home page
Website_Design_V3.1.doc Page 16 of 23
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
Website Design Document
8.3.3 – Final Design: Volunteer Personal Details page
Website_Design_V3.1.doc Page 18 of 23
Website Design Document
8.4.1 – Early prototype: Staff home page
8.4.2 – Final prototype: Staff home page
Website_Design_V3.1.doc Page 19 of 23
Website Design Document
8.4.3 – Final Design: Staff home page
Website_Design_V3.1.doc Page 20 of 23
Website Design Document
8.5.1 – Early prototype: Staff Events page
8.5.2 – Final prototype: Staff Events page
Website_Design_V3.1.doc Page 21 of 23
Website Design Document
8.5.3 – Final Design: Staff Events page
Website_Design_V3.1.doc Page 22 of 23
Website_Design_V3.1.doc Page 23 of 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