Website design v3.1

23
WEBSITE DESIGN DOCUMENT Red Cross Field System Document Author: Toby Allder & Tim Blackburn

description

 

Transcript of Website design v3.1

Page 1: Website design v3.1

WEBSITE DESIGN DOCUMENT

Red Cross Field System

Document Author: Toby Allder & Tim Blackburn

Page 2: Website design v3.1

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

Page 3: Website design v3.1

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

Page 4: Website design v3.1

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

Page 5: Website design v3.1

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

Page 6: Website design v3.1

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

Page 7: Website design v3.1

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

Page 8: Website design v3.1

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

Page 9: Website design v3.1

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

Page 10: Website design v3.1

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

Page 11: Website design v3.1

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

Page 12: Website design v3.1

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

Page 13: Website design v3.1

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

Page 14: Website design v3.1

Website Design Document

8.1.3 – Final Design: Login page

Website_Design_V3.1.doc Page 14 of 23

Page 15: Website design v3.1

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

Page 16: Website design v3.1

Website Design Document

8.2.3 – Final Design: Volunteer Home page

Website_Design_V3.1.doc Page 16 of 23

Page 17: Website design v3.1

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

Page 18: Website design v3.1

Website Design Document

8.3.3 – Final Design: Volunteer Personal Details page

Website_Design_V3.1.doc Page 18 of 23

Page 19: Website design v3.1

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

Page 20: Website design v3.1

Website Design Document

8.4.3 – Final Design: Staff home page

Website_Design_V3.1.doc Page 20 of 23

Page 21: Website design v3.1

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

Page 22: Website design v3.1

Website Design Document

8.5.3 – Final Design: Staff Events page

Website_Design_V3.1.doc Page 22 of 23

Page 23: Website design v3.1

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