Digital dashboard as an information channel in office environments

(1)

U ^MEÅ U ^NIVERSITY

M

ASTER

T

HESIS

Digital dashboard as an information channel in office environments

Author:

Isak GUSTAFSSON

Supervisor:

Ulrik Söderström

Master Thesis in Interaction Technology and Design, 30 ECTS Master of Science in Interaction Technology and Design, 300 ECTS

November 18, 2020

(2)

i

UMEÅ UNIVERSITY

Abstract

Department of Applied Physics and Electronics

Digital dashboard as an information channel in office environments by Isak GUSTAFSSON

Workplaces way of communicating and sharing information has changed trough out the years, and digitalization has given new opportunities to how workplaces can communicate using technology. A popular tool used for presenting information is large digital screens. A company that uses a screen like this to present information to their employees is Xlent in Umeå.

This thesis is about investigating how this screen can come to better use at the workplace, by creating a new system that combines office information, currently presented on the screen, with employees’ schedules that previously have been managed on a whiteboard.

The new solution was implemented as a web application, allowing a user to access the application on any preferred platform. An administrator can therefore, during a meeting, directly change the content presented on the TV-screen from a cellphone or laptop.

Due to the current global pandemic, Covid-19, could the new system not be tested within the workplace, instead, it was tested from an administrative point of view. Usability testing for the sought usage within the workplace is left as future work.

(3)

ii

UMEÅ UNIVERSITY

Sammanfattning

Department of Applied Physics and Electronics

Digital dashboard as an information channel in office environments by Isak GUSTAFSSON

Arbetsplatsers sätt att kommunicera och dela information har genom åren förän- drats, och digitaliseringen av samhället har skapat nya möjligheter för hur kommu- nikation på arbetsplatser kan se ut genom användning av ny teknologi. Ett populärt verktyg för att dela information är stora digitala skärmar. Ett företag som använder en sådan skärm för att dela information med sina anställda är Xlent i Umeå.

I detta arbete undersöks det hur denna skärm kan användas på ett bättre sätt på arbetsplatsen, detta genom att skapa ett nytt system som kombinerar kontorsinfor- mation, som i dagsläget visas på skärmen, med de anställdas veckoscheman som tidigare har hanterats på en whiteboard.

Den nya lösningen implementerades som en webb applikation, och erbjuder an- vändaren att använda applikationen på valfri plattform. En administratör av applikationen kan därför exempelvis under ett möte ändra innehållet på TV-skärmen från sin mobiltelefon eller dator.

På grund av den rådande globala pandemin, Covid-19, kunde inte det skapade systemet testas på arbetsplatsen. Applikationen testades därför istället ur en admin- istratörs perspektiv. Användartester för det tänkta användandet av systemet lämnas därav som framtida arbete.

(4)

iii

Acknowledgements

This thesis would not have been possible to complete if it was not for several people around me who have given me support and guidance throughout this time.

I want to thank my supervisor at Umeå University, Ulrik Söderström for his help, support and guidance during this thesis. I also want to thank all the employees at Xlent in Umeå. A special thank you to Lisa Mörtsell and Karl-Johan Sjögren, my supervisors at Xlent for all the daily support and recommendations. And finally, I would like to thank my peer-review group: Viktor Åhlund, Erik Frängsmyr, Alexan- der Gunillasson, Magnus Emanuelsson and Martin Sjölund for all the good discussions and feedback I have received during this semester.

(5)

iv

List of Figures

2.1 The current solution used for planning the weeks at Xlents’ office. . . . 3

2.2 The current solution for monitoring systems that Xlent are hosting. . . 4

2.3 Initial design illustrating the weekly schedule for the employees at Xlent. . . 5

2.4 Initial design illustrating the monitor. . . 5

2.5 Initial design illustrating the administrative Graphical User Interface. . 6

2.6 Initial design illustrating the startview. . . 6

2.7 Initial design illustrating how an administrator could create a new project. . . 7

3.1 User Centered Design process, adapted from [9]. . . 9

3.2 Usability test, adapted from [13]. . . 10

3.3 Example of a digital dashboard. . . 12

4.1 UCD process-First iteration. . . 14

4.2 UCD process-Second iteration. . . 16

4.3 UCD process-Third iteration. . . 17

5.1 Ranking of components importance. . . 19

5.2 Start view. . . 20

5.3 Menu. . . 20

5.4 Administration view. . . 21

5.5 New consultant dialog. . . 21

5.6 Delete client dialog. . . 22

5.7 Scheduling view. . . 22

5.8 Assign project view. . . 23

5.9 Assign status view. . . 23

5.10 Assign office role view. . . 24

5.11 Start view for the web application. . . 26

5.12 Menu for the web application. . . 26

5.13 Administration view for the web application . . . 27

5.14 Dialog view for the web application. . . 27

5.15 Schedule view for the web application. . . 28

5.16 Assign project dialog for the web application. . . 28

5.17 Create status for employee. . . 29

5.18 Error alert (for large screens). . . 29

5.20 Revised dialog view for web application. . . 32

5.21 Revised schedule view, projects now with rounded corners. . . 33

7.1 Start view with mock data. . . 38

7.2 Monitor view with mock data. . . 38

(9)

viii

List of Tables

5.1 Participants performing the usability test. . . 24

(10)

ix

List of Abbreviations

UX User Experience UCD User Centered Design DS Digital Signage

GUI Graphical User Interface CRUD Create Read Update Delete CEO Chief Executive Officer

(11)

1

Chapter 1

Introduction

Most workplaces have their own way of communicating and sharing information between the employees. This could differ due to the type of environment and the needs a workplace has. Aside from the differences, there are also things that workplaces have in common, one such thing is to come up with new more effective solutions by using modern-day technology, this is known as Digitalization. "Digitaliza- tion is the use of digital technologies to change a business model and provide new revenue and value-producing opportunities" [1]. In a constantly changing business environment with new business models being introduced is it important for companies to be effective, agile and flexible something made easier using the technology available today [2].

