Information visualization of consulting services statistics

Transcription

1 LiU-ITN-TEK-A--16/051--SE Information visualization of consulting services statistics Johan Sylvan Department of Science and Technology Linköping University SE Norrköping, Sweden Institutionen för teknik och naturvetenskap Linköpings universitet Norrköping

2 LiU-ITN-TEK-A--16/051--SE Information visualization of consulting services statistics Examensarbete utfört i Medieteknik vid Tekniska högskolan vid Linköpings universitet Johan Sylvan Handledare Jimmy Johansson Examinator Jonas Löwgren Norrköping

3 Upphovsrätt Detta dokument hålls tillgängligt på Internet eller dess framtida ersättare under en längre tid från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida Copyright The publishers will keep this document online on the Internet - or its possible replacement - for a considerable time from the date of publication barring exceptional circumstances. The online availability of the document implies a permanent permission for anyone to read, to download, to print out single copies for your own use and to use it unchanged for any non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: Johan Sylvan

4 LINKÖPINGS UNIVERSITY Information visualization of consulting services statistics Author: Johan Sylvan Supervisor: Samuel Sapire A thesis submitted in fulfillment of the requirements for the degree of Media Technology and Engineering Master of Science in Engineering Department of Science and Technology October 31, 2016

5

6 iii LINKÖPINGS UNIVERSITY Abstract Media Technology and Engineering Department of Science and Technology Information visualization of consulting services statistics This report documents the theory, work and result of a master s thesis in Media Technology that has been carried out at the Science and Technology Department at Linköpings university. The aim of this masters thesis is to create a customized visualization web application of consulting services statistics. This to allow users to get an overview of time management through clear visual links between developers, customers and tasks. The design of the application is based on literature in usability and information visualization as well as a usability test. This thesis work resulted in a JavaScript based web application using the web framework CakePHP which follows a model-view-controller architectural pattern with visualization components implemented in Javascript.

7

8 v Contents Abstract iii 1 Introduction Angry Creative AB Background Harvest Jira Trello Objectives Problem definition Target Audience Limitations/Constraints Structure of report Theory Time Management Information Visualization Visualization pipeline Data Types Perception Focus and Context Visualization Components Bar chart Scatter plot Model-View-Controller Design Pattern Usability and Usability testing Dashboard design Usability testing Method Agile development Usability testing Prototype Design Final Prototype Menu System Page content Settings Panel Visualization Components Prototype Alpha Implementation Details 29

9 vi 5.1 Data extraction Visualization Model-View-Controller architecture Conclusion and Future Work Conclusion Future work Bibliography 35 A Usability Questions 37

10 vii List of Figures 2.1 Visualization pipeline The relative difficulty of assessing values Bar chart Scatter plot Model-View-Controller design pattern DeveloperStatistics view of TimeVision TicketStatistics view of TimeVision DailyOverview view of TimeVision Settings panel, case Settings panel, case Sum of hours stacked bar chart, case Sum of hours stacked bar chart, case Sum of hours stacked bar chart, case Ticket progress scatter plot, case Ticket progress scatter plot, case Ticket progress scatter plot, case Ticket progress scatter plot, case Customer bar chart, case Customer bar chart, case Customer tickets bar chart Timelogs bar chart, case Timelogs bar chart, case Developer statistics view of TimeVision alpha Ticket statistics view of TimeVision alpha Daily overview view of TimeVision alpha

11

12 1 Chapter 1 Introduction This master s thesis in Media Technology has been carried out at Angry creative AB and the Science and Technology Department at Linköpings university. This chapter will introduce the company as well as the workflow and the software and systems used within the company relevant to this thesis work. 1.1 Angry Creative AB Angry Creative AB, herinafter Angry Creative is a smaller web agency specializing in WordPress solutions located in Norrköping, Sweden. The company was founded in Angry Creatives has several ongoing projects, some projects are Angry Creatives own projects and some are assignments from customers. The customers are mainly smaller or middle-sized companies, some of them are subscribers and others just want to buy a solution to a particular problem. 1.2 Background At Angry Creative most developers spend the majority of their time working with consulting services effectively working with several different tasks for numerous customers. Each smaller task belonging to a project is labeled as a ticket. Tickets or projects given to a developer are time estimated. There are times when customers order an ongoing project and times where customers require help with a solution to a smaller problem. Angry Creative is currently using several external softwares for management. Harvest as a time tracking tool and Jira and trello for managing projects (section and section 1.2.2). A customer sends an which is processed by Google Apps and translated to a ticket. The ticket is then carried to Jira from which a message of its arrival is sent to the staff. A product owner prioritizes the ticket and assigns it to a developer who then time estimates it. The customer is informed about the estimated time and is also notified when the ticket is marked as done. However there is also constant communication between customers and developers as the work is carried out. The actual time a developer has worked on a ticket is logged in the previously mentioned time tracking tool Harvest.

