client technology tracking system

22
Voka Consultancy Group University College Cork Project: IS6153 Date: 18/3/15 Ismail Hossain-114221879 Brian Murphy-114222980 Brendan McSweeney-114223513 Canice Walsh-114221438 The IT Department at Dragon System Consulting have been tasked with designing and conducting a walk- through of a system prototype to senior management. From this the application architecture of the system will be described. Client Technology Tracking System

Upload: brendan-mc-sweeney

Post on 17-Aug-2015

27 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Client Technology Tracking System

Voka Consultancy Group

U n i v e r s i t y C o l l e g e C o r k

P r o j e c t : I S 6 1 5 3

D a t e : 1 8 / 3 / 1 5

Ismail Hossain-114221879

Brian Murphy-114222980

Brendan McSweeney-114223513

Canice Walsh-114221438

The IT Department at Dragon System Consulting have been tasked with designing and conducting a walk-through of a system prototype to senior management. From this the application architecture of the system will be described.

Client Technology Tracking System

Page 2: Client Technology Tracking System

Contents1.0 Introduction.....................................................................................................................................3

2.0 Webpages Analysed.........................................................................................................................4

3.0 Low-Fi Prototype Material...............................................................................................................7

3.1 Prototype Testing........................................................................................................................7

3.2 Metrics.........................................................................................................................................8

4.0 Wireframe Prototype.......................................................................................................................9

4.1 Wireframe Prototype Screens.....................................................................................................9

5.0 Hi-Fi Prototype...............................................................................................................................12

5.1 Justification for Colours used.....................................................................................................12

5.1.1 Justification for choosing Blue............................................................................................12

5.1.2 Justification for choosing Pink.............................................................................................12

5.1.3 Username and Password for Each User..............................................................................13

6.0 Application Architecture................................................................................................................13

6.1 Presentation Layer.................................................................................................................13

6.2 Business Layer.......................................................................................................................13

6.3 Data layer...............................................................................................................................14

6.4 Description and Justification of Technologies Used...................................................................14

6.4.1 Justification of technologies used.......................................................................................16

7.0 Conclusion.....................................................................................................................................16

Page 3: Client Technology Tracking System

1.0 IntroductionBased on the analysis of the current system in place at dragon system consulting, it was

suggested that the system was considerably behind competitors in terms of its functionality,

so in order to keep up to date with the dynamic trends in our industry it was agreed that our

current system required significant modification.

In order to assess what changes were needed the research team decided to get user feedback

of the current system to establish what exactly the “as-is” scenario of the current system was.

From there the IT team could get clarification of the changes that needed to be made to create

a satisfactory system for all stakeholders in the “to-be” scenario.

Once the “as-is” scenario was identified, the IT team could begin creating a new system. So

the IT Team recognised that the best first step to take was to analyse similar web pages and

consequently design some low-fi prototypes, including diagrams of the potential new system

as well as a storyboard of how the potential new system would basically work.

When the IT Team were satisfied with the low-fi prototypes, a short video was created

outlining the basic functionality of the potential system. From there the IT team established

what the main tasks/functions of the system would be.

Before a wireframe prototype could be designed the IT Team consulted with the research

team to consider what kind of colour scheme should be used in the system. Once the colour

scheme was justified and once the basics of the system were known the IT Team decided to

take the low-fi prototype one step further by designing a wireframe prototype.

In turn the next logical step after the wireframe prototype was to design the high fi prototype

which essentially is the finished system before publication.

However before publication the IT Team must first of all justify the application architecture

and in turn justify why the IT Team chose certain technologies when developing the system.

Page 4: Client Technology Tracking System

2.0 Webpages AnalysedIn order to establish what template the system should follow and what colours should be used

we firstly reviewed similar webpages. The following link

http://www.auctus-software.com/it_consulting.html provides access to similar pages and we

have also included a screenshot.

Figure 1: Auctus

Both the IT Team and Research Team agreed that the navigation bar at the top of figure 1

would be a useful feature for the homepage of Dragon System Consulting, however both the

IT Team and research team believed that the shade of blue used in figure 1 would not be

appropriate for Dragon System Consulting and also it was agreed that there was too much

detail on the homepage. After analysing the webpage illustrated in figure 1, both the IT Team

and research team agreed that the homepage of Dragon System Consulting should be kept

concise.

The following link provides another example of a similar site that was analysed and we have

