Demonstration

This section illustrates the product through pictures of the web application. This system is currently a prototype with basic representation of functionalities in mentioned scope. At the moment, the prototype is accessible oncollaborative-system-thesis.herokuapp.com.

Figure 11.Login view

At first, the user has to log in with either their Employee or Guest account. Guest account credentials are registered at the moment they first log in.

Figure 12.Guest UI: Dashboard

The overall of Guest account is pretty simple and has limited functionalities. Overall, a Guest can only have access over their basic information and associated tickets.

Figure 13.Guest UI: Submit ticket form

There is a plus button in this view to open a dialog, which includes a form to submit a ticket. By doing this, a request from this Guest user is sent to the company and awaits further response. At the moment, only text is available, in the future there is likely more data types attached to a ticket, e.g. image, file.

Figure 14.Guest UI: Ticket details

Ticket details view serves as the primary channel of information exchange about this particular customer request. Here Guest user can only view limited information, and make a reply by commenting on ticket. Both user and assignee (if any) will receive an email notifying the new activity on this ticket.

Figure 15.Employee UI: Homepage

Primary features focus on the Employee UI. Whatever view Employee is currently in, on the left side of the screen is there always a navigation bar. Through this sidebar, Employee can access to other objects of the system. The picture above captures the homepage after logging in. It renders the trends of tickets in statistical view, by visualizing several charts about ticket data recently. The area chart depicts the number of tickets by each sector for the last 30 days to observe which sector probably has underlying problems, while the doughnut chart shows the proportions of ticket by each issue in the meantime to detect the most recurring similar problems. This is especially useful for Manager and further decision-making, but it is extremely primitive now.

Figure 16.Employee UI: Workgroup

In Workgroup view, there is a grid of workgroups in the system. Employee can quickly create a new one and add more members to their own group. By clicking on an item, Employee gets redirected to its detailed view.

Figure 17.Employee UI: Workgroup details

There are 4 sections within workgroup. Firstly, the member list whose item can be added by all members but only removed by the creator. Secondly, the basic information of the workgroup can only be updated by the creator too. Furthermore, conversations and tasks

are organized by workgroup, which practically means internal discussion topics and tasks belonging to a certain department or project team.

Figure 18.Employee UI: Conversation details

Each conversation can be created by filling a form to make a place for discussing and exchanging information within the team. In Conversation details view, team members can send a comment reply quickly. At the moment, only text is available, in the future there is likely more data types attached to a conversation, e.g. image, file.

Figure 19.Employee UI: Task details

Task details view is split into two sections. The left side includes additional details about task, e.g. what it is, who is assigned, due date, priority. The right side consists of other objects in relation to this task: the workgroup it belongs to, parent task and children tasks (if any).

Figure 20.Employee UI: Customer

Customer view has a table list of customers in the system. By clicking on each item, Employee will get redirected to their detailed view.

Figure 21.Employee UI: Customer details

Customer details view consists of their information and associated tickets. Here User can update these contact details.

Figure 22.Employee UI: Ticket details

There are currently two ways to access ticket details. Firstly, by choosing Ticket view on sidebar then selecting ticket item in table. Secondly, by choosing ticket item in Customer details view. Differing from Guest dashboard, Employee dashboard allows user to see additional properties which are relevant to customer support business, e.g. severity and categorization. Right here Employee can also update these fields.

Figure 23.Manager UI: Ticket Sector

The following system objects can only be manipulated by a Manager: ticket sector,

is-sue, and user. There are also 3 views dedicated to these objects. Staff can still see these views with rendered information, but can neither create nor update any. The picture above shows the Ticket Sector view, which has a table of sector items. Each of them represents a relevant component of the service or product that the company sells to customer. Through these customized elements, Employee can categorize their tickets and determine the peo-ple who can take accountability of doing its background resolution. Its properties can be flexibly utilized according to company’s wishes. Unlike usual tag element which is just a string, a ticket sector is organized with its own properties, yet still too simplistic.

Figure 24.Manager UI: Issue

The picture above shows another kind of categorization entity: issue. As explained, an issue mainly represents question/answer pair which determines the follow-up steps of dealing with a set of similar or recurring bugs. These information focuses on the bug behaviour, how to reproduce it, and how to solve it step-by-step. The issue can prove useful means of standardizing further work process of dealing with reported bugs.

Figure 25.Manager UI: User

Finally, User view allows Manager to add a new Employee user into the system and grant them with either Staff or Manager privileges. After being added, the new Employee receives a notification email and they can use provided credentials to access the system functionalities on this web application.