13 2 Chapter 1. Introduction Harvest Harvest is a time tracking tool. It is a web based application which uses a time-based reporting function which is divided into functionalities, one to start a timer for an ongoing task and the other to fill in time on a task after it is completed. Thus providing options for developers to choose the most suitable way to time report Jira Jira is a web application software [1] for managing projects. The system contains projects which is a collection of tickets. Tickets in Jira describes the task performed in a project Trello Trello is a web-based project management application. Trello uses the kanban paradigm for managing projects. Projects are represented by boards, which contain lists. Lists contain cards. Cards are supposed to progress from one list to the next, for instance mirroring the flow of a feature from idea to implementation. Users can be assigned to cards. Users and boards can be grouped into organizations. 1.3 Objectives In companies such as Angry Creative with several different customers and projects there is a necessity to track the time spent working on a certain assignment. It is also a necessity to visualize the time tracking statistics in order to get a clear overview of time management and give clear visual links between developers, customers and tasks. During the recent years a few time tracking systems have been developed. Harvest is one example of such time tracking tool that track time and is able to visualize data to some extent. When a company chooses to introduce new systems for managing the workflow it makes the daily work for developers and product owners more complex in the sense of there being more to keep track of. Thus a need for creating a system in which the different systems are combined emerges. Another thesis work created by Carlström and Kylegård [2] at Angry Creative has resulted in a web application which receives data from Jira and Harvest but not from Trello or other systems used within the company. The web application allows for developers to log time as well as view the time logs connected to their account similarly to Harvest. There is also the option for users to view tickets and see their progress. A web application is to be created combining the functionality of the existing web application with the one being introduced in this paper. The application is given the name TimeVision with the main focus to visualize the statistics of the consulting services at Angry Creative. Its previous

14 1.4. Target Audience 3 purpose was to gather the functionality of Trello and Jira in one easily accessible new application. This is still going to be an objective with the new application presented in this paper, just not the main objective. TimeVision will allow product owners to understand the data more effectively than before and be able to memorize a mental image of the statistics. The secondary objective for TimeVision namely gathering time specific functionalities of different systems and have them easily accessible at one web application will increase the usability of the application and ease the work for users Problem definition How can data be visualized to give relevant information to the administration department of Angry Creative AB? Is there a more efficient way for the product owner to get an overview of what the developers on the team are currently working on? Is there a more efficient way for the product owner to recognize how much time a developer has worked with an assignment and if that time is within the said estimated time? Is there a more efficient way to give an overview of the relation between customers, tasks and developers? For example which developers are linked to which ticket for which customer. 1.4 Target Audience The reader is expected to have a background in computer science. Having a general understanding of programming, web development, and visualization Limitations/Constraints The project is limited in time to 19 full time weeks. Because of this, some functionality of less importance is restricted in the web application. The visualization of the statistics is a priority in the web application meaning the previously mentioned functionality created by Carlström and Kylegård [2] is to be left with its current functionality. Data will not be collected from Trello because of it not being a main priority. The visualization view with access to statistics is limited to three subviews Developer Efficiency, Ticket Efficiency and daily Overview.

15 4 Chapter 1. Introduction 1.5 Structure of report This thesis report will present the theory, implementation and result of a web application designed for visualizing the statistics of the consulting services at Angry Creative. The structure of the report is as follows: The second chapter Theory give an overview of the theory of information visualization and a more in depth look at visualization components used in this thesis work. As well as background theory of time management, the model view controller architectural pattern, usability and usability testing. The third chapter Method documents the development process. It is analyzed how aiding resources such as agile development and usability testing has helped create the final result. The fourth chapter Prototype consists of images of the resulting web application TimeVision. The concept design and information visualization tools are explained and motivated. The fifth chapter Implementation documents a more in depth explanation of the work behind the result. Programming languages are justified and the code structure analyzed. The sixth chapter Conclusion and future work houses a discussion of the results as well as a conclusion of this paper and a section with ideas for future work.