also included a screenshot. http://uniactiv.com/

Page 5: Client Technology Tracking System

Figure 2: UniActiv LLC

From our analysis of figure 2, both the Research Team and IT Team both appreciated the

moving features incorporated. Dragon System Consulting decided to utilise this feature in the

new system as it further enhances the professionalism of the organisation.

The following link http://precisionitconsulting.com/ gives another example of a similar site

that we analysed and we have included a screenshot.

Figure 3 : Precision

Figure 4 : Precision Footer

The screenshots of both figure 3 and figure 4 have come from the same website. Basically

figure 3 was the ideal website to highlight the main colour and layout of the Dragon System

Page 6: Client Technology Tracking System

Consulting homepage. Figure 4 is essentially the end of the homepage for figure 3. It was

agreed that Dragon System Consulting should include contact details at the end of the

Homepage.

The following link http://www.antarisconsulting.com/ shows the website Antaris which we

analyzed and also included a screenshot below;

Figure 5 : Antaris

Based on our analysis of the webpage illustrated in figure 5, we found that the search bar at

the top allowed for easy navigation and therefore greater usability. It was agreed that the new

system for Dragon System Consulting should include a search bar so that the user could

easily navigate around the system.

The following link https://www.onforce.com/ gives another good example of a website we

analysed and have also included a screenshot

Page 7: Client Technology Tracking System

Figure 6: OnForce

Once again following analysis of the web page illustrated in figure 6 it was decided that it

was best to include a sign up feature for new users at the top of the homepage.

The following link http://www.cit.ie/ gives the last website we analyzed and have also

provided a screenshot below;

Figure 7 : CIT

This page essentially highlights the main colour scheme of the webpage. Following the

analysis of the web page illustrated in figure 7, it was agreed that the pink and blue colour

scheme worked well, so it was decided that Dragon System Consulting should implement this

colour scheme for the system. It was also agreed that the additional functionality of the drop

down menu illustrated in figure 7 would also work well in the Dragon System Consulting

website.

Page 8: Client Technology Tracking System

3.0 Low-Fi Prototype MaterialOnce the IT Team analysed other webpages it was agreed that the next logical step should be

to sketch out the proposed system using paper or low fi prototypes. We have enclosed a paper

prototype folder attached to this report, which shows sketches for the proposed site. We

decided to set up a YouTube channel called Voka Consultancy providing videos which

demonstrates a step by step tutorial of using the proposed site. We have provided a table in

the next section with links associated to each paper prototype video.

3.1 Prototype TestingOnce the low-fi prototypes were completed the IT Team recognised the importance of testing

out the low-fi prototypes by illustrating the potential functionality of the system. The IT

Team conducted a number of brief videos illustrating the potential steps that would be taken

when using the system itself. The following table shows how we decided to create a

YouTube channel named Voka Consultancy to walk management through our paper

prototype and outline the functions of the site with the links provided.

Paper Prototypes You Tube Video Links

Manager Paper Prototype https://www.youtube.com/watch?v=LzAIlvdQndk

Client Paper Prototype https://www.youtube.com/watch?v=LmLLMiGRFvU

Receptionist Paper Prototype https://www.youtube.com/watch?v=ZTCEa7x9Pxc

Employee Paper Prototype https://www.youtube.com/watch?v=pyaWjgvq728

Technician Paper Prototype https://www.youtube.com/watch?v=08MvgONj6dg

Sign Up Paper Prototype https://www.youtube.com/watch?v=lJ4cDfZjmgU

About Us Prototype https://www.youtube.com/watch?v=vBhJzztLHiw

Table 1: Paper Prototypes You Tube Video Links

3.2 MetricsThe following metrics table below provides the page name, task or function carried out by

this page and the users that can access each individual page.

Page Name Task/Function AccessIndex Page Can Log in, Sign up, View services,

View about us, user can search for All Users

Page 9: Client Technology Tracking System

anything.Service Page Can View what services are provided

by the company such as IT Consulting, IT Services, Cloud Computing and Storage/Security.

All Users

Log in To use the application user must Log in. User can request password if they forget and if they are not members they can sign up.

All Users

Sign Up New Members can sign up to the System.

All Users

Input service request

Users must be logged in to enter service request.

ClientTechnicianReceptionist

Insert work record

Insert Details of Work Completed. Technician

Enter Component information

