The IT team at Dragon System Consulting was tasked with designing and prototyping a new client technology tracking system. They began by analyzing similar websites to inform their design. They created low-fidelity paper prototypes and videos demonstrating functionality. From there, they designed wireframes using Balsamiq. Finally, they created high-fidelity prototypes of the full system using HTML, CSS, JavaScript and other technologies. The prototypes included justifications for colors, usernames/passwords and the application architecture with separate presentation, business and data layers.

1. 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 DepartmentatDragon SystemConsultinghave
beentaskedwithdesigningandconductingawalk-
throughof a systemprototype toseniormanagement.
From thisthe applicationarchitecture of the system will
be described.
Client Technology Tracking
System

2. Contents
1.0 Introduction............................................................................................................................ 3
2.0 WebpagesAnalysed................................................................................................................ 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 Passwordfor Each User ........................................................................ 13
6.0 ApplicationArchitecture........................................................................................................ 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

3. 1.0 Introduction
Based 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.

4. 2.0 Webpages Analysed
In 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/
Figure 2: UniActiv LLC

5. 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
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.

6. 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
Figure 6: OnForce

7. 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.
3.0 Low-Fi Prototype Material
Once 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 Testing
Once 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

8. 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.
Table 1: Paper Prototypes You Tube Video Links
3.2 Metrics
The 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 Access
Index Page Can Log in, Sign up, View services,
View about us, user can search for
anything.
All Users
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.
Client
Technician
Receptionist
Insert work
record
Insert Details of Work Completed. Technician
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

9. 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.
Client
Technician
Management
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
4.0 Wireframe Prototype
Once 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 Screens
The following screenshot shows the index page of Dragon System Consulting

10. Screen Shot 1: Index Page Balsamiq
The following screenshot provides the log in page for Dragon System Consulting;
Screen Shot 2: Login Page Balsamiq

11. The following link provides a screenshot of IT Consulting page provided through Balsamiq;
Screen Shot 3: IT Consulting
The following screenshot shows the Manager Homepage through Balsamiq;
Screen Shot 4: Manager Home Page

12. 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 Prototype
When 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 used
The following screen shot provides an example of colour used for the site
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 Justificationforchoosing Blue
Based 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 JustificationforchoosingPink
Pink 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

13. research team both agreed that pink and blue worked effectively together thereby giving the
user a unique experience.
5.1.3 Usernameand PasswordforEachUser
To access thisapplicationsoftwarewe have create demousernameandpasswordtheyare below,
User Username Password
Client 100 100
Receptionist 200 200
Technician 300 300
Manager 400 400
Employee 500 500
6.0 ApplicationArchitecture
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 PresentationLayer
The 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

14. 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.
6.4 Description and Justification of Technologies Used
For 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)
PresentationLayer HTML, CSS Javascript HTML, CSS Javascript
PresentationLogicLayer JSP/Servlets ASP.net
BusinessLayer EntJavaBeans .NET servicedcomponents
Data AccessLayer SQL, JDBC SQL ADO.Net
Data 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

15. Ease Of Use (Development
Environment) ** ****
VB.netandC# are easiertouse than
J2EE
Scalability *** ** Execute JavaCode on Mainframe
Single Language Multiple
Platforms **** *
Java Can runon many platformsthrough
the JVM
Multiple LanguagesSingle
Platform * ****
VB,C#,J#all run inthe same run-time
environment
Reliability ** **** VB/Comdevelopmentin1993
Performance *** *** Equal Performance
Speedof development * *** VB code easiertolearn
Reuse **** **
Deploysame code onmultiple platforms
and multiple projects
OpenStandards ***** * Java,JVMare openstandards
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.
1 This information comes from the class notes

16.  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.
6.4.1 Justificationoftechnologiesused
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

17. 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.