16 5 Chapter 2 Theory The aim in this chapter is to give a theoretical background of essential areas relevant to this master s thesis. There are numerous subjects being relevant to the work presented in this paper and this chapter will focus on the most important subjects for creating a web application visualizing consulting services statistics. 2.1 Time Management Practicing time management tends to lead to a better work performance because workers are less likely to feel stressed about upcoming deadlines [6]. Working towards a long term goal is also often more common while managing time rather than worrying about the day-to-day workload. Furthermore time managing may benefit the personal life of employees. The habit of planning your daily tasks at work can translate to non-work related tasks. Which in turn may improve work performance considering a less hectic private life means less worrying about personal commitments [5]. Aside from the personal benefit of time management there is also an administrative benefit. Tracking time brings time related statistics which if processed and visualized leads to product owners getting valuable information which in turn increases their ability to plan. 2.2 Information Visualization The human brains cognitive processes have an easier time interpreting images and visual patterns compared to numbers [3]. This is the reason for why the need for information visualization exists. Storing large amounts of data which is accessible to a reader is not a problem today. However interpreting the data such as which data is of relevance tends to instead be a difficulty. Information visualization is a study of visual representations of data to reinforce human cognition. Data being both text and geographic information. It is the study for finding correct methods for transforming data into knowledge.

17 6 Chapter 2. Theory Visualization pipeline The visualization pipeline illustrate all stages in a visualization process. Raw data is processed and transformed into Data tables. Meaning the data is to be stored and sorted allowing for it to be easily accessible [7]. Advanced data mining algorithms allow for further processing the data. Visual mappings is where algorithms are applied to data, creating visual structures. Lastly the representations are transformed to the view. FIGURE 2.1: The visualization pipeline. The visualization process is shown here demonstrating each step from transforming raw data into data tables, representing the data tables with graphic shapes and seeing the final results in the visualizations Data Types When identifying what visualization method is most suitable for transforming data into knowledge, knowing about data types will be of interest. Ware [3] mentions three data types in which data is usually categorized into. Real-number data describes intervals och ratios. Category or nominal data labels data into categories and integer or ordinal data is used for ordering Perception Perception and cognition are of interest when it comes to the ability to comprehend visualized data. As the human brain has evolved so has the ability to acknowledge and react to information in the surroundings. Evolution has left the human vision the ability to select and deselect which information is detected by the eyes. Visualization being a human activity means designers need to be aware of the characteristics of the human visual perception. This is not as trivial as it might seem considering the understanding of visual perception is far from completely understood. Even more so human cognition. Shapes, positioning, size and animations are some examples of measures for guiding a users attention leading to a more general understanding of visualizations [8].

18 2.2. Information Visualization Focus and Context The purpose of focus and context is to present a certain part of interest in a more clear way in comparison to other neighboring parts [4]. A solution like altering the opacity or size of some information allows users to gain access to detailed information of the dataset, and still not loose the context of the parts not in focus. As mentioned before a significant part of information visualization is to separate relevant data from a large dataset and focusing on conveying that data to the user. Knowing when focusing on just a part of the information is a good idea is not trivial. Having a focus on a certain part of a dataset may lead to a general understanding being lost as well as the usability often suffering because of less information being visible. Nonetheless, only showing an overview may lead to the user not acknowledging details Visualization Components Each information visualization component have a certain amount of variables, also called dimensions. An increased amount of dimensions in a visualization component will increase the information provided by the chart and more dimensions will provide more relations between the data. However as the amount of dimensions increase for a visualization component so does the complexity. It is often a good idea to keep it simple with as few dimensions as possible unless there is a need for several parameters in order to convey certain information. As mentioned by Spence there is a relative difficulty in assessing values [4]. The human vision is for example more adapted for identifying a change in position compared to a difference in volume as seen in the figure below. FIGURE 2.2: The relative difficulty of assessing quantitative values as mentioned by Robert Spence

19 8 Chapter 2. Theory Bar chart A so called one-dimensional visualization chart only have one value being varied. A bar chart is an example of this where an item in the data set is represented by a bar with the length of the bar depending on the variable. A bar chart is easy to comprehend thus making it a very popular visualization component. The human eye is also better at assessing quantitative values from lengths compared to areas or volumes, usually making bar charts a more efficient visualization tool compared to other one-dimensional visualization charts such as area graphs as seen in figure 2.2. FIGURE 2.3: The bar chart houses either horizontal or vertical bars illustrating comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Scatter plot The scatter plot is an example of a multi-dimensional visualization chart. A number of dimensions can be viewed where the x-position, y-position, size, shape and color of each dot can be altered.