A field that has been following the digitalization trend is the field of how information is presented. In offices has large digital screens lately become more and more popular as a communication channel, providing information to the employees. This as an effect of the large screens and monitors getting cheaper and more spread out in our society [3]. The use of these digital screens could of course differ due to the needs at the office. At many IT-companies are the screens being used as a way of monitoring data from different projects, tracking logs and measuring performance trends, this type of usage is often described as a digital dashboard [4]. A company that is using a digital dashboard to present and keep track of their projects is Xlent in Umeå, Sweden with whom this thesis is done in collaboration with.

1.1 Xlent

This Master Thesis is done in collaboration with Xlent and their office, Xlent Norr, located in Umeå, Sweden. Xlent is an IT-consultant company with 15 offices all over Sweden. They create the IT solutions of tomorrow and help their clients with different solutions depending on their needs. It could be creating a brand new website, maintenance of a currently used system or coming up with a new IT-strategy for the client [5].

This thesis is about creating a new solution for how Xlent’s workplace information is presented to their employees, how it could be administrated and presented on different platforms and screen sizes. Xlent have a large TV screen located in the center of the office that today is used as a digital dashboard keeping track of the current status and performance for the projects that they manage. However, they experience that they could make better use of the screen. The desired goal is to in- tegrate their scheduling, which is today planned on a whiteboard, with this digital dashboard as a way of gathering all important office information in one place. They

(12)

Chapter 1. Introduction 2

would also like to have access to this information outside of the office if any errors would occur or if one would need access to a coworkers’ schedule. Hence would they like to have this system built as a web application.

1.2 Objective

The objective of this master thesis is to investigate how to merge employee scheduling with important office information into one system, analyse how the new system is sought to be used and what type of content it should contain on different screen sizes. Furthermore is the aim to derive an implemented web application that fulfills the requirements from Xlent and answers to the research questions listed down below.

1.2.1 Research questions

To assure that the objective and the aim of this thesis is fulfilled these following research questions needs to be answered:

i How is the two systems, TV and whiteboard, used today and how is the new system thought to be used?

ii What type of information is most important to present and in what situation?

iii What type of content needs to be presented for different screen sizes?

iv How should the content be administrated?

(13)

3

Chapter 2

Background

2.1 System used today

As mentioned in Chapter 1 the system used today is in fact two systems, a whiteboard and a monitor. Xlent’s desire is to merge these two systems into one. By merging the systems they would be able to access all necessary information at one place and by that have a better flow of information in the office.

2.1.1 Whiteboard

The whiteboard is today used as a planning tool for planning the week at the office.

Every Monday morning, the employees at the office gather around the whiteboard for a meeting. During the meeting they discuss each individual employee’s schedule and writes down the hours the employee will spend on a project on the whiteboard.

After every employee’s schedule have been set they discuss further topics regarding events or news that will affect the upcoming week.

FIGURE 2.1: The current solution used for planning the weeks at Xlents’ office.

2.1.2 Monitor

The system that currently is being presented on the TV screen, in the center of the office, is the monitor. The monitor helps the employees at Xlent to track logs and observe the performance of projects that they are hosting. It can alert the employees

(14)

Chapter 2. Background 4

if a server goes down or any other problems occur. The monitor is a web app that they have developed themselves. It is hosted on a Raspberry Pi¹ and connected to the TV.

FIGURE2.2: The current solution for monitoring systems that Xlent are hosting.

2.2 Goals with the new system

1. Gather all information in one system

2. The system should streamline the communication of workplace information to the employees.

3. The content should be accessible one different screen sizes with Iphone 5 (320px x 568px) being the smallest required screen and a 50" TV being the largest.

2.3 Design proposal from Xlent

Xlent presented a plan for the new system, the requirements and how it would look.

The views which are most central and are being covered in this thesis are presented down below.

2.3.1 Schedule View

In figure 2.3 is the initial design proposal for the weekly schedule presented. This schedule is anticipated to replace the whiteboard that is used today.

1https://www.raspberrypi.org/

(15)

FIGURE 2.3: Initial design illustrating the weekly schedule for the employees at Xlent.

2.3.2 Monitor View

In figure 2.4 is the initial design proposal for the monitor presented. This design proposal is anticipated to replace the current design used for the monitor today.

FIGURE2.4: Initial design illustrating the monitor.

2.3.3 Administrative GUI View

In figure 2.5, is the initial design proposal for the administrative GUI presented. This design illustrates how this system is presented from an administrative point of view.

An administrator could here apply CRUD(Create, Read, Update and Delete) to different components. The items that could be controlled in the system are Consultants,

(16)

Clients, Projects, Office Roles and Highlights. These components could later when created, be used in the planning board when planning a schedule or be used to present information around the application, for example in the startview.

FIGURE2.5: Initial design illustrating the administrative Graphical User Interface.

2.3.4 Startview

In figure 2.6 is the initial design proposal for the startview presented. The startview will present office information to the employees, such as upcoming events and current statuses for projects.

FIGURE2.6: Initial design illustrating the startview.

(17)

2.3.5 CRUD Dialog

In figure 2.7 is the initial design proposal for a CRUD dialog presented. This figure illustrates a dialog box for applying CRUD for a project. Here can an administrator either create a new project, edit or delete an existing project. These dialog boxes are available for all the components in the administrative GUI, each individually adjusted to suit the component that has been selected.

FIGURE 2.7: Initial design illustrating how an administrator could create a new project.

(18)

8

Chapter 3

Theoretical Framework

This chapter gives you an explanation of theories, concepts and tools based on facts and previous research within the context of this thesis.

3.1 User Experience

User Experience, UX, is a term that has had many different definitions throughout the years and it is difficult to find one unified definition but it could be described as "the quality of experience a person has when interacting with a specific design"

[6]. The term UX was first mentioned by Donald Norman in 1993 when he was working at Apple Computer and selected his own working title as "User Experience Architect" [6]. In an article written by Norman and his colleague Jakob Nielsen, they list the requirements needed to achieve good User Experience. The first requirement is "to meet the exact needs of the customer" followed by "simplicity and elegance that produce products that are a joy to own, a joy to use" [7]. Good user experience is important as it tries to fulfill the users’ needs, which may persuade them to use the product frequently. Recurrent usage is beneficial for both parts, the user enjoys the product and usage of the product results in good business for the product owner [8].