User can add component information and also edit any changes.

Technician

Check in Inventory

User can check in inventory but cannot change anything.

Receptionist

Insert configuration Information

Changing or entering configuration details.

Technician

Examine unresolved requests and history

User can see all incomplete or unresolved service requests.

ClientTechnicianManagement

Manually Resolve service requests

User can manually mark a service resolved or complete.

Technician

Viewed Installed components

View list of components installed in each client system.

Technician

Input of new equipment

User can enter new equipment or edit Equipment information.

Technician

Enter or edit components type

Creating a new component type or editing an existing component type.

Employee

Enter or edit Equipment type

Creating a new Equipment type or editing an existing equipment type.

Employee

View software Configuration information

View the software configured for each client system.

Technician

Table 2: Metrics

Page 10: Client Technology Tracking System

4.0 Wireframe PrototypeOnce the Low-Fi prototypes were completed and the prototypes were tested the IT Team completed wireframe prototypes using Balsamiq software. All of the Balsamiq files can be accessed by using the username and password provided below and we have also included a sample of screenshots.

4.1 Wireframe Prototype ScreensThe following screenshot shows the index page of Dragon System Consulting

Screen Shot 1: Index Page Balsamiq

The following screenshot provides the log in page for Dragon System Consulting;

Page 11: Client Technology Tracking System

Screen Shot 2: Login Page Balsamiq

The following link provides a screenshot of IT Consulting page provided through Balsamiq;

Page 12: Client Technology Tracking System

Screen Shot 3: IT Consulting

The following screenshot shows the Manager Homepage through Balsamiq;

Screen Shot 4: Manager Home Page

In order to access our Balsamiq prototype we have provided the following log in details which are as follows;

User Name- Voka15

Password-Voka15

5.0 Hi-Fi PrototypeWhen the wireframe prototype was complete, the IT Team decided to design the system itself

using HTML, CSS, JAVA Script, JQuery and Google Chrome.

5.1 Justification for Colours usedThe following screen shot provides an example of colour used for the site

Page 13: Client Technology Tracking System

Figure 8: Home Page

Following the analysis of similar webpages both the IT Team and research team came to the

conclusion that the two main colours should primarily be blue and pink as illustrated in

Figure 8.

5.1.1 Justification for choosing BlueBased on similar web pages analysed, blue appeared to be a common colour used. From

consultation with the research team, the IT Team believed that blue was the best colour to

incorporate into the new system as it was felt that blue was both a welcoming colour for the

user but equally gave the system a corporate look.

5.1.2 Justification for choosing PinkPink is also a common colour used in the new system. The navigation bar at the top of the

home page uses pink efficiently. The research team suggested that pink simply works well in

combination with blue as it enhances the corporate look of the system. The IT Team and

research team both agreed that pink and blue worked effectively together thereby giving the

user a unique experience.

5.1.3 Username and Password for Each User To access this application software we have create demo username and password they are below,

User Username Password

Client 100 100Receptionist 200 200Technician 300 300Manager 400 400Employee 500 500

Page 14: Client Technology Tracking System

6.0 Application Architecture This section essentially describes the overall layout of Dragon Systems Consulting new

system. The measurement for each section of the webpage will be illustrated via screenshots

in the following section.

6.1 Presentation LayerThe aim for the presentation layer of our site was to improve the user accessibility and use of

the site itself so it is easy to optimise performance, while preventing context switching. This

will therefore reduce compatibility issues, maintenance and deployment cost. With any

project there are downfalls or potential problems such as monolithic pieces of code, hard to

modify due to a lack of documentation and qualified programmers. There is also the chance

of lack of qualified programmers for these systems. This can be seen below with our lay out

and sizes of our site from the viewpoint of the user.

6.2 Business Layer

This layer will allow user to access the database but they don’t have accessibility to change

anything, just like the client can see service request history below. This layer is more than

information delivery; it is a key aspect of the performance of data processing behind the

results being delivered. There are a number of examples to show tis including a program that

implements a withdrawal of stock from a business. This program takes the request, checks

whether there is enough stock in the business, verifies whether stock limits overdrawn,

creates a log entry for the operation, performs the operations against the current stock limit

and gives approval to the employee to issue the stock. It is here that the algorithms are

implemented for the organisations.

6.3 Data layer

This layer will allow us to see the database, and what the business is collecting in relation to

