Department of Science and Technology Institutionen för teknik och naturvetenskap
Linköping University Linköpings universitet
g n i p ö k r r o N 4 7 1 0 6 n e d e w S , g n i p ö k r r o N 4 7 1 0 6 -E S
LiU-ITN-TEK-A-16/008--SE
Investigation of
visualization of time and the
collection of data in a web
business
Louise Carlström
Malin Kylegård
LiU-ITN-TEK-A-16/008--SE
Investigation of
visualization of time and the
collection of data in a web
business
Examensarbete utfört i Medieteknik
vid Tekniska högskolan vid
Linköpings universitet
Louise Carlström
Malin Kylegård
Handledare Camilla Forsell
Examinator Jimmy Johansson
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
extra-ordinä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
http://www.ep.liu.se/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:
http://www.ep.liu.se/An investigation on how to improve time
management through a web application
and visualization of company data
Louise Carlström
Malin Kylegård
Department of Science and Technology
Linköpings University
This dissertation is submitted for the degree of
Master of Science in Engineering
Media Technology and Engineering
Acknowledgements
We would like to thank Angry Creative AB for giving us the opportunity to do our master thesis at their company. Especially Jimmy Rosén och Samuel Sapire who have been our supervisors and instructors at Angry Creative AB who helped and guided us throughout the project, and our supervisor Mikael Olsson for technical support, guidance and will to help . A big thanks to our supervisor Camilla Forsell and to our examiner Jimmy Johansson for support during this master thesis process.
Abstract
This master thesis has been carried out at Angry Creative AB and the department of science and technology at Linköpings University. Angry Creative AB had a wish to improve their time management and their efficiency, and to make the work flow easier accessible to the employees and the company management. The time management did not work optimally and there was too much room for errors. The aim for this project was thus to present a web application to ease the time reporting process and to create an overview of company data. The overview is a concept represented with information visualization. A usability test was conducted in order to ascertain whether the aim was reached and to gain insight in how the application could be further improved in the future.
Table of contents
1 Introduction 1 1.1 Background . . . 1 1.2 Problem description . . . 2 1.3 Purpose . . . 3 1.3.1 Problem definition . . . 3 1.4 Delimitation . . . 4 2 Theory 5 2.1 Time management . . . 52.1.1 Other time management systems . . . 5
2.2 Agile development . . . 6 2.3 User . . . 7 2.4 Usablity . . . 7 2.5 Usability testing . . . 7 2.6 Interaction design . . . 8 2.7 Design . . . 9 2.8 Information visualization . . . 10
2.8.1 The visualization steps . . . 11
2.8.2 Visualization techniques . . . 11
2.8.3 Interaction with information visualization . . . 13
2.9 Data . . . 13
3 Development 15 3.1 Other companies methods . . . 15
3.2 Design decisions . . . 16
3.3 Prototype and design . . . 17
3.4 Data retrieval . . . 17
viii Table of contents
3.6 Usability test . . . 19
3.7 Technologies . . . 20
4 Results 23 4.0.1 The usability test . . . 25
5 Discussion 27 5.1 Development . . . 27 5.2 Result . . . 28 5.2.1 Time management . . . 28 5.2.2 Summary . . . 29 5.2.3 Visualization . . . 29 5.2.4 Usability test . . . 30
5.3 Work in a wider context . . . 30
6 Conclusion 31
7 Future work 33
References 35
Appendix A Prototype 37
Appendix B Usability questions 43
Chapter 1
Introduction
This master thesis is conducted at Media Technology, the Department of Science and Tech-nology at Linköpings University. It is carried out at the company Angry creative AB. An introduction to the company and their conditions are presented in this chapter. A problem description and purpose is described.
1.1
Background
Angry Creative AB is a web agency in Norrköping oriented at WordPress solutions. The company was founded in 2011 and have since then expanded their business and the number of employees. As a part of the daily work the developers on the company have to estimate work assignments, projects or tickets, assigned to them. However all employees in the corporation have experienced problems with time reporting since they are using two different systems for it: Jira for ticket handling and Harvest for time reporting. Using two systems creates confusion and deficient workflow.
Angry Creative has several ongoing projects with different kinds of customers, some of them are subscribers and others just want to buy a solution to a particular problem. The process to get a ticket, which belongs to a project, assigned to the developers goes through the ticket handling system Jira as seen in figure 1.1. Jira is a software web application [12] for managing projects. The system contains projects which is a collection of tickets. Tickets in Jira describes the task performed in a project.
The customer sends an email that it is received by Google Apps which translates the mail to a ticket. Jira takes the ticket from Google Apps and when the ticket has been placed in Jira a message goes out to everybody in the communication platform Slack. The Product Owner then prioritize and assign the ticket to a suitable developer who time estimates the ticket. The estimated time will be informed to the customer by mail and the work begins. Jira sends an
2 Introduction
Fig. 1.1 The process of how tickets are assigned to the developers within the company by the ticket handling system Jira.
email to the customer when the ticket is done, in other words closed, and he/she can accept it as done by not doing anything or open up the ticket again by answering the email.
Harvest is the time tracking system where time reporting and the invoices are handled. The system is a web based application used daily to report the time worked during the day. The time-based reporting function is divided in two functionalities, one is to start a timer on an ongoing task and the other is to fill in time on a worked task after it is completed. This provides options for the employees to choose the most suitable way to time report. The time can be reported on projects in Harvest directly, or on tickets from Jira by copying the ticket code from Jira and paste it in the description area in Harvest.
1.2
Problem description
The company management is not satisfied with the existing way of seeing what each employee is working on during the day. They often have to seek out employees to ask what they are working on at the moment since many do not log their time at all and many log it incorrectly. This is since the process of logging time is unintuitive and makes the employees uncertain how to proceed. This process take a lot of time and effort. It is a time consuming approach
1.3 Purpose 3 and the company management has expressed a wish for a more rapid and agile one to decrease the errors and to spend their time more wisely.
Harvest does not handle tickets, only projects and time. Jira is an independent system that handles only tickets. Since Jira and Harvest does not communicate, the time spent on a specific ticket in a certain project can not be autogenerated. This means that the ticket number has to be filled in by hand in the description area to complement the invoice when filling in the time in Harvest. The ticket number also has to be in the right format, which it is not when copying it from Jira. This enables errors in a way which needs to be avoided. Since Harvest does not encourage to report the time, the reporting is sometimes excluded or improperly filled in. As mentioned in section 1.1 the estimated time of a ticket is informed to the customer. Sometimes the estimated time and the actual time spent on the ticket does not match. One reason is that the employees can not see in Harvest how much time that is left on the ticket, nor if the time limit has been exceeded. It is possible to log into Jira and check the estimated time, this is however impractical.
The most recent service the company has begun using is Trello. Trello is a web appli-cation which facilitates the workflow when working with projects and subtasks in an agile development (section 2.2). However, this web application is not connected to either Jira or Harvest and will therefore not be investigated further in this project.
There is not an intuitive way to work with so many different management applications since it leads to confusion and impairs the workflow. An overview of the company’s data is desired since Harvest and Jira do not offer much in that area. The overview of the data is thus important for the business and can contribute to the business growth. Furthermore it can enhance the workflow and decision making within the company.
1.3
Purpose
The purpose of this study is to investigate how to improve an overview of company data, how to collect that data and to create a foundation of a future time reporting system for Angry Creative. A web application consisting of two main parts will therefore be produced. The first part is time reporting and the second is visualization of data. Usability testing will be performed in order to evaluate if the aims have been reached.
1.3.1
Problem definition
1. How can a new system for time management look like to replace one or two of the existing systems to have all data in one place?
4 Introduction 2. Can the data from the two systems be presented in a way that makes it easier to see
how time has been distributed?
3. Is there a better way than the existing one to have an overview of what the developers on the team are currently working on?
4. How can data be visualized to give relevant information to the product owner or the developers?
1.4
Delimitation
The target group is the employees of Angry Creative. The application will only be developed for the web since it is a web agency the system is developed for. This means that no consideration of tablets or smartphones will be taken into account.
The application will be developed against the web browser Google Chrome, a choice due to the time constrains. This means that some functionality might not work in other web browsers.
Chapter 2
Theory
Understanding how companies in the industry deals with time management creates an overview of what is missing in the industry today. By knowledge about theory and by conducting evaluations an approach to satisfy a need within the industry can be achieved. The following chapter will be looking further into aspects important to know before developing the new web application.
2.1
Time management
Having control over what can be achieved in a workday can have positive effects on employees health and job satisfaction [5]. Having time management in a company reduces the amount of stress at work since the employees take part in planning their own workday. Macan [20] did a study to test a process model to see if time management behavior decreases the amount of stress for the employees. The reason is that time management has not yet been studied thoroughly but the relation between stress, job satisfaction and time are related. Setting goals and making priorities on tasks to perform during the day makes the employee feel in control [20] of their own time and it has beneficial effects on the performance at work and the overall health.
2.1.1
Other time management systems
As described in section 1.1 the company use Harvest as time managing software. The system is good for its purpose, logging time and making invoices, but does not match the company’s criteria of efficiency. Comparing Harvest to other time reporting systems, such as ClickTime, it looks like there is a pattern where you choose client and project for the time report. This is
6 Theory not enough for Angry Creative since they want to add tickets, which are subtasks within the projects.
TSheets is another time management system where task and customer is the information to fill in. The web application focus on design and visualization. The web application contains visualizations in form of pie charts. Pie charts can be a good representation [7] when percentage data of one attribute is shown. However Few [7] discusses the difficulty when comparing data in more than two pie charts which are presented side by side of each other. There are not many different kinds of visualization to chose between. A representation they do have which include time and developers is a time slider or a horizontal bar chart. The latter is showing what the employees work with at the moment and have been working with during the day.
Toggl is commonly used amongst small companies since it is a free time tracking software for teams of five or less. The application is available on the web and as a smartphone app.
All the three systems mentioned are time management systems with no ticket handling which means that they do not fulfill the company´s needs.
2.2
Agile development
Agile development is a collective name for several product development methods such as Scrum, XP and others [4]. The methods all follow the same values and principles. In agile development one goal is to have a useful product as soon as possible. The work is therefore carried out incrementally and iteratively. The iteration is called a sprint and the development is closely conducted with the users of the product. Testing is important in aglie development since the feedback from the users prioritize the work for the next sprint. Agile methods are often used since the developers and the management often feels more in control. This is a result from the short iterations and continuously given feedback from the users. The values from the agile manifesto [3] which all agile methods follow are:
• Individuals and interaction, over processes and tools. • Working software, over comprehensive documentation. • Customer collaboration, over contract negotiation. • Responding to change, over following a plan.
It is expected from the developers to work closely with the user during the product development according to the agile manifesto. Since goals can change during the development
2.3 User 7 process it is inefficient to spend a lot of time on documenting when the requirements might change during the next iteration. Working software is therefore considered more important than extensive documentation [4].
2.3
User
It is important to know who the users are [10] because knowing that creates the possibility to decide what interface the user needs to achieve a task and reach the goal. When you know who your user is it is important to know what they do in their work and what kind of experiences they have [13]. Then an usable system can be developed for the specific users. Another aspect to have in mind when developing a product or a system is to know the users goals [6]. The time it takes to reach the goal will decide if the product is easy to use or learn.
2.4
Usablity
Löwgren [13] is stating that the REAL approach which stands for relevance, efficiency, attitude and learnability is resulting in usability. To see if the usability is satisfying in a system, a usability test or usability evaluation is conducted. These tests are usually done during the development of a system in the agile process described in section 2.2 to have opportunities to improve the system in the next iteration.
Perception and interpretation, or seeing and understanding, are two important factors for representing data. Spence [16] is explaining that the importance lay within “the type of data we want to represent, the complexity of that data and the way in which a user interprets the encoded data”.
2.5
Usability testing
All products that are designed to be read or used in some matter should be developed with usability in mind [6]. All types of products are relevant to perform a usability test on and the achievement of usability testing is to increase the usability of the product. Since the test is conducted on potential users the product design and user interface will be evaluated and feedback of the product is given for future improvement.
There are many different usability test methods both qualitative and quantitative. Thinking Aloud is one method which is a qualitative method where the participant is asked to talk aloud while performing different tasks [11]. They are encouraged to talk about what they are
8 Theory thinking, decisions they make and about questions that arise. The test is either recorded or written down. The benefits of Thinking Aloud are that it is possible to use with a mock-up, a prototype or a finished system. The method focuses on getting the real why behind users decision making. It is a method that is fast to learn the basics of well enough in order to start conducting tests at an early stage. The disadvantages are that it is an unnatural method, few humans are used to saying everything that they think as soon as they think it. It is a risk that the participants reflect on what they are about to say before saying it so that the information gets filtered by for example what they think the facilitator wants to hear. It is also a risk that the information becomes biased when the facilitator has to interrupt with clarifying questions. If that happens it is important to identify which user tests are biased and discard those cases. Lewis et al [11] mentions that there are risks that the participant misunderstand the questions being asked, or that they may be influenced by other external factors that can affect the result.
When executing a Thinking Aloud study it is important to make sure the participants understand that it is the system that is being studied and not the participants themselves. They need to know that they can choose to stop the test whenever they want without having to give a reason. It is also important to be aware of how different participants might affect the result when choosing participants for the study. Co-workers for example might feel that they have to participate in the study or that they need to answer in a specific way so as not to hurt the test manager’s feelings.
2.6
Interaction design
The term interaction design was coined in the 1990’s by Bill Moggridge and is about behaviour of products and systems [14]. It is the art of facilitating interactions between humans through products and services. It is a field with interdisciplinary roots in industrial design, human factors and human and computer interaction. There are no hard rules that can be proven scientifically and that are always true. Interaction design “solves specific problems under a particular set of circumstances”.
When designing for interaction the aspects of how the interaction is made, how the user knows what to do and feedback is important factors [14]. Relevant attributes to make which are natural to interpret is size, color, hierarchy etc. These factors gives the user a clue of what can be accomplished when interaction such as pressing the item.
2.7 Design 9
2.7
Design
One design approach is the user-centered design which means that the system should be designed after the users needs and goals [1]. The user-centered design development life cycle can be seen in figure 2.1 Designers should work to discover the users needs and goals and then design for them. When the user requirements are defined an iterative design phase begins where the concept design, physical design and usability test is made in iterations until the product is released on the market.
Fig. 2.1 The user-centered web development life cycle illustrates the stages to carry through when developing for the web [14].
Depending on how many choices a user have, when using a system, the different amount of time it takes for a user to make a decision according to Hicks law [14]. Hick means that it would be harder and more time consuming to have several menus, e.g. drop downs, rather than one menu with a lot of options in one. On the other hand Lazar [10] notes that grouping can be good depending on how many items a menu have. This means that making several menus in hierarchical order can be an advantage but it will demand more action, e.g. more clicks, from the user. Spence [16] mentions a test conducted by Snowberry et al [15] on several people to see what contributes to more errors. The more menus with less choices leads to more correct outcome. However there were least number of errors when three menus
10 Theory were represented to the test persons. Another aspect to hold accountable for errors can be the lack of help fields. It is proven that when clicking an information button or hover over something and a help field is shown it will reduce the amount of errors substantially.
According to Lazar [10] it can be preferred to consult with the client about how the navigation and structure of the website should look like. Other websites design can be a guideline when designing the new website. This is in order to minimize the risk of misunderstanding.
2.8
Information visualization
To visualize is a cognitive human activity of creating a mental picture of information which is easier to comprehend than a collection of numbers. This makes it easier for humans to get insight into large data sets [17]. Visualizations can be enhanced by computers even though a computer is not vital for visualizations. Humans have used visualization for hundreds of years and as Spence mentions, it can be everything from creating a mental model of gathered information when house searching to drawing a landscape map.
Ware [20] writes about the errors and artifacts that can arise from visualization. This occurs when data is not collected correctly, creating outliers. They can either be included in the data or be filtered out. If included, the outliers in the visualization can shed light on problems in the collecting of data. As the name suggests, outliers are usually evident, obvious in an appropriate visualization method and are easy to notice.
Information visualization is the study of visual representations of data. The data is often abstract, high-dimensional and complex structured [9]. Al-Kassar et al described information visualization as an help to understand the reality as well as build reality around us.
When it comes to information visualization it often works with time-oriented data. Time-oriented data are often large, both when it comes to the number of data items and number of attributes. This results in challenges when visualizing time-oriented data as Aigner et al. talks about in [1]. They mention that it is important to combine analytical and visual methods in order to make sense of time-oriented data. Linear time data is often represented on a simple time axis with quantitative data. Cyclic data is data cycles in forms of e.g. a month or a year. In the latter data visualization method periodic patterns can be distinguished in terms of events happening on a specific weekday during that month.
2.8 Information visualization 11
2.8.1
The visualization steps
Al-Kassab et al [2] indicates on the importance of the communication when talking about information visualization. The representation of the data should be understandable for the observer. For the user, who observes a visualisation, to understand what is being seen the user should be able to transform the data and adjust the visual result.
Ware [20] is mentioning that there are four steps in the visualization process as seen in figure 2.2. The first step is to collect and store the data to be visualized. Then the data goes through a preprocessing step where rules are set and the data becomes filtered. The third step in the process is where the data should be mapped into a visual representation. This is the visualization which the user can manipulate and look at. The last step in the process is the human observer of the system, the so called perceiver who analyses what is being seen.
Fig. 2.2 This image illustrates the process steps in visualization according to Ware [20].
2.8.2
Visualization techniques
There are a lot of different techniques for visualization and when to use which one can be difficult to know. Depending on the data and the technique used to visualize it the outcome can be interpreted variously. Spence [17] describes some of the information visualization techniques which are commonly used today.
Scatter plots are widely used and give a good insight into bivariate data. Kosara et al [9] states however that scatter plots are limited to two dimensions and are therefore not to prefer.
12 Theory Spence [17] mentions it is possible to extend scatter plots to more than two dimensions, for example to fill the dots in the scatter plot in different colors or have a timeline to set interval for time to a third or even a fourth dimension. Spence also [16] talks about the good representation of time-varying data in a scatter plot. These are sometimes called time series plot and present an attribute over time.
Bar charts or bar graphs are used in a lot of contexts and can represent data in an understandable and intuitive way [8]. There are several different kinds of bar charts: stacked, horizontal and grouped bar charts for example [8]. A grouped bar chart can be aligned or unaligned [19]. The different kind of bar charts can be combined to e.g. a stacked horizontal bar charts. They can be good for displaying for example time or percentage on the x-axis, and the comparable objects on the y-axis. An advantage with stacked bar charts is that in addition to the two attributes they can be mapped to the two axis, it can also represent a ratio between other attributes since every bar in the chart is also divided [7]. In figure 2.3 illustrated below by Stephen Few[7] sales data where the amount of sales is on the y-axis and the months is on the x-axis is shown. The bars are divided in four different areas to represent where the sales where conducted.
Fig. 2.3 Figure showing the stacked bar chart for the monthly sales. [7]
Few also describes difficulties when comparing the more precise numbers between the sales in the areas of the different months and says that to do that another visualization technique may be preferable.
The simple stacked bar chart represents the data series stacked on each other instead of side-by-side [8]. Horizontal bar charts are a way to represent quantitative data. Typical for this representation is a quantitative scale on the x-axis and a categorical scale of the y-axis. Grouped bar graphs is when at least two data series are presented side by side which
2.9 Data 13 simplifies comparison. Nevertheless, Harris explains that confusion can occur when the plotted data series excess three or four bars.
2.8.3
Interaction with information visualization
Interacting with the visualization makes the user understand more of what is seen and can interpret the information at a greater level [9]. Interaction is of key importance according to Aigner et al [1] when it comes to combining visual and analytical methods. By providing interaction tools the visualization can better meet the users needs.
When a user interacts with the visualization, some kind of feedback should be given according to Lazar [9]. Otherwise the user could experience change blindness which means that he/she does not see what happened after the action was performed. Same goes with inattentional blindness that is the phenomena where the observer focus the attention on something and completely miss an event [16].
There are different ways to interact with data, some are reordering, filtering and brushing [17]. Which method to use depends on what information to look closer at. Brushing is suitable for selecting range, and can for instance be a zoom action. When reordering data it is important to have the human’s perception in mind because good graphical rearrangement makes it easier to distinguish patterns and affinity between data. It is important when designing for example filtering functions to use caution when excluding data so that only irrelevant data is removed.
2.9
Data
The data types of the consisting data is crucial when deciding visualization method [20]. The data looked upon is called entities and can for example be a person or a group of people depending on what is searched. Ware [20] is writing about the types of numbers the data can consist of which is inspired from Stevens [18] and the ones that are commonly used are category data, integer data and real-number data. The category data (called nominal data by Steven) is the data labeling e.g. a continent which can be classified in its countries. The integer data (Steven’s ordinal data) is data used for ordering things and Steven takes up the example of hardness on minerals as an ordinal data. The last one, the real-number data, is data describing interval or ratio. The interval can represent something like temperature scales and the ratio is the amount of a property used when counting e.g. votes.
Chapter 3
Development
After the theory was collected the implementation begun. This chapter includes all the work and implementation throughout the process.
3.1
Other companies methods
In order to find out how the industry are tracking time today, 10 companies with similar specializations in the same industry were selected and were contacted by email and asked to answer a set of questions, see appendix C.
Three companies answered the email and shared information about how they report time and how they have an overview of their data. Both companies work with software development in web or smartphone apps and are located in Stockholm.
The first company worked with in-house projects and offered consulting services. When it came to time tracking, they used a software called Toggl to report the time spent on different projects. The project can be subdivided into subtasks e.g. one employee logs his/hers time on front-end and one of the colleagues logs time on back-end on the same project. To get an overview of the data, Toggl has an interface where visualizations of the data can be shown in different ways. The system has several different graphs where the data of the last week or month is easy to survey. The overview can show a representation of projects or the subtask within a project. If a client wants more detailed information about the development tasks such as new development or bug fixes for a specific project, a new document is created with more detailed and desired information.
The second company that answered also used toggl, however to overview the data they sometimes used excel to get the graph or visualization needed for the purpose. This company worked with web development using WordPress and offered digital marketing solutions.
16 Development The third company conducts consulting and development of IT. The Company’s head office is in Linköping, with branch offices in Norrköping and Motala. This company´s employees report all their worked time. The time is reported with a time code such as project time or internal meetings etc and connect the time with a chosen project or customer. The system beeing used here is a ticket handling system developed by the company itself. All the data is saved in the ticket handling systems database. The data is searchable in real time and the search can be performed in different levels and presented desirably. This company uses a web based GUI for both search and presentation of the data. In this GUI there are several templates for ordinary representation of data in chosen time interval. The data is also presented using Excel or other statistical softwares and inserted in PowerPoint presentations.
3.2
Design decisions
Angry Creative AB wanted the design of the application to have similarities with Harvest, in both design and functionality. This was because the company liked how it looked and it was decided it was good to have a unified look between all the systems the company uses in order to facilitate the learning curve.
The company had its own graphical profile as a base to chose the colors from. The main colors were red and black as seen in figure 3.1. It was preferred to have these colors implemented in the upcoming application. The colors are therefore intended to be used in small sections of the application e.g. when the mouse hovers over an object or a menu item.
Fig. 3.1 Figure illustrating the colors taken from Angry Creatives graphical profile. (Note that the color coding is wrong for the deep red in the middle. Correct hex: CC3636)
3.3 Prototype and design 17
3.3
Prototype and design
Before the implementation and development of the application began a prototype was produced. As mentioned earlier in section 3.2 the design was desired to be similar to Harvests design. The main views in the prototype is Timelogs, Tickets, Reports and Statistics.
The first view “Timelogs” in the prototype displays a list of today’s logged time and can be seen in figure A.5 in Appendix A. A weekmenu is placed above the list to navigate between the days of the selected week. In order to select week, two buttons were positioned above and to the left of the Timelog-list. An add button for adding a timelog were placed in the upper left corner above the list. This would trigger a popup where the input of information is changed from the previous system.
The second view is “Tickets” which contains a list where the assigned tickets will be. Several filter functions and a search function will make it easy to see desired tickets. The filters are sort functions or dropdowns where for example a customer can be selected and the tickets list will display all the tickets belonging to that customer. The tickets are editable, but only a few attributes is editable for the developers such as estimated time, status etc. An add button is placed in the upper left corner, as in the view of timelogs, for adding tickets. Here we also have a start button to begin to log time on a specific ticket.
Statistics were the view where the visualizations happens. This view had not been decided since one of the issues to this study was to conclude the best way to visualize the data and was thus developed iteratively during the process.
“Report view” is the view where the product owner has an overview of the team. It will include what the developers are doing at the moment and have been doing during the day. A representation in this view were a time slider or a horizontal bars chart such as TSheets used. But in this application the bar charts consisted of more than one task, meaning it would look like a subdivided horizontal bar chart with the timeline on the x-axis.
3.4
Data retrieval
As [20] declares in section 2.8.1, the first step in the visualization process is the need to retrieve and store data. The first thing that had to be done was a simple design for the application. A web page was scaffolded with CakePHP 3. A database was created and relationships between all the models were done. Setting up the database with dummy data was done to simplify the designing phase of the process. Since the data was to be visualized it was an advantage to make a database of our own to save the data rather than fetching it every time when the visualizations were to be drawn.
18 Development
Fig. 3.2 Illustration of where different data stored in the database is retrieved.
The next step was to investigate how to get data from Harvest. When this was done an authentication against Harvest was executed and data for the current user was displayed on the page. It was also necessary to get all the data from Jira, although there was no need to authenticate against Jira.
The data received from Harvest were clients, projects, tasks,users and the daily time entries. The tickets were received from Jira. The data retrieval from Harvest was slow at first and took 4,5 minutes to get all the entries for one day. This was caused from the function which looped through every active project and looked if any entries had been done for that particular project this day. The active projects where too many though, 289 projects to be exact at that moment and this lead to a lot of unnecessary checks. An optimization was done to only go through the projects updated the day of the data wanted to be received. A decision was made to save data into our own database. As fortunately a database was already constructed and needed only minor changes to work with the data from Harvest and Jira.
Saving data to the database would increase the speed, however it will not refresh the data. The data can be fetched continuously when looking at today or as far as one week back. But when the data from the time entries is within a range greater than a week the page began to get really slow.
A cron job which is a script that execute wanted events was made. The wanted event was to refresh the data in the database as often as possible. The cron job called the function every five minute to retrieve fresh data.
The tickets were downloaded to the database from Jira. The ticket had all information wanted except the actual worked time for that ticket which was wanted to compare the
3.5 Visualization 19 estimated time and the actual time. The actual worked time on each ticket had to be calculated from Harvest and implemented in the ticket in the database.
Connecting the data had to be done since there are two different systems ass seen in figure 3.2. The one and only data that connects the systems were a key from Jira which is the projects code and key for each issue. In Harvest you have to manually fill in the key into the notes for the timelog with a format as [AV-0011]. The information from Harvest therefore needed to be filled in correctly and in right format for the visualization to work.
3.5
Visualization
As for the second step in the visualization process, seen in section 2.8.1, the data needs to be filtered resulting in the desired visualization [20]. A scatter plot was constructed to contain the estimated and actual time on the y-axis and x-axis. The data that had that information were the tickets which a developer had logged on. A dropdown for selecting a specific developer was added.
The other visualization made, under the Reports view, had data representing a days logged time for all the developers. As in section 2.8.3 the importance of interaction techniques was considered and implemented on both visualizations. It is possible to hover over a timespan or a dot to get more information about it. It is also possible to zoom in the graphs.
3.6
Usability test
A usability test with the method Thinking Aloud was conducted to evaluate the application. The participants were six of the employees at Angry Creative. The test was performed with the participants one at the time and all tests took between 15-25 minutes. One of the project’s team members acted as test manager and the other as observer who took notes of the participants thoughts and actions.
The usability tests started with an introduction about the test, how it was going to be performed. It was explained to the participants that it is the system that is being evaluated and not the participants themselves. The questions can be seen in appendix B, given in Swedish. It was also explained that they could chose to terminate the test at any time without giving a reason. The participants were informed that the test was to be performed with the Thinking Aloud method, meaning that they should speak as much as possible during the test. The participants were encouraged to speak their questions aloud and told that the test manager would not be able to answer most of them during the test in order not to influence the participant but that a discussion could be held afterwards. After every task the participant
20 Development filled out a question of how difficult the task had been perceived by them, on a scale from 1-4 where 1 was easy and 4 was difficult.
The participants then got ten tasks to perform while speaking their thoughts and one final question where opinions and a discussion where held. The tasks to perform were amongst other to report time on a ticket, look at the data overview and interpret the visualization content. All participants spoke their thoughts aloud, only a few needed encouragement in the form of “continue talking” or “what are you thinking?”. All participants performed the tasks in the same order. The tests were recorded by writing down what the participants said and after the tests were concluded the recordings were all summarized.
3.7
Technologies
This section covers the technologies used in the project. Vagrant and VirtualBox VM
Before starting the development all the softwares concerning the implementation was decided. The company was currently using Vagrant as their development environment, leading to the decision to use the same. When using Vagrant it is needed to have a cross-platform virtualization software which is a software used to run all the different operating systems on your computer at the same time. It can also run several virtual machines with different operating systems. The most common is VirtualBox VM which was chosen as it is open source and a lot of documentation is available. It was also recommended by Angry Creative.
Bitbucket
As management and collaborative platform, bitBucket was used because Angry Cre-ative uses it for their repositories.
CakePHP 3.0
As it came to language it was a request to develop the application in PHP so that in the future the company could further develop and extend the application. The framework most suited was CakePHP 3.0. It is a rapid framework for PHP 5.4 and have a flexible database access layer.
Git and Git-flow
3.7 Technologies 21 JavaScript and the D3 library
JavaScript was used for front-end development and the JavaScript library d3 was used to create the visualizations.
Chapter 4
Results
The result of this thesis project was a web application for time management. The application’s concept was a new foundation for having data in the same place and more easily have an overview of company data.
The application consisted of, as mention in section 3.4, the four views Timelogs, Tickets, Reports and Statistics. In the Timelog view an employee could log their time and see the logged time in a list. The Tickets view had a list of all the tickets. In both these views a progress bar could be seen for the ticket’s progress. The result of both views can be seen in figure 4.1 which shows the Ticket view and figure 4.2 shows the Timelogs view.
Fig. 4.1 The figure displays the Tickets view where all tickets are listed. Every ticket has a progress bar, assignee and actions available to them ("start", "edit" and "delete").
24 Results
Fig. 4.2 The figure displays the Timelogs view where all timelogs of the signed in developer during that day are listed. Every timelog has a progress bar showing the current status of the ticket it belongs to, total hours spent on the timelog and the actions available to it ("stop" if the timelog is currently active, "edit" and "delete").
In the Reports view an overview of what the developers are working on could be seen. The overview shows a timeline in figure 4.3 on the x-axis and a categorial y-axis with the employees.
Fig. 4.3 This figure shows an overview of daily entries of each developer. The view is interactive and can be scrolled and zoomed in. When clicking on an entry more information is shown below.
This representation shows what the developers are currently logging time on and have logged time on during the day. The visualization can be interacted with by zooming in or out. The bars can be clicked on and more information about that particular timelog will show below the graph.
25 In the view Statistics a scatter plot as seen in figure 4.4 was created which shows data for the tickets.The y-axis represent the estimated time on a ticket and the x-axis represent the actual time worked on that ticket.
Fig. 4.4 Figure illustrating a scatter plot presenting the estimated time on the x axis vs the actual time worked on different tickets on the y axis.
The scatter plot could also be interacted with. When clicking on a dot, more information about the ticket will come up right next to it. Zooming was done as a brushing technique and did only zoom on the x-axis as seen in figure 4.5.
4.0.1
The usability test
One thing that arose during the usability test was that it was unclear in the view for Timelogs what week and day it was. It was not obvious that the dates to the right of the buttons are of one week, nor was it clear that the button with arrows changed week. Since the different views in the application look similar, especially the Timelogs and the Tickets view some of the participants were confused of what they saw. When asked to look at a tickets progress the majority became confused whether the progress seen in the tickets view represented the whole amount of time worked on the ticket or if it was the progress on that ticket during one logged time report.
26 Results
Fig. 4.5 Figure illustrating how zooming on the x axis works in the scatter plot. A handful other flaws were also noticed during the tests that were already known, the majority of the participants understood that this is a beta system and agreed that these flaws would need to be fixed before the system could be used on an everyday basis.
The last question was an open one, made for discussion and to catch the thoughts missed when participants spoke their thoughts aloud and their general opinion of the system. It was whether they thought the systems concept would be usable. Would they prefer this systems concept in front of their two systems today, Jira and Harvest? The study showed that all of the participants favour this new system and its concept. One of the participants thought this system was impossible to use the way it is now and and had a hard time seeing the possibilities in the system at the moment. However the person declared that it could be used in the future when more work had been done.
Interaction with the visualization differed between the participants. Some understood immediately that this was possible while others did not understand how to interact.
The difficulty factor from the questions the participants filled out after each task was on average 1.9 on the scale of 1-4, from easy to difficult.
Chapter 5
Discussion
In this chapter the implementation and result of the project are discussed.
5.1
Development
The user-centered web development life cycle presented by Saffer [14] was considered during the development of the application. Having guidelines and steps to follow when developing a website has been useful. The iterative process of the life cycle was the main focus for this thesis since the application is not yet finished.
A lot of time was spent on retrieving data and in hindsight the time could have been spent more wisely by prioritizing more, earlier in the process. Perhaps by only using dummy data instead of real data from Harvest and Jira we would have had more time to spend on developing the visualization tools. We wanted for example to create a grouped bar chart of the estimated and actual worked time on every customer with brushing between the scatter plot and the bar graph. When one item, dot in the scatter plot or bar in the bar chart, was chosen all the corresponding dots or bars would be highlighted. This would have given Angry Creative a possibility to investigate a possible connection between time estimation, different customers and different developers. These visualization implementations had to be discarded due to lack of time.
In the usability testing one of the participants had a different perspective of what the system should be in the future and thus answered the usability test from that point of view. This resulted in answers that differed a lot from the other participant’s. This is one of the drawbacks of the Thinking Aloud method. Despite this we chose to include those results and to discuss it further here. Although it does give an opinion of the system it is likely that the participant would have answered completely different another day, so how much can we really rely on the results? Should changes and future work be based on those results? This
28 Discussion and how likely it is that more users would agree with this participant is something that would need discussing in more detail if we were to continue to develop the system in the future.
A challenge, when implementing the data retrieval function, was when connecting the data from Harvest and Jira. Since they are two completely different systems with no connection, key, we had to decide what data should connect the two. As the decision was to look closely on tickets and it’s estimated and actual worked time the jira key for tickets were chosen as common identifier. This key or code is unique for all the tickets in jira. When the time is reported on a ticket the key or code is written in Harvest description area and this is the information we picked out from Harvest to connect the time logged on tickets. The implementation where this is compared can most certain be improved. The comparison method does not take into account if the description area is incorrectly filled in but that log is excluded.
Information such as customer, project and task can be assigned to a ticket only if an entry has been logged on that particular ticket. The information is picked from the timelog in Harvest if it contains the code or key of the Jira ticket. This leads to a lot of tickets not having information about who the customer is or to which project it belongs.
The design ended up slightly overshadowed because of the time constraints. The graphic design from Angry Created was not implemented. Instead of having their red colors in the Reports view it was decided that two blue colors should be used instead since red is strongly connected to warning and danger. In the scatter plot we choose an existing range of colors that is provided in the d3 library. The colors are sufficiently distinctive to easily distinguish the different developers and thus adds another dimension to the scatter plot. Spence [17] mentions in section 2.7.2 that a scatter plot can be extended to a fourth dimension, which is added here by having the radius of the dots represent the ticket progress.
5.2
Result
This section presents a discussion of the result and which aspects that could have affected the outcome.
5.2.1
Time management
A lot of the companies did not answer our email about their time management, or did not want to share the information. This means that the comparison could only be done with the little information given and does not give a bigger overall picture of how it actually works when employees in data business log their worked time.
5.2 Result 29
5.2.2
Summary
All in all we consider this study and the application a success, this concept is better than the old, and since many of the participants have noticed new things about their own logged time we think that our system would help future users to log time better. Since they would never have to manually enter keys to connect the time entry to the tickets it would minimize a lot of the current problems and errors.
5.2.3
Visualization
The visualizations fulfill their purpose, even if they are not perfect today it is an indication that it is a preferable way to show statistics. If more developed they can become an asset for the company.
The data that is visualized now depends on whether the logged time is reported on a ticket or not. When looking through the database there were not many time entries logged on tickets and the explanation was that only about 20% of logged time on the company were on tickets. This means that all the other time entries were logged on projects in Harvest and would not be taken into account when visualizing it. We chose to use this data for the visualization anyway because we wanted to try make a tool for investigating how time is estimated within the company.
Since the connection of data is depending on the code to be filled in correctly in the Harvest description to match Jiras key for each project a lot of errors can occur. This description can only be filled in by each employee. This means that the connection between the data to be visualized is depending on the fact that the employees fill in the description for the timelog correctly. When this is not the case the data will be excluded and therefore taken out from comparison of the estimated time and the actual time spent on each ticket. By using this Timelog application it would make it easier to log time on each ticket correctly since adding the description manually is no longer needed, the code can be chosen from a drop down list of all the tickets for the specified client and project.
To be able to see progress both on all tickets and on all time logs was something several participants thought would be very usable. This is because as mentioned in section 1.2 this is not possible to do today. To see the progress today the developer has to look at the estimated time for the ticket and then compare it to all the entries logged on that particular ticket and add it up, which is not an efficient approach.
As it is today the developers can log time on project in Harvest and not a ticket, but some do have tickets they are working on. This means that the employees wants the choice to choose a ticket but is not necessary forced to. However it could be a thought to the future to
30 Discussion make tickets for all things possible to do in one project, meaning that descriptions of what have been done will later on decrease.
5.2.4
Usability test
Thinking Aloud was chosen because as mentioned in section 2.5 it is a method that is possible to use with an unfinished system. It is fast to learn the basics of it well enough in order to start conducting tests early without a lot of preparation.
The difficulty factor from the questions the participants filled out after each task was on average 1.9, see Appendix B, for the entire test on the scale 1-4. This means that the system was considered quite easy to use. It was a bit tricky to interpret the scatter plot since the text on the axis had disappeared, yet all the participants figured it out. Striving to make an easily understandable system motivates the systems creator to work in iteration as [14] talks about.
The usability test was held on a Lenovo with windows 8.1. This aspect may have interfered with the test since the users felt insecure with the keyboard formation, it differs from the mac keyboard that most of the participants use in their daily work.
The instructions can have been interpreted differently by all the developers who partici-pated in the test. The test manager may have had an external influence on the participants when reading out the instructions or the tasks.
Considering that all the employees have different experiences of the different parts of the test , the result came out as hoped.
5.3
Work in a wider context
Having a good system for managing time can be a huge money saver in companies. Since time is money and consultant businesses value their chargeable time it is important that the workflow is as good as possible. If the product owner in a team can see where and when a project goes wrong improvements are more likely to happen in future work. In order to encourage employees to log their time a system which is easy and efficient needs to be provided. Even though a system is easy to use it happens sometimes that employees do not log their worked time. This can be either a cultural problem or an individual which is hard to point out specifically and not a part of this study.
Chapter 6
Conclusion
As conclusion of the result and discussion the application’s concept was appreciated, even though the system was not yet finished the developers saw the potential in it.
1. How can a new system for time management look like to replace one or two of the existing systems to have all data in one place?
A web application has been designed and developed to, in the future, replace one or two of the systems. The application has the functionality to log time and provides an overview of different attributes in order to ease the time management process. With further improvements the system can replace Harvest for the developers, when reporting the worked time. In order to replace Harvest completely, invoicing needs to be implemented which is the management part. To replace both of the existing systems, Jira and Harvest, ticket handling is also necessary to be implemented in the newly developed system.
2. Can the data from the two systems be presented in a way to easier see how time has been distributed?
The data has been connected from the two systems Harvest and Jira to give a better overview of worked time on tickets within the company. With the progress bar representing the tickets progress the developers can more easily see if the worked time is exceeded on an ongoing ticket. The timeline shows how the developers have spent their time during the day, which is mainly information from Harvest. The information from Jira is added to that time entry when the ticket code is added in the logged time in Harvest. When using the developed application the data will be presented in one place and it will be easier and more efficient rather than have information in several places.
32 Conclusion 3. Is there a better way than the existing one to have an overview of what the
devel-opers on the team are currently working on?
A visualization in form of a timeline has been presented. The usability test showed that the developers preferred that overview compared to what is currently provided. The existing way to manually check each developers progress was inefficient. With this application, all developers progress during the day is shown at once. The timeline makes it easy to see if a developer forgets to log time and the product owner can remind that person if needed.
4. How can data be visualized to give relevant information to the product owner or the developers?
As the result came out, a scatter plot was provided in the application to better see how the tickets progress turned out. This gives the product owner information about how the developers works and how the developers estimates the time on different tasks. Also the timeline gives information about the developers workflow during the day. The developers can have an insight in how their attitude towards time reporting is when looking at the timeline. The timeline gives the information such as how the developer commented the time entry or if the logged time were somehow incorrect.
Chapter 7
Future work
The application will hopefully be used by the company in their daily work after some further developing has been done. However the database needs an upgrade to get all the data needed for the visualizations. The problem about matching up tickets from Jira and Harvest would be erased if the new system had to save all relevant data when reporting time. It could be solved by forcing the developer to choose a ticket, meaning that when the company works with internal things a ticket would exist for that purpose.
A lot of improvements can be done to this application. As for the time logging time the A considered aspect that could be improved is the data retrieval. However it has been discussed to leave Harvest as reporting system and use this newly developed application in the future when needed improvements and invoicing capability have been implemented.
A visual representation which could give value for the management is a visualization of cyclic time-variated data as mentioned in section 2.7. This kind of visualization would give the possibility to look at cyclic data during a period such as one month, one quarter or a year to see patterns in the chosen period. The repetitive pattern could maybe consist of closed tickets, chargeable time or something else which could give the company feedback and a better overview of data which is difficult to interpret or find.
As for design the application did not meet the design as the company prefered. This can be a work for the future to match the application with the companies graphical design to give it a unified look.
References
[1] Aigner, W., Miksch, S., Müller, W., Schumann, H., and Tominski, C. (2008). Visual methods for analyzing time-oriented data. IEEE Transactions on Visualization and
Computer Graphics, 14(1):47–60.
[2] Al-Kassab, J., Ouertani, Z. M., Schiuma, G., and Neely, A. (2014). Information visualiza-tion to support management decisions. Internavisualiza-tional Journal of Informavisualiza-tion Technology
Decision Making (IJITDM), 13(02):407–428.
[3] Beck, K., Beedle, M., van Bennekum, A., Cockburn, A., Cunningham, W., Fowler, M., Grenning, J., Highsmith, J., Hunt, A., Jeffries, R., Kern, J., Marick, B., Martin, R. C., Mellor, S., Schwaber, K., Sutherland, J., and Thomas, D. (2001). Manifesto for agile software development.
[4] Beyer, H. (2010). User-centered Agile Methods. Synthesis lectures on human-centered informatics. Morgan & Claypool.
[5] Claessens, B. J., van Eerde, W., Rutte, C. G., and Roe, R. A. (2007). A review of the time management literature. Personnel Review, 36(2):255–276.
[6] Dumas, J. F. and Redish, J. C. (1993). A Practical Guide to Usability Testing. Greenwood Publishing Group Inc., Westport, CT, USA.
[7] Few, S. (2011). Quantitative displays for combining time-series and part-to-whole relationships. Perceptual Edge Visual Business Intelligence Newsletter January.
[8] Harris, R. L. (1999). Information Graphics: A Comprehensive Illustrated Reference. Oxford University Press, Inc., New York, NY, USA.
[9] Kosara, R. (2003). An interaction view on information visualization.
[10] Lazar, J. (2005). Web Usability: A User-Centered Design Approach. Addison-Wesley Longman Publishing Co., Inc., Boston, MA, USA.
[11] Lewis, C. and Rieman, J. (1993). Task-centered User Interface Design: A Practical
Introduction. University of Colorado, Boulder, Department of Computer Science.
[12] Li, P. (2013). JIRA 5.2 Essentials. Professional expertise distilled. Packt Publishing. [13] Löwgren, J. (1993). Human-computer Interaction: What Every System Developer
36 References [14] Saffer, D. (2009). Designing for Interaction: Creating Innovative Applications and
Devices. New Riders Publishing, Thousand Oaks, CA, USA, 2nd edition.
[15] Sisson, N., Parkinson, S. R., and Snowberry, K. (1986). Considerations of menu structure and communication rate for the design of computer menu displays. Int. J.
Man-Mach. Stud., 25(5):479–489.
[16] Spence, R. (2007). Information Visualization: Design for Interaction (2Nd Edition). Prentice-Hall, Inc., Upper Saddle River, NJ, USA.
[17] Spence, R. (2014). Information Visualization: An Introduction. Springer Publishing Company, Incorporated, 3rd edition.
[18] Stevens, S. S. (1946). On the theory of scales of measurement. Science, 103(2684):677– 680.
[19] Talbot, J., Setlur, V., and Anand, A. (2014). Four experiments on the perception of bar charts. IEEE Trans. Vis. Comput. Graph., 20(12):2152–2160.
[20] Ware, C. (2013). Information visualization. [Elektronisk resurs] : perception for design,
Appendix A
Prototype
38 Prototype
39
40 Prototype
41
42 Prototype
Appendix B
Usability questions
1. Nu vill vi att du ska logga in på hemsidan med ditt login.
2. Starta en tidsloggning på en ticket. Du behöver inte vara orolig för vad du startar för ingen information skickas till jira eller harvest.
3. Du börjar undra vad du loggade på förra tisdagen. Kolla upp det. 4. Men vi vill veta hur mycket tid som är loggad på ticketen AV-2854.
5. Du har fått i uppdrag att hjälpa en kollega på en ticket. Börja logga på AV-2942. 6. Den ticketen du precis började logga på började du egentligen jobba på för en timme
sedan. Ändra tiden till en timme sen.
7. Du skulle nu vilja ha en översikt över vad alla dina kollegor har gjort under dagen. Ta reda på detta.
8. Vi vill nu att du går till fliken Statistics. Där ser du en scatterplot. I ena hörnet ser du ganska många punker som är svåra att urskilja från varandra. Titta närmre på dessa. 9. Nu ser du att många punkter ligger pressade mot y -axeln. Vad tror du att det betyder? 10. Du blir intresserad av dina arbetade tickets i scatterploten. Kolla på dem.
11. Skulle systemet vara användbart? Skulle du föredra detta systems koncept framför de nuvarande systemen dvs Jira och Harvest?
44 Usability questions
Table B.1 Answers from usability test
Frågor Total Fråga 1 1 2 2 3 4 1 2.17 Fråga 2 2 2 2 2 2 1 1.83 Fråga 3 1 1 3 3 3 1 2 Fråga 4 2 2 3 3 1 1 2 Fråga 5 1 1 2 3 2 1 1.67 Fråga 6 1 1 1 1 1 2 1.17 Fråga 7 1 2 2 2 3 1 1.83 Fråga 8 1 1 2 4 3 1 2 Fråga 9 2 2 3 4 3 1 2.5 Fråga 10 1 1 1 2 3 1 1.5
Appendix C
Questions to companies
1. Hur tidsrapporterar ni? Använder ni ett speciellt system/program/app? Varför använder ni den?
2. Tidsloggar ni per projekt eller efter den struktur ni arbetar?
3. När ni sedan vill ha en översikt över tidsloggad data hur kan ni se den? Har ni excel dokument? Visualiseringar över det? Hur sammanfattas den datan så att den blir överskådlig?