3.2 User Centered Design

Improvement of user experience can be achieved in many ways, one way is to involve the user in the design process. This is called User-centered design, UCD. UCD is an iterative process that involves the users during all stages of design and development. The iterations may vary a bit however they generally follow four phases.

During the first phase an attempt to acquire a basic understanding of the context in which a user may use the system takes place, this is followed by specifying the users’ needs. In the third place, it is time to come up with a design solution that meets the users’ requirements. This is followed by an evaluation phase where an analysis between the current solution and the desired solution takes place. After the evaluation, a new iteration begins and the four phases are repeated until the desired result is reached [9].

(19)

Chapter 3. Theoretical Framework 9

FIGURE3.1: User Centered Design process, adapted from [9].

3.3 Usability testing

When working with User-centered Design towards good User Experience is Usabil- ity testing one term that is difficult to overlook. Usability testing is usually task- based to simulate a real-life scenario of using the created product or system. The person who is the test leader gives instructions and tasks to the test participant to perform [10]. The test leader continuously makes observations and takes notes as the participant performs the tasks. Usability testing can be used to identify problems with a design, get feedback and suggestions from the participants as well as learn more about user behaviour and preferences [11].

3.3.1 Think-aloud

A helpful method one could use when performing a usability test is the think-aloud method. In an article written in 2012, Jakob Nielsen claims this method to be the number 1 tool in usability testing [12]. Nielsen defines the method as follows: "In a thinking aloud test, you ask test participants to use the system while continuously thinking out loud — that is, simply verbalizing their thoughts as they move through the user interface" [12]. Furthermore does he argue that the strength with the think- aloud method is that it is cheap and easy to perform and gives good qualitative results even if the test is poorly run. One downside that Nielsen points out is the unnatural situation that the think-aloud method puts the test participant in. How- ever, most test participants are willing to try their best and can often adjust to the situation and give you some good results [12].

(20)

FIGURE3.2: Usability test, adapted from [13].

3.4 Visual hierarchy

When designing for a web page it is crucial to have a basic understanding of how the human eye operates. The eye operates fast and by organizing the content on a web page can a designer in a satisfying way guide the user towards a good user experience [14].

Visual hierarchy is the concept of ordering design elements based on how important they are. There are several factors that can affect how we perceive and rank the layout of a web page [14], these are presented in the following list:

1. Reading patterns: Studies have shown that the way users initially scan a web- site is in a similar way as it reads. All cultures read from top to bottom, and most read from left to right. The patterns that the eye tends to follow are as a result of this often shaped as the letters F and Z [15].

(a) F-pattern: F-patterns are most frequently used for information-heavy web- sites such as news pages, articles and blog posts. The users’ eye follows the left side of the page searching for headings or the start of an interesting sentence, when finding one the user reads it moving the eye from left to right. This creates the F-pattern (and sometimes an E-pattern) [15].

(b) Z-pattern: The Z-pattern is used for other types of web pages, not nec- essarily relying on large blocks of text. The users’ eye follows the top of the page, left to right, scanning for information to be found and then the same for the bottom of the page. With this knowledge, a designer often organizes a web pages content by placing the most important information in the corners and along the top and bottom part of the page [15].

2. Size: The next factor for how the eye reacts and perceive information when scanning a web page is size. And this one is not more complicated than that larger elements catches the eyes attention first since it stands out from the others [15].

3. Color: Colors just like sizes can be used to highlight important information.

Bright colors stand out when placed in a more pale or colorless environment.

(21)

This knowledge could be especially useful when designing for smaller screens, for example, a mobile application, where space is limited [15].

4. Typeface weight and pairing: Selecting typeface can in many ways affect the visual hierarchy of a page. A designer can by selecting a heavy type weight drag attention to a specific word or phrase, but also the style such as serifs of a text can affect how it is perceived by the user [15].

5. Space: Another way to change the visual hierarchy is to give an element more space. By isolating an element from others it becomes more visible for a user and could therefore effectively be used for dragging attention to desired elements [15].

6. Direction: Web pages are most commonly designed following a grid, by plac- ing elements horizontally and vertically with straight angles. By breaking this pattern, placing elements tilting or even diagonally can a designer create a higher visual hierarchy for an element [15].

3.5 Digital signage

Digital signage is the use of digital displays to present digital content such as images, videos or text [16]. The use of digital signage is something that has been flourished for many years now and you can see it all around us these days, on the walls in the city center, at bus stops and even on vending machines and gas pumps. This as a result of the technological evolution and the high demand for these digital displays driving down the price. The high demand is because of the possibilities the digital signage brings. For example, the usage in restaurants, here can the displays be used for presenting the menu for a customer with the beneficial flexibility of the digital signage. The menus can easily change depending on time and can for example present different menus for lunch and dinner [17]. Digital signage could be divided into four main categories, commercial, experiential, behavioral and informational.

Of these four categories is commercial the most important and most used one with advertising being the part of the industry where the money resides [18].

3.5.1 Informational digital signage

For this thesis is the informational part of digital signage the one we will have a deeper focus on. The use of informational digital signage could be described as delivering targeted information to a specific group of people. Cahyadi, et al. [19]

describes how digital signage can be used as an Information and Communication Technology (ICT) application in the tourism industry. In their research they present a solution that gives up to date, relevant and rich information to tourists presented on strategical placed screens, this to be able to reach out to many tourists with detailed information. This type of usage is also widely used at schools and workplaces presenting information to students and employees [18].

3.6 Workplace information and communication

Having a good work environment is essential at workplaces and good relationships at the office are important to boost motivation and loyalty. Sievert et al.[20] explain that connecting employees by internal communication and information tools help

(22)

to engage the employees with the company. It could also help to display the individual’s role within the company and as a result, the individual could develop a stronger emotional connection to the company and with that increase work satisfac- tion and productivity.