component, system configuration and equipment as well as check inventory, which can be

seen below. The overall systems needs data to work with, data can reside in databases or

other information repositories, this deals with and implements different data sources of

Information Systems. This indicates that it is implemented using a Database Management

System. From our software company example, the RM layer could be the inventory database

of the company. This can also be a gateway to recursively using other systems.

Page 15: Client Technology Tracking System

6.4 Description and Justification of Technologies UsedFor accessing this software the recommended browser is google chrome and Firefox. This

software cannot be fully accessed by internet explorer. CSS was used to design the layout of

the pages; JAVA Script formed validation and provided navigation to other pages. HTML

was used to construct applications; JQuery was used for animation while Notepad++ was

used for editing and creating web pages. Balsamiq was used as the tool of choice for the

wireframe prototype. Google Chrome and Firefox were used to test the software.

Layer J2EE Microsoft (.NET)

Presentation Layer HTML, CSS Javascript HTML, CSS JavascriptPresentation Logic Layer JSP/Servlets ASP.netBusiness Layer EntJavaBeans .NET serviced componentsData Access Layer SQL, JDBC SQL ADO.NetData Layer Oracle, MySQL SQL Server

Application for each layer (J2EE vs. Microsoft(.NET)) (Bill Emerson)

Ascertaining which of the two technologies is ‘best-fit’ for Dragon Consulting is difficult, so

much so that it can simply come down to what employees/end-users have the most

experience of using. The following scorecard rates the comparative strengths and weaknesses

of both J2EE and .NET:

Criteria J2EE .NET Comments

Ease Of Use (Development Environment) ** ****

VB.net and C# are easier to use than J2EE

Scalability *** ** Execute Java Code on Mainframe

Single Language Multiple Platforms **** *

Java Can run on many platforms through the JVM

Multiple Languages Single Platform * ****

VB,C#,J# all run in the same run-time environment

Reliability ** **** VB/Com development in 1993

Performance *** *** Equal Performance

Page 16: Client Technology Tracking System

Speed of development * *** VB code easier to learn

Reuse **** **Deploy same code on multiple platforms and multiple projects

Open Standards ***** * Java, JVM are open standards

Overall 56% 51%

Scorecard (Microsoft .NET vs J2EE) (Bill Emerson)

The findings above are quite close; J2EE prevailing thanks in part to its ability to run on

many platforms, as well as the fact that its code is reusable on multiple platforms and

multiple projects. Furthermore, J2EE is written in Java, an open platform, in contrast

to .NET, which runs solely on Windows OS 1.

To develop this Dragon System Consulting Application software we have used number of

programming languages which are explained below,

Cascading Style Sheet (CSS) was used to manage the layout and structure of the

pages.

JavaScript was used for form validation and navigation to other pages.

J2EE, PHP and .NET will be used for back end architecture as we do not have

database we did not use them.

Hypertext Markup Language (HTML) was used to build the whole applications

software.

JQuery was used for creating animation to use in banner.

Notepad++ was used for editing and typing code for application design.

Balsamiq was used as the tool of choice for the wireframe prototype.

Google Chrome and Firefox were used to test the application software.

1 This information comes from the class notes

Page 17: Client Technology Tracking System

6.4.1 Justification of technologies used After development of application software we have done number of application test to see

how this software is working. To test this software we have used google chrome, Firefox and

Internet Explorer. The test result is below

Google chrome: user can access all the functionalities by using google chrome as

result come from test.

Firefox: user can access all most every functionality by using Firefox chrome as

result come from test.

Internet Explorer: user cannot access all the functionalities by using Internet

explorer as we have done some test.

Platform: this software can be install, setup and run any operating platform

7.0 Conclusion

Based on our comprehensive analysis of various webpages, and following extensive

prototyping, we believe that we have developed an efficient and functional system for Dragon

System Consulting.

The IT Team completed the project through a logical series of steps which was accomplished

on time and on budget with the resources available. Ultimately the Management team at

Dragon System Consulting presented the IT Team with a system problem and essentially

required a satisfactory resolution to the problem.

First of all the IT Team collaborated with the research team to research similar webpages.

Once this step was concluded the IT Team created a Low-Fi Prototype, created a you tube

channel to give the management a step by step guide as to how the use the system. The

wireframe prototype illustrated the outline of the system and the final step was programming

the system to use in the organisation.