20 2.3. Model-View-Controller Design Pattern 9 FIGURE 2.4: The scatter plot displays values for typically two variables for a set of data. In this figure a third variable has been added through color-coded dots. 2.3 Model-View-Controller Design Pattern Model-View-Controller is a classic architectural pattern in software engineering separating the program into three distinguishable parts. Model, View and Controller [9]. A user interacts with a user interface for which the controller notifies the corresponding model usually through an event handler. The model is updated and notifies the view of the interaction. The view is updated with the new data from the model. FIGURE 2.5: The Model-View-Controller design pattern separating a program into three distinguishable parts. Model, View and Controller. Figure 2.5 illustrates the main structure of the Model-View-Controller pattern. Solid lines being direct calls and dashed lines being notifications and similar events. With this separation of model, view and controller many perks arise. The lines of code in one file is reduced, thus allowing said file to be more focused. The separation is also beneficial because of the model not needing

21 10 Chapter 2. Theory to be updated as frequently as the view. This is especially true for web applications. Furthermore a model can have several views where each view is more easily able to be altered to fit other display devices. Additionally larger applications with more developers involved with different skills allow for division of labour within the different areas. 2.4 Usability and Usability testing A user centered focus is a recommendation when designing a web application since the main objective of information visualization is to turn data into knowledge, otherwise the visualization component will lose its effect if users have difficulty comprehending it. A good starting thought when designing a web application is "Don t make me think!" as stated by Krug when talking about web design [10]. Due to users not reading but rather scanning a web page or application it is relevant with structure. The users should be informed where to focus their attention and should subconsciously know where to look to reach certain information in order for the design to be a successful one. The first impression is even more important on the web compared to real life where a web page cannot respond or alter itself when the user gets a bad impression. Badre claims consistency is one of the most important aspects in web usability [9]. This being the case because humans learning by habit. Thus making it very useful for users to be able to apply the same orienting logic elsewhere Dashboard design There are a few general guidelines for usability provided by Plaisant and Scneiderman. Also known as the Schneiderman s eight golden rules for interactive design [11]. Strive for consistency. Meaning employing a consistent use of actions in similar situations. As well as using identical terminology throughout the entire user interface and applying consistent commands. Enable frequent users to use shortcuts. The interface should adapt to experienced and inexperienced users. Examples of this is how a experienced user can understand abbreviations, function keys, hidden commands, and macro facilities. Offer informative feedback. For every operator action, there should be some system feedback. Design dialog to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. Giving the user the satisfaction of accomplishment. A typical example of this is e-commerce websites with an item selecting page followed up by a checkout page followed up by a payment page.

22 2.4. Usability and Usability testing 11 Offer simple error handling. The system should be designed in a way to prevent users from making serious errors. If an error would occur, the system should then be able to detect the error and guide the user on how to handle the error. Permit easy reversal of actions. This feature relieves anxiety. Encouraging exploration of options unknown to the user. Support internal locus of control. Give users the sense that they are in charge of the system. The system should be designed making users the initiators of actions rather than responders. Reduce short-term memory load. The human information processing in short-term memory being limited leads to displays needing to be kept simple, multiple page displays be consolidated and windowmotion frequency be reduced Usability testing Usability testing is a way of evaluating a product by having users test it. Mainly used in user-centered interaction design. It is a technique for measuring how well a product follows its initial intended purpose. There are many different products which may benefit from usability testing. Some of the most common include foods, consumer products, web sites or web applications and computer interfaces. Meaning almost all products designed to be read or used in some manner can benefit from a usability test [13]. When performing a usability test there are a few things one should have in mind according to Dumas and Loring [13]. Have a clear purpose defined and make sure to inform the participants about said purpose. The interaction of the mediator in a usability test differs depending on the purpose. More interaction is needed in the early stages of testing and when it is of greater importance to get a diagnosis from the participant. Less interaction of the mediator is preferred for later stages when measuring and comparing is the main focus. Respecting participants but remaining in charge is a good foundation for a successful test. It is significant to control the logistics and pacing and to stop unacceptable behavior and dispell negativity. Often it is enough to simply project authority rather than intervene. To effectively dispell negativity moderators does not carry negative emotion into the testing area but instead make a connection with the participant making sure he or she feels appreciated. It is crucial to let participants speak during the test. According to Dumas and Loring [13] the participant should roughly maintain speaker-ship 80 percent of the time. this to focus on the input from the participant. Appropriate interruptions from the mediator may include motivating the participant to think aloud or commenting on known issues in the product. The mediator should be aware of the common occurrence of judicious speaking where participants do not expect an answer to their question. In some