3.6.1 Digital dashboard

Visual representation of data helps us analyse the numbers provided in a way that most people find easier to comprehend. The data could be represented in many different ways such as graphs and charts and with the advancement in technology can data now easier than ever be collected and analysed [21]. The term "digital dashboard" is one way of describing the visual representation of data presented on a digital display [4].

FIGURE3.3: Example of a digital dashboard.

3.7 Tools

This section describes tools used for design, prototyping, web development and online courses in web development.

3.7.1 Adobe XD

Adobe XD is a powerful user experience design tool, from Adobe Inc, used for designing web- and mobile applications. Adobe XD allows you to create high-fidelity designs, interactive prototypes, animations and more [22].

3.7.2 Angular

Angular is a framework created by Google and is today one of the most popular tools used for web development [23]. Angular is a typescript-based¹ framework that with the help of HMTL² and CSS³ allows you to create powerful single-page applications [24].

1https://en.wikipedia.org/wiki/TypeScript

2https://en.wikipedia.org/wiki/HTML

3https://en.wikipedia.org/wiki/Cascading_Style_Sheets

(23)

3.7.3 Pluralsight

Pluralsight is a provider of online-courses for software development that offers thou- sands of online courses. They offer both video lectures and tests as a way of measuring your knowledge and helping you find areas you can improve. It is widely used by companies all over the world with more than 17700 registered business accounts.

[25].

3.7.4 Visual Studio Code

Visual Studio Code is a free to use source-code editor made by Microsoft. The editor provides support for the most common programming languages and was voted the most popular developer environment tool in 2019 in a survey conducted by the website Stack Overflow [26].

(24)

14

Chapter 4

Method

This section describes the workflow of this master thesis and how this study was conducted. It describes the chosen methods and explains why certain techniques were selected. Throughout the development of this digital dashboard, an user- centered design approach (described in chapter 3) was used. The UCD approach was selected due to the employees at Xlent being the final users and their input was crucial to be able to deliver a service they feel satisfied using. UCD is an iterative process and was in this thesis divided into three iterations with different focal points. The first iteration focused on gathering information, creating and testing a prototype. The second iteration focused on implementing the prototype as an web application and testing it on the users. During the third iteration a revised version of the implementation was made as well as a final usability test. The iterations used in this thesis are further described below.

4.1 First iteration

The first iteration focused on collecting the information needed for this thesis, from a literature study and interviews, as well as performing a usability test on the initial design delivered by Xlent. The workflow of this iteration is described below.

FIGURE4.1: UCD process-First iteration.

4.1.1 Research phase Literature study

To get the knowledge and information needed for this thesis a literature study was made. Similar projects and scientific articles related to Interaction design and information technology were analysed. The resource mainly used to gather the required

(25)

Chapter 4. Method 15

information for this thesis was Google Scholar¹and Diva Portal². Interview with CEO

During the research phase, a number of tasks had to be performed, one such task was to get a better understanding of the requirements of this system from a user perspective and more specifically the people who in the future were going to use this system. As a way of collecting this information, an initial interview with the CEO at Xlent took place.

Interview with employees

In addition to talking with the CEO regarding the more general requirements on the system, an interview with the employees had to take place in order to receive more detailed answers. During the interview questions regarding their use of the service today were asked. How often is it being used? in what type of situations and which platform is used to access the system? this to establish a pattern for how the current system is being used by the users. In addition to investigate the users current usage, questions regarding their requests on the new system were asked.

The questions focused on what type of content they felt were the most important and in which situation this needs to be accessible. A complete list of the questions from the interview can be found in Appendix A.

4.1.2 Usability test-prototype

To determine how a user experience the system a usability test was constructed based on the initial design, delivered by Xlent.

Create prototype

To be able to test the design proposal, a prototype had to be created. As the initial design was made using Adobe XD, it was natural to continue using the same tool when creating an interactive prototype as it was more effective to use already created components than to create new ones using a different tool.

Create test

The test technique used was the "think aloud" approach. Using this technique the user was given a set of instructions that they had to perform by navigating through the system and act as instructed. While doing this they were encouraged to explain their thoughts throughout the process, this gives the observer a good picture of how the user experience using the system. The instructions given to the test participants can be found in Appendix B.

Perform test

The usability tests were all performed on distance using Microsoft Teams³as a communication channel. The participant was asked to share its screen throughout the

1https://scholar.google.com/

2https://umu.diva-portal.org/

3https://www.microsoft.com/en/microsoft-365/microsoft-teams/group-chat-software

(26)

test to make an observation possible, and the entire test was recorded with both audio and video to document the meeting.

Analyse and draw conclusions

After the test had been performed the results were analysed and then iteration 2 could begin.

4.2 Second iteration

The second iteration focused on the implementation of the web application, the workflow of this iteration is described below.

FIGURE4.2: UCD process-Second iteration.

4.2.1 Research and planning

Before the development could begin, a number of decisions regarding the choice of framework, and working method had to be made. After discussions with an employee at Xlent, a decision that the development would be done using the framework Angular was taken. Furthermore was it decided that the main focus would be front-end development since that was more suitable for this thesis and Xlent already had begun to develop the back-end part of the application. To be able to work with Angular initial research had to be conducted to comprehend how applications are built using this framework as well as which benefits and disadvantages it has. This research was performed using Pluralsight (described in chapter 3).

4.2.2 Implementation of web application

The tool used for the implementation was Visual Studio Code.

4.2.3 Workflow

The implementation phase was divided into 14-day sprints, and each sprint was planned together with an employee at Xlent on the first day of the sprint. After 14 days a meeting was scheduled and a summary of the sprint was made, followed by the next one being planned.

(27)

4.2.4 Code reviews

As a way of ensuring that the code being written was of good quality, code reviews were held continuously during the implementation process. When a piece of the system had been created these were reviewed by an employee at Xlent. After the review, a meeting was scheduled where feedback was given and a discussion on the code took place.

4.2.5 Usability test-web application

After the implementation had been finalized a usability test was conducted for the web application. The test protocol from the first iteration was reused and so were the test participants.

4.2.6 Analyse and draw conclusions

After the test had been performed the results were analysed and then iteration 3 could begin.

4.3 Third iteration

The third iteration focused on a revised implementation of the web application, the workflow of this iteration is described below.

FIGURE4.3: UCD process-Third iteration.

4.3.1 Revised implementation of web application

After the results from the usability test in iteration 2 had been analysed, a revised implementation took place. Additional features were added and some minor changes in the design of a few elements within the application were made.

(28)

18

Chapter 5

Results

This section presents the results from the iterations described in chapter 4.

5.1 First iteration

The first iteration had a main focus on gathering information on the requirements on the service and understand the needs and wishes of the users. After the research, a prototype was created and a usability test was held. The results from the first iteration are presented below.

5.1.1 Research phase Interview with CEO

During the interview with the CEO he pointed out the following requirements:

1. A wish of merging the scheduling and information system into one system as a way of gathering all important office information in one place. This to make the workplace communication more effective by reducing the number of communication channels.

2. Another requirement was that the system should be easy to use on a cellphone, for instance to simplify the administration of scheduling so it can be done im- mediately during a meeting and to get access to urgent information outside of the office.

Interview with employees

During the interview with the employees the following results were collected about their usage of the current system:

1. The most common way the employee’s access information from the monitor used today is by looking at the TV-screen in the center of the office. The computer is in general not being used by the employees to access the monitor except by the person who has the weekly responsibility to keep track of project performances. When having this responsibility 60% of the employees answered that they constantly use one of their two computer screens to present the monitor. The monitor can not be accessed from a cellphone today, however, the employees did not experience the need for this accessibility with the data available today.

(29)

Chapter 5. Results 19

2. The employees, who do not have the weekly responsibility of the maintenance, currently observe the monitor a couple of times a day. Most commonly related to a release of a new update to a project to ensure everything is stable.

Other observations are sporadic and just quick glances. The Whiteboard is used mainly on Mondays when scheduling the week and then occasionally throughout the week when needed.

After collecting answers regarding the employees’ current usage of the system, it was time to collect answers about the new system.

1. On the question of what type of information that was the most important for the employees all of the participants answered that sudden errors to a project are the most crucial information they need to get notified about. Information that was considered being less important was upcoming office events and how many hours that have been spent/remaining on projects. The result from this ranking is presented in figure 5.1 where a high staple equals high importance.

FIGURE5.1: Ranking of components importance.

2. On the question "In what situation is this information important for you to access?" The majority of the employees answered that it is mainly important to access the information in the office, especially if you have the weekly responsibility for maintenance. 60% of the employees answered that they would like to access the information on their cellphones and 40% said they would like to access it outside of the office. For instance on the bus on their way to work to see if there are any errors they have to look into rapidly, or if there is an office event taking place that day. Two of the employees also mentioned that the information accessible on the cellphone could be less detailed and more of an overview, as detailed information is preferred to examine on the computer.

5.1.2 Prototype

After the interviews had been held, it was time to create a prototype. The prototype was created in Adobe XD from the initial design suggestions delivered by Xlent. The prototype was interactive so the test participants could click and navigate through

(30)

the application in a similar way as with an actually implemented version. The views in the created prototype is presented down below.

FIGURE5.2: Start view.

FIGURE5.3: Menu.

(31)

FIGURE5.4: Administration view.

FIGURE5.5: New consultant dialog.

(32)

FIGURE5.6: Delete client dialog.

FIGURE5.7: Scheduling view.

(33)

FIGURE5.8: Assign project view.

FIGURE5.9: Assign status view.

(34)

FIGURE5.10: Assign office role view.

5.1.3 Usability test

The following section presents the results from the usability test of the prototype.

Participants

To perform this test, five test participants were recruited. The number of test participants was decided based on the statement by Jakob Nielsen, co-founder of the Nielsen Norman Group, that five test participants can find most usability issues [27].

To get an extensive result the participants were selected with different occupations, ages and gender.

Participant 1 Participant 2 Participant 3 Participant 4 Participant 5

Occupation Student Developer Developer Designer CEO

Age 25-30 30-35 30-35 25-30 40-45

Gender Male Female Female Female Male

TABLE5.1: Participants performing the usability test.

Feedback from test participants

The results from the test generated both positive feedback and feedback on areas that could need improvement. The test participants all expressed that the prototype was easy to navigate through and that the overall look of the application was good. They could all perform every task given to them without difficulties, except for two participants who struggled when they were asked to assign an office role to an employee (figure 5.10). They did eventually managed to complete the task and commented that they understood the thought behind the solution and that it felt log- ical. One of the participants further explained his reasoning that the "plus symbol"

indicated that something could be added but it was difficult to determine what it was due to lack of information, unlike the other buttons in the view. The participant

(35)

did however declare that he liked the solution and that it would not be a problem to assign office roles once you have been introduced to it.

5.1.4 Evaluation of test results

The main feedback that was received from the usability test, was the subject of the button used for assigning an office-role. Some of the test participants had at first sight difficulties understanding what the button was for. However, as one participant explained, is this most likely an issue that will solve itself with users learning what the button is for after the first time being introduced to it. Along with the participants’ reasoning and the situation where there is limited space to add additional text to the button, it was decided that the button should remain with its current design.

5.2 Second iteration

After the evaluation of the feedback, given from the usability test of the prototype had been analysed, it was time to proceed to the second iteration. The second iteration focused on the initial implementation and testing of the web application. The results of this iteration are presented below.

5.2.1 Implementation of web application

One requirement on the web application, that was pointed out by the CEO in the first iteration, was that it should be easy to use on both large and small screens. The implementation of the application was therefore created with this in consideration, by using the suggested design for large screens (screens with a width, broader than 768px) and by creating a scaled down version more suitable for smaller devices such as cellphones.

To access the web application the user needs to login using Xlents’ corporate login. Each user is classified either as an administrator or employee. A user classified as an administrator can access and change the content within the application, for instance, administrate the schedule and make changes to the admin board. A profile without the administrator classification can still access most of the content within the application but these users have a read-only authorization. The admin board (figure 5.13) and the buttons in the schedule view (figure 5.15) is hidden for a non- administrator user.