23 12 Chapter 2. Theory cases silent communication is thus a relevant approach. The mediator acknowledges that he or she have heard the question through eye contact but remains silent and lets the participant interpret the silence. For the best test results the test should not be biased. The honest responses and opinions of the participant is what the test is for. Making sure that the questions are neutral as well as watching non-verbal cues such as facial expressions or body language when responding to a comment or behavior of a participant are two examples of how to reduce the chance of making the test biased.

24 13 Chapter 3 Method This chapter aims to acknowledge and explain the work method for the web application TimeVision. There is a discussion of how agile development and usability testing were used to aid performance. 3.1 Agile development Scrum and Kanban are two examples of product development methods in agile development [14]. At Angry Creative the combination of the two "Scrumban" is the active agile development method. Developers are split into teams. Each morning starts with a short scrum meeting within said team which is active for approximately ten minutes. Each developer mentions what they were working with since the previous scrum meeting and what they have planned for the day as well as if there are any known problems in the way of the planned work. Scrum is based on iterative development meaning the work is split into iterations, so called sprints. A sprint usually lasts for about a month during which a set of prioritized tasks is to be completed. At angry Creative however, the work flow is a bit different where the backlog of each developer is continuously updated with new tasks as opposed to the backlog being locked with a set of assignments for a month. This is because of many tasks being support tickets from customers which needs to be addressed relatively quickly. Because of this alteration Scrumban is a more suitable agile development method. Scrumban is especially suited for maintenance projects with frequent and unexpected tasks. Sprints with a certain set of tasks being time-limited are therefore not of use. Instead a retrospective occurs each week at Angry Creative where the developers talk about what has been going well and what needs to be improved. This agile development method leads to a workflow at Angry Creative which allows for minimum completion time for each task, while also ensuring that each developer constantly has tasks assigned.

25 14 Chapter 3. Method 3.2 Usability testing A usability test was conducted using participants working as product owners, due to the fact that the web application TimeVision is designed for administrative purposes, the usability testing method think aloud was used. Participants were encouraged to constantly make their thoughts known to the mediator of the test. Initially an introduction of the test was given where participants were informed about the purpose of the test. The purpose being to be able to measure the effectiveness of how fast information can be obtained using the web application TimeVision, and to be able to compare TimeVisions effectiveness with previously used systems providing similar information. Lastly, as a result of the test, a diagnosis of TimeVision was given to the developer where some lack of functionality and hidden bugs were uncovered. Furthermore the participants were given instructions of the procedure of the test and given examples of the type of questions they might be asked. For the first part of the test each participant was asked to answer questions using TimeVision. In the second part the participants were instead asked to answer those same questions using Jira and Harvest which were previously used by Angry Creative for finding information of statistics. The questions for the tests can be viewed in appendix A. The time for completing each question was recorded for the first part of the test. Participants were informed about the time tracking and the purpose of it in the interest of making them feel comfortable with the test. In the case of a participant already knowing the answer to a question the mediator would ask the participant to also use the system to find that same information. Participants were told that the testing was on the product and not the participants themselves. An attempt to make the test as unbiased as possible was made by wording each question in a way that would not defend the system. Before the test the participants were asked to view the mediator as just a mediator even though all people involved in the test knew that the mediator was also the developer of the application being tested. The questions asked in the test are directly linked to the questions that the product owners of Angry Creative wanted the web application TimeVision to be able to answer before production. The time tracking was discontinued for the second part of the test. The participants concluded that it would take more than an hour to find the answers to the questions using the old system. This due to none of the information being visualized or easily accessible anywhere leading to the need to search information in text files and manually add and subtract values to find the answers.