One feature that separates the applications’ appearance between the different screen sizes is the way the users get notified if an error occurs. For the larger screens, an error is highlighted by the top bar changing its color to red, presenting instructions to the users of how to act, see figure (5.18).

Computer and TV screen size

The implemented web application is presented by its views in figure 5.14-5.18.

(36)

FIGURE5.11: Start view for the web application.

FIGURE5.12: Menu for the web application.

(37)

FIGURE5.13: Administration view for the web application .

FIGURE5.14: Dialog view for the web application.

(38)

FIGURE5.15: Schedule view for the web application.

FIGURE5.16: Assign project dialog for the web application.

(39)

FIGURE5.17: Create status for employee.

FIGURE5.18: Error alert (for large screens).

Mobile screen size

The design suggestions delivered by Xlent did not cover the design for smaller screens, so these views were implemented with the employee interviews in mind.

The employees expressed that the application for mobile usage did not need to present as detailed information as the ones for large screens. With this in consideration, it was decided that the schedule view would only present the weekly content, such as projects and office roles. The views implemented for smaller screens is presented in figure 5.19a-5.19d.

(40)

(A) Administration view adjusted for mobile screen size.

(B) Administration view when scrolling down.

(C) Example of dialog view for administration on mobile.

(D) Schedule view for mobile screen size (user without administrative authorization).

(41)

5.2.2 Usability test-web application

For the usability test of the implemented web application, the same test participants participated as in the previous usability test on the prototype. The same test protocol was also used and the participants were instructed to think aloud throughout the test. After the test was completed, the participants were asked to express general thoughts and give feedback on the web application.

Feedback from test participants

As this was the first glance at the web application the participants expressed that it was exciting to see it for the first time as an actual application. The first thing that got pointed out as an area of improvement was the lack of indicators for necessary fields within the dialogues in the admin view, for example, adding a name to a project when creating it is required and should be highlighted in some way. Two participants suggested that the shape of the added projects in the schedule view (see 5.15) would look better with rounded corners to it. One participant raised the question of how the administration of the most popular statuses, see figure 5.17, is thought to be done.

Evaluation of test results

The received feedback from the usability test was each of a different nature. The lack of indicators for the forms within the CRUD-dialogues was something that simply had been overlooked during the implementation phase. As for the administration of the most popular statuses, currently they are sorted by frequency of usage, presenting the 5 currently most used statuses. One suggestion that was discussed with the user was to add a field for administrating this at the administration page, where an administrator could choose five statuses from previously used ones and these would be the ones appearing as suggestions in the schedule. This suggestion will however be left for future improvements due to this not being a big problem but more of a potentially good feature. The shape of the corners for the projects will be edited in the next iteration as this was pointed out to be more suitable for the design.

5.3 Third iteration

5.3.1 Revised implementation of web application

As for the revised implementation, some minor changes were made to the application. The first change was to add indicators for the required fields within the CRUD-dialogues. The required fields that need to be filled out by a user are now marked with a star. If a user tries to save with an incorrectly filled out form a red text appears with an explanation to the user. An example of this revised dialogue is presented in figure 5.20.

(42)

FIGURE5.20: Revised dialog view for web application.

The second adjustment that was made to the application was a smaller style change to the projects that have been assigned to an employee. A change of the border-radius now gives the projects rounded corners which better harmonizes with the overall rounded, soft design. See figure 5.21.

(43)

FIGURE5.21: Revised schedule view, projects now with rounded corners.

(44)

34

Chapter 6

Discussion

This chapter contains a discussion about the project and the results, as well as limi- tations and restrictions during this thesis. Furthermore is research questions, asked in the beginning of this thesis, answered and discussed.

6.1 Discussion

For this thesis, the User Centered Design process was used. By selecting this approach, it was easy to establish good contact with the users in an early stage and since this was an internal project this part was crucial. As mentioned in the background, Chapter 2, Xlent had already begun the work, coming up with an initial design when this thesis started. The usability test of the design delivered by Xlent established that the employees were satisfied with this design and therefore, the implementation started at an early stage instead of making a new design.

One limitation that has influenced this thesis is the global pandemic, Covid-19.

Due to the pandemic spreading over the world, all the work on this thesis had to be performed on distance (except the first two weeks), leaving the office at Xlent empty. This was a big challenge during the thesis as the main usage of the system being created is within the office, on the TV-screen. Due to this situation, it became impossible to perform usability tests in a normal workday scenario, having the system up and running on the TV-screen in the office and having the employees receive information from it. The intention with the TV-screen is to present one view at a time and have them change after a certain amount of time, comparable to how one receives information from a digital signage display. How long it will be between the changes, and if each view should be given the same amount of time presented on the screen is not decided at this time, as this could not be tested at the office.

So as every day, passive usage of the system could not be tested, a decision was made to narrow down the usability tests to an administrative point of view. These types of tasks could be completed in a situation similar to the thought administrative usage of the service at the office. The test was performed through a video call, sharing screens between the test participant and test leader.

One aspect to consider is that the same test group was used for every usability test. Having the same test group to perform multiple usability tests could in some cases be negative as this may adjust the design to fit just their specific preference, and in a broader perspective, it might not be well received. However since this system was created for internal usage, it was instead considered as an advantage to work

(45)

Chapter 6. Discussion 35

towards this specific group of people.

Furthermore, I would like to discuss the future of this type of system. With the global pandemic currently forcing many people to work from home, I think many companies will look into solutions to enable a more agile way of working in the future, making it easier for employees to work at home.

To round off this discussion, I would like to discuss the validity of the results in this thesis. The UCD process allowed me to involve the users throughout the entire project, providing me with feedback in each iteration which was very useful. And as a result, could the desired system be created. However, to establish a more reli- able result of higher quality, further iterations would have to be conducted. These additional iterations should, as a suggestion, contain usability tests of the daily usage of the system at the office, testing it on the TV-screen, computers, and cellphones.

6.2 Research questions

At the start of this thesis (Chapter 1) a number of research questions were asked as a way of pointing out important areas that had to be examined during the thesis. A discussion and answers to these questions are presented below:

i How is the two systems, TV and whiteboard, used today and how is the new system thought to be used?- As described in 2.1 and 2.1.2 was the whiteboard used as a tool for managing the employees’ weekly schedules, while the TV was used for presenting performance data of projects that Xlent are hosting.

The scheduling took place every Monday during a short morning meeting and the data from the TV and whiteboard was accessible at any given time within the office.

The new system will be used in a similar way, but by merging the two systems into one it helps to structure the information by having it all in one place. The scheduling will take place Monday mornings but can now be managed within the application instead of using the whiteboard. Information is now also available outside of the office as the system was implemented as a web application, accessible on both cellphones and computers.

ii What type of information is most important to present and in what situa- tion? - Based on the interviews in the first iteration, the most important information is alerts regarding performance problems of hosted projects, this information is important to receive all the time, especially for the employee who has the weekly responsibility for maintenance.

iii What type of content needs to be presented for different screen sizes? - Dur- ing the interviews with the users in the first iteration, it was discovered that the users prefer to examine more detailed information on their computers.

Therefore a decision was made to remove some of the more detailed information such as weekly schedules for the employees and performance data of projects for cellphone screen sizes. The same information is accessible for screen sizes fitting for computers and the TV, however, will the TV not present

(46)

Chapter 6. Discussion 36

details regarding project performance. The TV will instead alert the employees when a problem occurs and advise them to examine the problem further on their computer.

iv How should the content be administrated? - The content will be adminis- trated by an administrator at the office. The scheduling will take place on Mondays as before and can now be performed on a cellphone or computer to update the web application. Other administrative tasks, such as adding new consultants and projects can be managed from a computer or cellphone at any given time by an administrator.

As presented above could all the research questions be answered. However, these answers are presented without being able to test and analyse the daily usage of the system from a non-administrator point of view at the office. It would therefore be interesting to do a follow-up when the employees are able to return to the office and the system has been taken into usage.

(47)

37

Chapter 7

Conclusions

7.1 Conclusions

The aim of this thesis was to investigate how to effectively merge employee scheduling with an information system and analyse how this is sought to be used in an office environment by its users, furthermore was this new system to be implemented as a web application. The results presented gives one solution to how this merge of the two systems could be achieved. Furthermore is the created system adapted to suit different screen sizes, with an Iphone 5 (320px x 568px) being the smallest function- ing screen and a 50" TV being the largest. The results also indicate how the everyday usage of such a system would look like from a user perspective.

The result of the created end product is a consequence of the input given by the test participants and employees at Xlent that meets their specific needs. If this project had been in collaboration with a different company, with the same needs and requirements the chances are high that it would have resulted in a different end product.

As mentioned in the discussion, this thesis has been written under unique cir- cumstances and as a consequence of this, the entire system could not be finalised entirely. Hence will a few suggestions be presented down below for future work.

7.2 Future work

7.2.1 Additions to the application

Additional features to the application that have been discussed with the employees at Xlent are:

1. Administration of most popular statuses - When assigning a status to an em- ployee’s daily schedule, the administrator is given the option of selecting one of five suggested statuses, see figure 5.17, or creating a brand new status. The five suggested statuses that appear in the dialogue are the five most selected statuses in the past. One improvement that could be added in the future is to allow a user, classed as an administrator to choose these five manually in the admin-board instead. This could be an improvement since an automatic selec- tion could potentially present outdated suggestions to the user in the future.

2. Error alerting - Another improvement in the future that was discussed was the way an employee gets notified if an error occurs in the system. An additional suggestion to how this could work in the future is to allow the employee, who has the weekly responsibility to keep track of project performances, to receive notifications to the cellphone during office hours.

(48)

Chapter 7. Conclusions 38

3. Finalize the start view - The start view did not get fully implemented. The start view currently has its structure implemented, positioning and styling the elements in the view. However, is the data presented only "mock data", illustrating how this will look when real data will be applied to it. The real data could not be applied to the view currently as the data is collected from a third party. Xlent is currently debating how this will work in the future.

FIGURE7.1: Start view with mock data.

4. Finalize the monitor - Similar to the start view is the monitor currently not fully implemented due to a third-party debate. The view currently has its structure implemented, positioning and styling the elements in the view.

FIGURE7.2: Monitor view with mock data.

7.2.2 Usability testing

As the created application has not currently been taken into usage, with the employees still working at home, the system could not be tested in an office environment.

To establish that the system fulfills the requirements and needs delivered by Xlent,

(49)

Chapter 7. Conclusions 39

a more extensive test of the system would have to be made. Due to the global pandemic and the empty office at Xlent, this could not be accomplished during this thesis. So the testing of the finalized system will have to take place in the future. The usability test would have to include the presentation mode, testing how the different views should be presented on the TV-screen, and if each view should be presented with equal frequency. Furthermore would the system need to be tested on a smaller screen size, as a suggestion on a cellphone, performing administrative tasks during a Monday meeting where projects for the week are being assigned.

(50)

40

Appendix A

Interview with users

A.1 Introduction

During this short interview I will ask you some questions about your usage of the system today. And your thoughts regarding the content presented on the new "start view" that is thought to be the most common view presented on the TV screen at the office. Any Questions before we start?

A.2 Questions

A.2.1 Current system

1. How do you access the information from the system today, the TV? Your own Computer? Your cellphone?

2. How often to you check the system for information?

3. In what type of situation do you access the information?

A.2.2 The new system

1. What type of information is most important for you? (Monitor with errors, workplace-information, schedule-related information) (ask openly then fill out with examples)

2. Rank the following based on how important they are for you to access in the start view:

• Weekly office roles

• Available pull requests

• Highlights/Office-alerts/Office events

• Employees schedules

• Monitor with error messages

• Hours spent and remaining on projects

• (additional parts mentioned in the first question) 3. In what situation is this information important for you?

• Cellphone?

• Computer?

(51)