26 15 Chapter 4 Prototype The visualization application TimeVision was produced under the guidance of the problem definition mentioned in section 1.3.1, Scneidermans guidelines for usability [12] and lastly the usability testing (section 2.4). 4.1 Design TimeVision was designed with a user centered focus. This due to the main objective of the visualizations being turning data into knowledge for users. "Don t make me think" presented by Krug Steve [10] as mentioned in section 2.4 was the thought process followed throughout the design of the application, creating menu systems and interaction options accordingly. The application is design for long term users. Looking back at the problem definition in section 1.3.1, it is clear that the application was to be customized for Angry Creative and especially its administration department. This combined with the fact that the application TimeVision is to be used by a few trained users daily led to the decision to prioritize making the application clean and simple with as little instructions as possible. This will affect first time users negatively but at the same time benefit long term users of the application. An example of a design decision benefiting long term users is how most buttons in the application only contain one word which could lead to first time users being confused about what exactly the button does. 4.2 Final Prototype The final prototype of TimeVision as presented to Angry Creative. The structure, functionality and design choices of the application is explained Menu System Menus and sub-menus aid the user in navigating in the application and a visual hierarchy contributes to users understanding the structure. As a first step a side navigation bar was added to the left of the application. This is the main menu of the application leading to the three different views

27 16 Chapter 4. Prototype "TimeVision", "Timelogs" and "Tickets". The main view "TimeVision" having the main objective to visualize statistics. The second view "Timelogs" provides an option to log time on a specific task while also showing a list of timelogs connected to the user being logged in. The third view "Tickets" provides an option to create a new ticket while also showing a list of all tickets. As mentioned in section 1.3 one of the objectives of this thesis work was to include the functionality of an existing time management web application. The functionality that was added to the application was the "Timelogs" and "Tickets" views. As these were not implemented in this thesis not much will be said about them here. Instead see ««reference for more information. To increase structure and aid users in finding wanted information a second menu was added for the Timevision view. TimeVision was divided into the three sub-views "Developer Statistics", "Ticket Statistics" and "Daily Overview". The purpose being to divide visualizations involving developerfocused data and ticket-focused data. For example, if a user would like to obtain information in which involved developers is irrelevant then the user can conclude that the view "Ticket Statistics" should provide the wanted information. A third view "Daily Overview" was created where visualization only showing a daily overview was separated. The three views help give an understanding of the relation between customers, developers and tickets. The visualizations allow the administration department at Angry Creative to grasp the data and thus get an understanding of what is going on at the company and what has been going on through illustrating historical data. Information such as which developer has been assigned what ticket for which customer in what time period and if said ticket is marked as a billable task can be obtained in these views. FIGURE 4.1: The DeveloperStatistics view of TimeVision.

28 4.2. Final Prototype 17 FIGURE 4.2: The TicketStatistics view of TimeVision. FIGURE 4.3: The DailyOverview view of TimeVision Page content Each page consists of a settings panel and various visualization components. All unnecessary content and lines without a purpose was removed in an early stage of development. Positioning, spacing and style was instead used to group together visualization components with corresponding titles and buttons. To guide user interaction, the mouse cursor and the color of the component is changed when hovered over or clicked. The design is consistent throughout the application where each view follow the same color-scheme and a similar positioning of buttons, titles and other content. (section 2.4)

29 18 Chapter 4. Prototype Settings Panel The settings panel consists of a customer selection component and a timeperiod selection component. The selection of a customer and a time-period will alter all visualization components. FIGURE 4.4: The settings panel consists of a dropdown menu containing customers and a timeline on which a selection can be made. Customer and timespan-selections alter visualization components in the current view. The customer selection component is a dropdown menu with a searchfield followed by a list of the alternatives. The time-period selection component is in the form of a timeline where the selection is represented by a box which can be scaled and repositioned. These interactions are advertised through a on-hover change of the cursor. On hover of the sides a "scale" cursor is shown whereas a "movable" cursor is shown otherwise. A shape was added to each side of the box in order to guide user attention. A bright color was later added as well to guide user attention further since few participants of the usability test noticed this interaction option. FIGURE 4.5: The settings panel where the customer selection dropdown is clicked and the timespan-selection is rescaled and repositioned. Visualization Components Below the settings panel for each view there are several visualization components. The problem definition in section 1.3.1, states that the application should be able to give the product owner an overview of what each developer has been working on. A stacked bar chart was introduced for this reason, illustrating a sum of worked hours on various tickets for each developer. A stacked bar chart proved to be a suitable visualization component (see section 2.2.5). By selecting a specific customer or a specific time-period in the settings panel, the content of the stacked bar chart changes from data from all recorded time and all customers to data related to the selections made.