Appendix A. Interview with users 41

• TV?

• Outside the office?

• other?

(52)

42

Appendix B

Usability test

B.1 Instructions

During this user test I will give you a couple of tasks that I want you to perform, it could be navigate to a certain page of the system or some other smaller interaction.

During the test I want you to "think a loud", explaining your thought process at the same time as you perform the task. At the end of the test we will have a short discussion were you can lift thoughts you had during the test or any other general comments. Any questions before we start?

B.2 Tasks

1. Navigate to the administration.

2. Create a new consultant.

3. Create a new Office role.

4. Delete the client "ExampleClient".

5. Navigate to the scheduling.

6. Assign the project "ExampleProject 2" to Kalle.

7. Schedule that Kalle has a day off on Monday.

8. Add the office role "Weekly activity" to Malin.

(53)

43

Bibliography

[1] Gartner.com. Digitalization. https : / / www . gartner . com / en / information - technology/glossary/digitalization. Accessed: 2020-03-17.

[2] V Parida. “Digitalization”. In: Addressing social challenges (2018).

[3] L Giusti E Mencarini and M Zancanaro. “An Investigation on Acceptance and Rejection of Public Displays in a Knowledge Company”. In: Proceedings of the 2012 International Symposium on Pervasive Displays (2012).

[4] Klipfolio.com. https://www.klipfolio.com/resources/articles/what-is- digital-dashboard. Accessed: 2020-03-17.

[5] Xlent.se. https://www.xlent.se. Accessed: 2020-03-10.

[6] D Knemeyer E Svoboda. “User Experience - UX”. In: The Glossary of Human Computer Interaction. 2014. Chap. 39.

[7] D Norman J Nielsen. The Definition of User Experience (UX). https : / / www . nngroup.com/articles/definition- user- experience/. Accessed: 2020-08- 16.

[8] P Gangadharan. “The Importance of User Experience Design”. In: (2017).

[9] Interaction-Design.org. User Centered Design. https : / / www . interaction - design . org / literature / topics / user - centered - design. Accessed: 2020- 08-24.

[10] Elizabeth Rosenzweig. Successful User Experience - Strategies and Roadmaps. Mor- gan Kaufmann, 2015.

[11] K Moran. Usability Testing 101. https://www.nngroup.com/articles/usability- testing-101/. Accessed: 2020-08-16.

[12] Jakob Nielsen. Thinking Aloud: The 1 Usability Tool. https://www.nngroup.com/

articles/thinking-aloud-the-1-usability-tool/. Accessed: 2020-08-06.

[13] Userjourneys.com. 10 ways to make clients love usability testing. http : / / www . userjourneys . com / blog / 10 - ways - to - make - clients - love - usability - testing/. Accessed: 2020-06-22.

[14] Interaction-design.org. Visual Hierarchy. https://www.interaction-design.

org/literature/topics/visual-hierarchy. Accessed: 2020-08-06.

[15] 6 principles of visual hierarchy for designers. ://99designs.com/blog/tips/6-principles- of-visual-hierarchy/.

[16] Wikipedia.org. Digital Signage. https://en.wikipedia.org/wiki/Digital_

signage. Accessed: 2020-08-06.

[17] Roy Want and Bill N Schilit. “Interactive digital signage”. In: Computer 45.5 (2012), pp. 21–24.

[18] Jimmy Schaeffler. “What Is Digital Signage?” In: Digital Signage. Routledge, 2012, pp. 61–92.

(54)

Bibliography 44

[19] Erwin Cahyadi, Yoanes Bandung, and Anton Wiguna. “Application of digital signage for tourism information and communication system”. In: 2012 7th International Conference on Telecommunication Systems, Services, and Applications (TSSA). IEEE. 2012, pp. 72–75.

[20] Holger Sievert and Christina Scholz. “Engaging employees in (at least partly) disengaged companies. Results of an interview survey within about 500 Ger- man corporations on the growing importance of digital engagement via internal social media”. In: Public relations review 43.5 (2017), pp. 894–903.

[21] Amar Sahay. Data Visualization, Volume I: Recent Trends and Applications Using Conventional and Big Data. Business Expert Press, 2016.

[22] Adobe XD. https://www.adobe.com/products/xd.html. Accessed: 2020-08-31.

[23] stackoverflow.blog. https://stackoverflow.blog/2019/12/17/the- top- 10- frameworks- and- what- tech- recruiters- need- to- know- about- them/.

Accessed: 2020-04-21.

[24] Angular.io. https://angular.io/. Accessed: 2020-04-21.

[25] Pluralsight.com. https://www.pluralsight.com/. Accessed: 2020-04-21.

[26] Visual Studio Code. https://en.wikipedia.org/wiki/Visual_Studio_Code.

Accessed: 2020-08-31.

[27] Jakob Nielsen. “Why You Only Need to Test with 5 Users”. In: (2000).

Digital dashboard as an information channel in office environments

U MEÅ U NIVERSITY

M

T

Digital dashboard as an information channel in office environments

Abstract

Sammanfattning

Acknowledgements

Contents

List of Figures

List of Tables

List of Abbreviations

Chapter 1

Introduction

1.1 Xlent

1.2 Objective

Chapter 2

Background

2.1 System used today

2.2 Goals with the new system

2.3 Design proposal from Xlent

Chapter 3

Theoretical Framework

3.1 User Experience

3.2 User Centered Design

3.3 Usability testing

3.4 Visual hierarchy

3.5 Digital signage

3.6 Workplace information and communication

3.7 Tools

Chapter 4

Method

4.1 First iteration

4.2 Second iteration

4.3 Third iteration

Chapter 5

Results

5.1 First iteration

5.2 Second iteration

5.3 Third iteration

Chapter 6

Discussion

6.1 Discussion

6.2 Research questions

Chapter 7

Conclusions

7.1 Conclusions

7.2 Future work

Appendix A

Interview with users

A.1 Introduction

A.2 Questions

Appendix B

Usability test

B.1 Instructions

B.2 Tasks

Bibliography

U ^MEÅ U ^NIVERSITY