30 4.2. Final Prototype 19 FIGURE 4.6: Stacked bar chart displaying the total sum of hours worked on tickets for different developers. The chart also show the part of the total work that has been spent on billable and non-billable tickets. FIGURE 4.7: The stacked bar chart where the bars have been sorted by their total value. A tooltip is visible when a bar is hovered over showing its exact value. Pressing the "Sort Values" button shown in the figure above will sort the bars by their total value. Deselecting the button will instead sort the bars in alphabetical order of corresponding developer. This is good example of how the application was designed for long term users. First time users will not know that deselecting the button will instead sort alphabetically but will instead see this when deselecting the button. Less important instructions which will quickly be learned by anyway was in other words removed in the final prototype. FIGURE 4.8: The stacked bar chart where the "Percentage" button has been pressed, showing the percentage of each sum of which the work is billable versus non-billable. The fifth bar has been clicked showing a complete list of all ticket identification numbers of the bar. Pressing the "Percentage" button will transition each bar to an equal height and instead compare the ratio of the work that is billable versus non-billable.

31 20 Chapter 4. Prototype When a bar is pressed a complete list of all belonging ticket identification numbers are listed because this is usually what the developers at Angry Creative refer to when discussing various tacks. Another important assignment for the application TimeVision was to visualize how much time a developer has worked with an assignment and if that time is within the said estimated time. This was earlier stated in the problem definition in section For this, a visualization component with several dimensions was needed. Because of this need and the fact that human vision is good at assessing quantitative values from positioning (see section 2.2.5), a scatter plot was used. The scatter plot contain dots representing tickets. The estimated time for a ticket is put up against the actual time elapsed on that ticket. Each dot is color coded to the last contributing corresponding developer. Three diagonal lines show the area where the dots optimally should be. The outer lines symbolizes the fifteen percent deviation for which the time-estimations are allowed to deviate. Angry Creative have a special guideline that a ticket does not need to be time estimated if it is believed that it will take less than four hours to finish it. Because of this, many tickets lie on the y axis with no estimated time. A small box was therefore added in the lower left corner of the scatter plot to remind the user of this four hour special zone. FIGURE 4.9: Scatter plot displaying the progress of tickets The ability for developers to accurately estimate the time they think a certain task will take is very essential, but also very difficult. Therefore the comparison between estimated time and actual time of a ticket is important. The purpose of this scatter plot is to provide a visual pattern of how well time estimations have been doing. In order to draw conclusions one cannot look at individual cases, but rather look at the pattern, since all tickets are unique.

32 4.2. Final Prototype 21 For example if a user selects a certain customer in the settings panel and notices that as a result all dots are located in the top left of the chart, meaning the estimated time was significantly smaller then the actual time, one could suspect the problem might be linked to that specific customer. Maybe the difficulty of tasks from this customer is underestimated. Perhaps this customer has a tendency to make their assignments seem more simple than they are. By selecting a certain time-period or customer from the settings panel and/or selecting a developer from the legend of the chart the user can more easily identify what is causing a large deviation from the diagonal line. In other words what is causing the estimated time of a ticket to not conform with the actual time. FIGURE 4.10: Scatter plot where the "non-linear" button has been pressed, changing the axis to a non-linear scale in the form of a square root separating the dots for visibility. A tooltip is visible when a dot is hovered over containing more information about that ticket.

33 22 Chapter 4. Prototype FIGURE 4.11: Scatter plot where the "Percent" Button has been pressed, changing the y axis to percentage instead of actual values. Allowing for a better comparison of how close each dot is to its estimation. FIGURE 4.12: Scatter plot where a developer has been selected in the legend thus only displaying tickets related to him/her and where a dot has been clicked, toning down the opacity of other dots. According to the problem definition in section 1.3.1, the application should help give an overview of the relation between customers and tickets. As a first step a bar chart was used to visualize the amount of tickets linked

34 4.2. Final Prototype 23 to each customer. Once again a bar chart is a reasonable choice because of its simplicity and the fact that only one variable needs to be visualized (see section 2.2.5). FIGURE 4.13: Bar chart displaying the customers with the most tickets. FIGURE 4.14: Bar chart displaying the customers with the most tickets where a customer has been selected in the settings panel. A tooltip is visible when a bar is hovered over. A second bar chart was added with bars representing all tickets related to a selected customer. FIGURE 4.15: Bar chart displaying corresponding tickets for selected customer. A tooltip is visible when a ticket is hovered over, showing more information about the ticket. Another essential objective for the application was to visualize what each developer is working on, allowing for coworkers to save time by not having

35 24 Chapter 4. Prototype to ask each other (see section 1.3.1). A simle schedule-like bar chart was introduced with a timeline on the x axis and the developers listed on the y axis. Each bar representing the amount of time of a timelog. FIGURE 4.16: Bar chart displaying developers timelogs for the day. FIGURE 4.17: Bar chart displaying developers timelogs for the day where a customer has been selected. A tooltip is visible when a bar is hovered over. Interactions with the chart includes hovering over and clicking on a bar displaying information about the timelog such as which task it is connected to and for which customer. A customer can be selected to filter out and lower the opacity of timelogs linked to other customers. 4.3 Prototype Alpha Prototype Alpha was the first fully functional prototype presented to participants in the usability test. Many design changes being visible in the final

36 4.3. Prototype Alpha 25 prototype is because of feedback from participants and notes taken by the mediator of the tests. In prototype alpha user attention was first and foremost guided to the navigation bar,which at the time was positioned at the top, then a sidebar menu with the customer list and lastly the TimeVision menu. This made little sense considering the TimeVision menu should be higher than the customer list in the hierarchical order. The TimeVision menu was simply not being recognized enough during the tests. This due to the menus being stacked on top of each other and consisting of similar colors. The structure of the menu system in the final prototype instead guides user attention more towards the TimeVision menu. The solution involved positioning the navigation bar from the top to the left side. Repositioning the menu proved to be a good idea, positioning being an excellent tool for guiding a users attention (section 2.2.3). Another change that was made was the removal of a sorted list of top customers in the sidebar. The sorted list of top customers was initially added alongside a dropdown of customers with the same functionality in the interest of providing an alternative to users where the assumption that experienced users would prefer a list displaying the customers because of the fewer clicks required to select a customer compared to selecting a customer from the dropdown menu. Practically however, this was not the case and only the dropdown remained. The dropdown was also moved adjacent to the timeline because of their similar filtering functionality. Namely selections altering visualization components. Lastly titles and buttons were re-positioned to increase their association with belonging charts. The color-scheme was altered. The TimeVision Menu was given a new lighter color to make it stand out from the navigation menu. The buttons were given brighter colors and the visualization components more neutral gray color shades to guide user attention to the buttons which received little attention during tests.

37 26 Chapter 4. Prototype FIGURE 4.18: The "Developer Statistics" view of prototype Alpha. FIGURE 4.19: The "Ticket Statistics" view of prototype Alpha.

38 4.3. Prototype Alpha 27 FIGURE 4.20: The "Daily Overview" view of prototype Alpha which at the time was named "Development Overview". It was later renamed for clarity.

39

40 29 Chapter 5 Implementation Details In this chapter the work behind the result is discussed. The Data extraction, visualization tools and code structure are debated. 5.1 Data extraction The first step in the visualization process starts with raw data according to the visualization pipeline (see section 2.2.1). A basic web page was set up with CakePHP 3. Because the data was to be visualized a local database was created. By making a new database fetching data from Harvest And Jira this meant there now was no need to constantly fetch data directly from Jira and Harvest every time visualization were to be drawn. The data from Harvest and Jira was retrieved through corresponding API. Angry Creative provided admin accounts thus providing me with access to all necessary data. In order for the database to contain updated data the data retrieval from Jira and Harvest was constantly refreshed with a cron job. Which essentially just calls the data retrieval function for a defined timespan. Information about each ticket is retrieved from Jira as mentioned in the background (section 1.2), while users, customers, projects, tasks and entries are collected from harvest.

41 30 Chapter 5. Implementation Details FIGURE 5.1: Data from Harvest and Jira stored in the database. Because data was retrieved from two different systems a common key was needed to link the time logging statistics with the ticket statistics from Jira. 5.2 Visualization The visualization components were created in JavaScript. There are several JavaScript libraries made for developing visualizations. One of which is called Data-Driven Documents or D3.js. D3.js was chosen mainly because it allows for a wide variety of customization which was an important factor considering the visualizations were to be customized for visualizing specific data for Angry Creative. The main idea of D3.js is to create SVG items in a scalable vector graphics format which is supported by most web browsers. The SVG has a specified graphical representation. A data component is attached to each SVG object providing each element in the SVG with an index and a value. Items are therefore iterated through within each SVG. However the items of the SVG object can also be accessed by storing them in an array. Each item in the SVG can be modified by specifying attributes and events such as mouse over can be applied for a selected item. 5.3 Model-View-Controller architecture TimeVision was created using CakePHP 3 which follows a Model-View- Controller architectural code pattern (section 2.3). The application is divided into three major parts. The data, refereed to as Model. The view