Project Report | Project Usability and User Experience Assessment in Design (Part 1) by Yu Huang

RaceClocker.

A project about the usability and user experience of RaceClocker. Coaches Arnold Vermeeren Marina Wellink Stakeholder RaceClocker Cees van Dok Project team A1 Anna Smulders Maureen Sanchez de Boevé Shunqi Tang Shuyue Jin Yu Huang Team A1 | RaceClocker

April 30th 2021 | Design for Interaction | Delft University of Technology

UXAD 2021 | Phase one

Intro. Subtitle 1 2

“RaceClocker is a do-it-yourself tool for manual timing of sports races” as the official site of RaceClocker states [1]. This online timing tool operates without chips, transponders or stopwatches and is used for many types of sport races like rowing, cycling, running and many more. Tracking time happens via the race server cloud. It is not internet-speed dependent, therefore provides accurate timing of the participants. Timing is possible at the race’s start, end, and up to three split points. A race manager can send the link for timers to timekeepers on different points. These timers can run on a connected tablet, phone or laptop. RaceClocker’s goal is to provide coaches, race managers, and time keepers with accurate and high-quality race timing service.

In this project, our team - consisting of five Design for Interaction students from TU Delft - is researching and redesigning this race timing tool in order to improve its usability. The project is part of the course Usability and User eXperience Assessment in Design (UXAD) and is divided into two ten-week phases. In the first phase we evaluated the current product. And based on the evaluation results, we identified design opportunities and developed a possible redesign concept. This concept will be detailed, conceptualized and tested during the second phase. This report presents the results of phase one and an initial design concept. Figure 1 RaceClocker ‘s interface of a timer Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Table of contents. 4

Team A1 | RaceClocker

Intro

Table of contents

6 6 8 14 16 18 20 22 22 23 24

1. Describing RaceClocker Build-up Interface Context of use Storyboard Purpose and functions Intended operation Competitor analysis & positioning Market positioning Review analysis Competitor analysis

28 29 31 33 33 33 34 40 40 40 44

2. Evaluating RaceClocker Usage inspection User persona Interviews User Stakeholder Race experience Quick user test Research questions Set up Results and conclusions

46 47 48 49 49 50

3. Design Brief Problem statement The scope Design vision Design goal UI Design Criteria

52 52 54 56 58 60 62 64 67

4. Redesigning Ideation Concept one Concept two Concept three Concept four Concept five Evaluation Final concept direction

Next Steps

References

74 Appendices 74 1. Use Cases 80 2. Detailled flowchart 82 3. Review analysis 84 4. Interfaces competitors examples 86 5. First hand experience analysis 88 6. Persona’s 90 7. Interviews 92 8. Quick User Test Script 98 9. Overview of issues of user test 100 10. Plenary How To’s 102 11. Inspirational interfaces in other contexts 104 12. Individual concept directions and PMI cards Team A1 | RaceClocker

UXAD 2021 | Phase one

1. Describing RaceClocker. To get a good understanding of RaceClocker within its actual use, it is important to describe it in detail. In this chapter we describe the build-up of RaceClocker, its operation in the context of use, purpose and functions, its intended operation and a competitor analysis and market positioning.

RaceClocker Build-up 6

The first step within the analysis is creating an overview of what components and elements RaceClocker consists of. After that, the interface and structure of RaceClocker is explained. As mentioned in the introduction, RaceClocker is a web-browser based product. Figure 3 shows the build-up of RaceClocker as the core product, its extended products and symbiotic products.

Figure 2 Example of bib numbers

Core product RaceClocker is a Software as a Service (SaaS) - also known as cloud-based software. Instead of installing and maintaining software, users access it via the internet. Besides, it uses a cloud service to store and transfer time tracked data.

Extended products A 7 minutes instruction video on the RaceClocker homepage explains all the functions available. Symbiotic products An internet connection is necessary when using this product. It enables the transfer of real-time data. Since RaceClocker is a web-browser based product, it can be used on multiple devices with an internet connection, such as smartphone, tablet and laptop. A CSV based file of the participants list will be helpful when the race manager wants to upload the participants list into RaceClocker. Beside, a subscription is needed if users want to have more access to functions and organize a race with more than 10 participants. Sometimes, an external display is used for showing the countdown start time for sporters and sharing the live results with the audience. Since RaceClocker doesn’t include chips, bib or bow number labels are a way to recognise participants. A bib number is also known as competition number, it is printed on a label which can be attached to the participants’ clothes or gear (Figure 2). Team A1 | RaceClocker

Figure 3 The build-up of RaceClocker Team A1 | RaceClocker

UXAD 2021 | Phase one

Interface In order to get a better understanding of RaceClocker’s functions and elements, the web interface of RaceClocker is analysed. Within the website we identified two main pages, first of all Race details -enabling a race manager to create a race - and secondly the Timer dashboard - here one can find links and buttons directing the user to the actual timers needed during a race.

The header of the website includes the logo and navigation buttons, linking to a list of the previously created races and the personal account details (Figure 4). The dark blue area at the top of every page shows information about the race. Some navigation and functional buttons, such as editing participant details or navigating to the timer dashboard, are located here. All navigation buttons on this timerdashboard (Figure 5 on next page) include an icon and a description, some functional buttons only show an icon. Figure 6 on page 12 and 13 explains the different timing modes within the timer dashboard.

Figure 4 Analysis of a race’s main page Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Figure 5 Analysis of the timer dashboard Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

List mode Within this interface the user can see all the information of the participant in a list, with the timing buttons next to it and when timed the undo and reassign buttons appears.

Grid mode Within this interface the user can only see the bib number and splitpoint name on the timing buttons. They are presented as small buttons next to and below each other.

Two step mode Within this interface the user can first press the timing button and then assign the participant(s) that passed the timing point at this time. The user can only see the bibnumbers of the participants that are showed on the buttons.

Key pad mode Within this interface the user can fill in the participant’s bib number that is about to pass the timing point on the key pad. A orange button will appear which the user can press when the participants passes the timing point.

Figure 6 Overview of timing interfaces: List, Grid, Two-Step, Key Pad Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Figure 7 Ecosystem of RaceClocker

Context of use In this section, the larger ecosystem that RaceClocker fits into is shown. The different user types of RaceClocker, the variations between primary user interfaces, symbiotic products, and the overall environment RaceClocker operates in are elaborated. 14

We identified five user groups (Figure 8) in the ecosystem of RaceClocker. We divided these groups into direct and indirect users. Direct users of RaceClocker are race managers and timekeepers. Race managers create races and collect and enter all necessary details such as date, time, location and participant lists. Timekeepers register the exact time participants pass their start, finish or split point during the race. Indirect users are the sporters - the participants who join the race - and the audience viewing the race, in real life or remotely. RaceClocker offers real time result sharing, enabling participants and audience to see performances directly. Furthermore, sport coaches can also use RaceClocker as a tool to compare performances within training sessions.

As already stated in the introduction, RaceClocker can be used on laptop, tablet and smartphone. Figure 7 shows an overview of the primary user interfaces within each device. Symbiotic products, such as internet connection or BIB/ BOW numbers to recognize participants, are also relevant within the use of RaceClocker besides the primary products. Finally, the environment where RaceClocker is used, depends on the sports type and club’s preference. Before the race, RaceClocker is used by the race manager in the office, to create a race and import race information and details. During the race, RaceClocker is used by timekeepers to track participants, in both indoor and outdoor spaces and by race manager to keep an overvie of the race and share results.

Team A1 | RaceClocker

Figure 8 User groups of RaceClocker with the direct users highlighted in agua green (race managers and time keepers) and the indirect users in dark blue (coaches, participants and audiences). Team A1 | RaceClocker

UXAD 2021 | Phase one

Storyboard of use A storyboard (Figure 9) is created to get insights in the user journey of a race.

Figure 9 Storyboard of RaceCllocker Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Purpose and functions 18

In order to start researching the current user experience of RaceClocker it is important to know what actually the purpose of RaceClocker is and what specific functions it offers to its users. As mentioned in previous chapters, RaceClocker is a manual timing tool which can be used for several types of sports races. RaceClocker is offered in the form of a website and can be used on several devices, such as laptops, tablets and smartphones. The main purpose of RaceClocker is to allow small scale race events for fast and easy manual timing.

Within the use of RaceClocker we acknowledge two main phases, Figure 10 shows the functions RaceClocker offers within these two phases. the first phase includes the race preparation, in which a race manager enters all of the race details relevant within the race by creating the race on a laptop. Such as, the location, date and time, sport type, but also a participant list and details. After that, links to the timers will be shared with time keepers, to enable them to keep track of time during the race. The second phase is the actual race, here we know direct users and indirect users. The race manager is, in most cases, present at the start of the race. Using a laptop, the race manager is able to keep an overview of the race. The timer dashboard gives the race manager the ability to see to which participants a time has been assigned. Timekeepers are the ones in the field, who assign times to the racers possible in different timing settings. Finally the race manager is able to share an overview of live results, if needed on a large screen, in order to make sure that racers and audience can view results live and directly during and after the race.

Figure 10 Functions RaceClocker Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Intended operation 20

Within this part we describe what tasks one can actually perform when using RaceClocker, and most importantly what phases of action a user has to go through to complete tasks and what the goals of users are. Use cases and flow diagrams have been used to visualize the intended operation. As mentioned on the previous pages, we identified two main phases for the use of race clocker. Therefore, using RaceClocker and performing tasks can be seen as two different parts as its use exists within different environments.

For each phase an use case has been constituted to create insights in the intended user flow, which can be found in Appendix 1. Use case 1 shows the process of the first phase, creating a race. The first use case is divided into three subcases, 1A shows the process for creating a race with individual start, 1B for mass start and 1C for wave start. Use cases 2 show the process for phase 2, time keeping during the race. Again, this case is divided into subcases. 2A demonstrates assigning start times for individual races, 2B for mass start, 2C for wave start and finally 2D demonstrates the process of timing for split and finish points.

These use cases were used to create a flow diagram. The flow diagram shows in more detail in what way a user can navigate back and forth through the website (Appendix 2). A simplified version of this diagram can be found in Figure 11. Both user types, direct and indirect users, have different goals. The goal of the first direct user, race managers, is to make sure the process of the race is smooth and the results of the race are accurate and correct. For a timekeeper, the goal is to easily assign the correct time to the correct participant. Indirect users, racers and audience, have the goal to directly see and review results of the race, during and after. Figure 11 General overview of the three phases of organising a race

Team A1 | RaceClocker

UXAD 2021 | Phase one

Competitor analysis & positioning We looked into RaceClocker’s and its competitors’ position in the market. We compared data such as market positioning, user reviews and interfaces of competitors to gather valuable insights leading us to possible design opportunities. 22

Market positioning

Review analysis

RaceClocker is a one man business and was started and developed 8 years ago, initially as a hobby. The owner and builder spends about three weeks a year improving this online timing platform. RaceClocker has no other products or applications. It is usually used in various scale races for small clubs or events. And it also provides highly efficient timing process for many sports on water or snow or at remote locations. RaceClocker has 3000 active users and has been used for more than 10.000 events. These users and events are located all around the world (Figure 12). Compared to other online timing platforms, with a whole team behind it, RaceClocker’s position in the market is quite leading.

The user experiences are researched by comparing and evaluating different reviews left on Facebook, Google or in the SurveyMonkey [2] conducted by RaceClocker itself.

Figure 12 The users of RaceClocker displayed on a world map

The scope of our observation and researcher are based on its market positioning including the small clubs’ races and the various races which take place in remote locations. Team A1 | RaceClocker

Since RaceClocker is really open to suggestions and improvements, a lot of reviews are positive in general and have some user group (Figure 8) specific suggestions. RaceClocker constantly uses the feedback to improve the platform and communicates with its users. See Figure 13 for two examples of reviews, the complete review analysis can be found in Appendix 3. The same goes for the SurveyMonkey that RaceClocker distributes to active users in its newsletter, this all results in valuable and useful tips to further improve it.

Figure 13 Examples of RaceClocker reviews Team A1 | RaceClocker

UXAD 2021 | Phase one

Competitor analysis

In order to get an overview of RaceClocker’s competitors, we created an account on the three most similar timing platforms and simulated a race. The three main competitors are Webscorer, RaceSplitter and RaceGorilla (Figure 14). 24

In Figure 15, an overview of this competitor analysis is shown with some general data. Comparing this data has led to many insights that are not necessarily valuable within the scope of our project. However, it was very interesting to try out the interfaces of the different applications. An example is shown in Figure 16 on the next page and Appendix 4. At first sight, they all looked more complicated and kind of out-dated in comparison to RaceClocker’s application. Researching the reviews and interactions of the apps, we concluded that RaceClocker is actually doing well in this niche market. It has a user-friendly interface, looks professional and the communication with the developer is fast and clear. However, the learning curve is still not optimal and the user does not feel confident about timing a race.

Figure 14 ^ RaceClocker and its main competitors ^ Figure 15 > Competitor analysis overview >

Team A1 | RaceClocker

UXAD 2021 | Phase one

Figure 16 Interfaces of RaceClocker and its competitors (left to right: RaceClocker, Webscorer, RaceSpliter, RaceGorilla) Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

I can’t find the functions and understand the structure quickly.

2. Evaluating RaceClocker.

After describing the product in use, its interfaces, intended operation and other details we can start to evaluate the product. In this chapter we will research and evaluate strengths and weaknesses in terms of usability and user experience. A first hand experience, personas, storyboards, user interviews, participating in a real race and user tests have been executed in order to gain deeper understanding in RaceClocker.

Some functions seems for professional users.

Usage inspection

Figure 17 Quotes about the hierarchy

First hand experience

Non logical hierarchy

To get a first impression of RaceClocker, we explore the RaceClocker as firsttime users without setting tasks. Each member of the team went through a hands-on experience with the website, attempting to find issues as designers. An overview of this analysis can be found in Appendix 5. To get deeper insights, we clustered the problems we found into different types hierarchy, interaction, interface - and for each type, some insights and findings are illustrated.

Team A1 | RaceClocker

At first sight it was quite hard to have a clear and fast understanding of the main functions and the structure. Besides that, we missed some basic knowledge about sport races in general. Understanding organisational parts for races will most likely help us to understand the functions better. See examples of quotes in Figure 17. • •

Lack of prioritization in product functions and structure Misunderstanding of some basic functions

Team A1 | RaceClocker

Interaction

There are different levels of interaction problems found within the interface of RaceClocker. See examples of quotes in Figure 18. • • • •

Some functions and buttons are not well organised within the interface The “input” interaction is confusing The “timekeeper” functions are chaotic Lack of feedback from actions

UXAD 2021 | Phase one

User persona’s

Some functions are all over the place, they could be grouped.

'Hide' is at the same visual level as split/intervals. That doesn't make sense to me and causes confusion.

I don’t receive the feedback of starting.

Based on previous research activities two user personas (figure 20 and 21) are created in order to sketch a clear idea of who the direct users of RaceClocker are. The detailled persona’s can be found in Appendix 6. The user persona’s are used to further develop our design direction and to test within different user scenario’s of RaceClocker.

Figure 20 Persona Lieke

Maybe some icons can be added.

Figure 19 Quotes about the interface

Some functions are hard for us to learn.

Interface

The entire website is based on text and some functions are hard to use due to the lack of usecues and indicators. See examples of quotes in Figure 19. •

There are a lot of possible ways to input necessary information.

•

Too much text was used to communicate with the user Usecues and indicators are not used coherently

Figure 18 Quotes about the Interaction

Team A1 | RaceClocker

UXAD 2021 | Phase one

Interviews Figure 21 Persona David

User

In order to verify our product analysis and gain new insights about the usability of RaceClocker and the routines of organizing a race, we interviewed a regular user of RaceClocker, the chairwoman of Asser Rowing Club. The main insights are shown below. The complete interview notes can be found in Appendix 7. According to the interviewee, timekeepers in her rowing club do not have device preference for timing. The first time timekeepers usually have time to explore all available functions (Figure 6) before the race starts. The list view is the most preferred time mode, because more participant information is visible.

The interviewee likes this product because it is very useful and convenient. It considers a lot of details in a sports race, such as the countdown start time, wave start option and handicap factors. Besides, it can be used on every timekeeper’s phone, which makes the use of RaceClocker easily accessible. However, according to this regular user, there is still room for improvement. RaceClocker is not flexible enough. For instance, the list of participants has formatting restrictions. There is also a lack of data linkage. When changes are made during the race, the organizer needs to communicate with timekeepers via other platforms. Moreover, the session timeout is limiting. Users get automatically logged out after 5 minutes of inactivity. These findings lead to our first assumptions about the context. However, these need to be further verified with other research. • The race manager can also be a timekeeper. • Timekeepers do not have preference for devices. • Timekeepers usually have time to explore RaceClocker before the race.

Team A1 | RaceClocker

Stakeholder

On 16th February, we had a meeting with Cees van Dok, the creator of RaceClocker to gain a deeper understanding of RaceClocker from the founder’s perspective. These insights were used to describe the RaceClocker (Chapter 1) and some new insights were identified after the interview (Appendix 7) to further evaluate RaceClocker.

UXAD 2021 | Phase one

Race experience

UXAD 2021 | Phase one

Figure 22 Photo’s of the DDS race

Luckily we had the chance to experience a real race and cooperate with race organizers while observing a rowing race process (Figure 22). Two rowing races from DDS, a rowing association in Delft, were observed. One of us experienced the process of being a timekeeper and using RaceClocker in a real scenario. There were three starting laps of 10 participants, varying from single to four-men boats.

Figure 23 Visualization of interaction required while timing

Based on the experience and the journey map, there are several insights that we found. The race manager explained that timekeepers prefer to use a smartphone when recording times. Furthermore the smartphone will be held ‘landscape’ as this enlarges the buttons, making exact timing easier. Preferably two timekeepers are present at one split point, one timekeeper will shout out loud the exact moment the boat passes the split point, enabling the other timekeeper to look at the phone and press the button right away. We were advised to zoom into one button as much as possible, making clicking easier and preventing ourselves from making mistakes.

Based on our race experience, a journey map was made, shown on the next page in Figure 24, to analyse the process and identify the pain points.

Team A1 | RaceClocker

As this race was a small-scale event, all timekeepers knew participants personally, in this case the use of BOW numbers was not necessary. Using the phone for timing is preferred, however it is somewhat limiting as communication with race managers or other timekeepers is not possible. Besides the missing ability to communicate, timekeepers also get easily distracted as personal phone notifications such as messages or calls will interfere with the use of RaceClocker. When tracking times a form of feedback whether time has been tracked is limited.

Team A1 | RaceClocker

We noticed that within the process of time-keeping, there are 3 dimensions that timekeepers need to pay attention to, visualized with the arrows in Figure 23. At the specific moment of timing, a timekeeper has to pay attention to the boat coming (physical), focus on the phone (digital) to make sure one presses the right button and keep paying attention to press at the exact moment the boat passes the timing point. Therefore it is important to have control as a timekeeper over these three dimensions in both the physical and digital world intuitively. It is necessary to input information in the system with confident.

UXAD 2021 | Phase one

Figure 24 Journey map of race experience (continues on next page) Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Team A1 | RaceClocker

UXAD 2021 | Phase one

Quick user test The main goal of holding our user test is to obtain a more thorough understanding of the product regarding usability (the effectiveness, efficiency, and satisfaction of achieving specified goals) to identify and prioritize issues and determine design opportunities to improve the current design.

Research questions Patterns of Use How do users interact with RaceClocker and the phases users go through when completing specific tasks? User Performance How well and how easily do users achieve their goals by using the product? 40

User Experience How is the overall user experience of the current design? Issues What are the usage strengths or weaknesses of current design? Sources What caused the aforementioned issues? Severity of Problems How severe (how often/how badly/ how long/external effects) are the problems?

Set up

We recruited 6 participants for our user tests. Three of them are familiar with sport races and have some basic knowledge about timing. The user test consists of two main tasks, each of which has several sub-tasks. (Please refer to Appendix 8 for detailed literal instructions.) Both tasks are based on the use cases (Appendix 1) identified in chapter 1. Task one is focussed on the creation and preparation of the race, while task two is a simulation of the race itself (Figure 26). A detailed scenario is written and read out loud to ensure that the execution of each test is similar. The schematic process diagram illustrates the process of preparation, execution and analysis for the user tests (Figure 28 on the next page). Roles We assign different responsibilities to different roles such as facilitators, moderators, and observers during the tests. We use lookback.io for remote observation. Settings We use a controlled setting to conduct the test. Participants use either a laptop or a mobile phone.

We deliberately randomize the task sequence and change the type of device to perform the tasks. We assume that race managers will only use laptops in preparation of the race, therefore task 1 will always be performed on a laptop (Figure 25). A visual simulation of the race is used for task two (Figure 27). Methods Various methods are used to collect qualitative and quantitative data. We use observation, thinking aloud, debriefing interviews to collect qualitative data. For quantitative data, we use a SMEQ, Subjective Mental Effort Questionnaire: a single question with a rating scale from zero to 150 which stands for the difficulty level, and participants are asked to rate the difficulty of each task. Attrakdiff (An instrument for measuring the attractiveness of an interactive product) and SUS (Software Usability Scale: a questionnaire that is used to evaluate the usability of products and services) are used after the whole user test to measure perception satisfaction. Additionally, the amount of wrong turns for each task are calculated.

41 Figure 25 Schematic process diagram

Figure 26 Description of the tasks Team A1 | RaceClocker

Figure 27 Model to simulate a race Team A1 | RaceClocker

UXAD 2021 | Phase one

Figure 28 Overview of quick user test Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Results and conclusions

After testing, some meaningful quotes were highlighted as important references (Figure 30).

User Performance According to our observations, we found that the most wrong turns happen in Task 2A (10 times) - start of the race, record start time & countdown timer, followed by Task 1B (7 times) - add a participant list, then followed by Task 2C (3 times) - record the finish time.

User Experience We synthesized the results of the SMEQ into a line graph (Figure 29). In this graph, we rate the difficulty level according to the scores. The score from 0 to 50 is categorized as easy, from 50 to 100 as medium, and from 100 to 150 as difficult. We can see from the graph that most people considered task 1 to be simple to complete, whereas task 2 differs in difficulty from person to person.

Figure 29 Smeq scale graph

UXAD 2021 | Phase one

With the above summary of issues in mind, we came to the conclusion that task 2 has the most issues and, as a result, needs more effort in terms of redesign. Issues All issues we spotted were summarized into an overview of issues (Appendix 9).

Sources We analyzed the issues and identified the sources. Please refer to the next part (problem statements) for more information.

Figure 30 Quotes user test participants Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Problem statement Confusing hierarchy In the current situation, the hierarchy of the entire website is not straightforward, which makes users frustrated when performing tasks, because they cannot easily locate the desired functions.

3. Design brief. All of the previous research insights and findings within the description and evaluation of RaceClocker are summarized into a design brief. The design brief functions as a clear direction for the redesign process. The brief consists of a problem statement, design vision and design criteria creating a clear direction towards the redesign process.

Complicated use flow Many tasks like managing races and time keeping, take multiple steps to finish. RaceClocker’s complicated usage flow makes users get confused: users easily get lost and hop to another page unnecessarily. It is critical to improve the efficiency of the use flow. Lack of clear feedback Users do not always get clear and direct feedback after clicking a button or an icon, which causes a feeling of insecurity and confusion. It is desirable to receive more feedback on whether a mission has been accomplished successfully. Lack of clarity in icons and buttons The meaning of some buttons results in misunderstanding or confusion. Users wrongly click some buttons. Part of the website does not conform to Web Accessibility Guidelines. For instance, the visual representations of different statuses of some buttons are not so clear when being used on different devices. Difficult operation on the product The physical interaction with this product is not easy. Timekeepers need to pay attention to the states of the participants in the real world and press the time button at the exact right moment the participant crosses the line. It is difficult to handle eye-hand coordination while using the product.

Team A1 | RaceClocker

UXAD 2021 | Phase one

The scope The scope states the focus for redesigning RaceClocker. In view of the severity of the problems and the results they might cause, we propose to divide the scope into three categories, the primary, extended and passive spaces for intervention are illustrated in Figure 31. The issues we identified through previous research are categorized below.

Primary Given that the time keeping part has the most impact on the race and once this part goes wrong the consequence will be severe, we deem the timer dashboard and race timing the core features we are going to improve. Extended Considering the time keeping function can not be seperate from the whole race management, we consider the race settings, start list creation, and live results as the secondary features we need to look into.

Passive In light of the results from our previous research (and the learning objectives of this course), we decide that the feature, user account, should remain untouched. And we won’t specifically designed for a certain type of device (eg. specially design for the laptop or mobile), because all issues coming from cross-device operation reside in technical field (eg. non-responsive website).

Design vision “ We want to make frequent users feel in control when using RaceClocker. Time recording during a race should be intuitive, efficient and fast. Besides that, users should feel confident when using and navigating through the functions RaceClocker offers. “

Figure 31 Scope

PRIMARY

EXTENDED

PASSIVE

The parts that we regard as essential for intervention in order to achieve our design goal

The parts that might need to change to support the improvements on the essential elements

The parts that are not relevant to user experience and preferably remain untouched

Timer Dashboard for race management Send timer links to timekeepers Monitor live timing Corrections from backup Jury overrides

Race settings Start type options Supported sports and race distance Split points Race duplication Start list creation Race list editor Import start list from Excel (CSV) Handicap factors Categories Download start list Live Results Sort by Column Intervals or Splits Grouping Auto scroll and refresh Share or download results

User account Update name and email address Pricing Delete account

Race timing RaceClock Timekeeping on any device Timing modes Start Timing modes finish and splits Internet connection History

Team A1 | RaceClocker

Design goal We want to use RaceClocker to bridge the gap between the physical and digital world for timekeepers.

Team A1 | RaceClocker

UXAD 2021 | Phase one

UI Design criteria Based on our problem statements, the following criteria are formulated. These form a guideline within the redesign process for improving the user experience and interaction with RaceClocker.

Hierarchy

Use flow

Feedback

Information of buttons

Operations

•

The interface should be simple and clear. Users clearly know in which status of the process flow they are.

• • •

The layout of the interface should comply with conventional using habits, which means it should be logical and intuitive for users. The interface system should be flexible and adjusted to the preference of the user. The amount of functions for the timekeepers needs to be decreased. The right information needs to be given at the right time.

Team A1 | RaceClocker

Users should automatically get instant and correct feedback after each action.

• •

Users can finish their tasks with RaceClocker without wrong attempts. The meaning of the buttons is understandable for users without resorting to external sources. The interface of the website should be readable and inclusive for people with visual impairment.

•

The product enables users to time the participants without having hand-eye coordination problems. Users are able to undo the wrong action easily.

Team A1 | RaceClocker

UXAD 2021 | Phase one

4. Redesigning.

Physical

Feedback

Efficiency

The design brief functions as a guideline to start the redesign process of RaceClocker. A first ideation session for possible design solutions based on the criteria was done. With the criteria in mind each of us individually created concepts that were discussed, evaluated and later combined into a concept direction.

Ideation In order to have a smooth start with developing our own concepts, we first began with some plenary activities to get inspired. We started with ideating with a brainstorm for several How-Tos based on the five identified problems within the design brief (Appendix 10). We also created a ‘living frame’ on our Miro board [4] to gather inspirational examples (Appendix 11). Some examples of existing interfaces can be found in Figure 32. Again we used the five problem statements as a starting point.

• • • • •

How to improve the hierarchy and navigation How to achieve efficiency How to use feedback to improve the use How to make the buttons more communicative and understandable How to use physical movements and interactions in order to improve the product (physical) operation

With these five problem statements and several inspirational starting points, we individually developed concepts. On the following pages they are shortly described and visualised.

Button language

Navigation Figure 32 Examples of inspiring interfaces of other contexts

Team A1 | RaceClocker

UXAD 2021 | Phase one

Concept one

Quick mode switching Users can mute all notifications just by clicking one button on the home screen.

Alena (Yu)

I started from the analysis of observations from real races and clustered all of those needs of timekeepers into three categories which are highlighted in different colors on the second row of Figure 33. • • •

Information management Convenient operation (various types of input) Mental support (various types output as feedback)

To meet those needs, I intended to focus on devising embodied interactions (other than digital interactions, such as gesture controls). The post-its on the third row show some corresponding design solutions. Specifically speaking, there are 9 interactions concepts which can be applied to different scenarios:

1) Quick mode switching by one click 2) Use volume button as an input 3) Live chat box 4) Turning the direction of phone as a trigger 5) Vibration feedback 6) Shake to undo 7) ProbUI [5]

Volume button Users can press the volume button to record time besides using the digital button. When the phone is held vertically, pressing the volume button will also activate the camera fto take a photo as a backup when the time is pressing.

Turning the direction to switch modes Users can turn the phone from portrait to landscape to mute or switch between list and grid mode.

Live chatbox & synchronized data Users can use the floating chat box to keep in touch with other timekeepers to be informed of the progress of the race. Data on different terminal devices is shared and synchronized.

Vibration feedback To ensure the users that certain task has been accomplished, vibration will be used as a haptic feedback. Shake to undo To quickly undo, users can shake the phone and redo.

ProbUI ProbUI is a mobile touch GUI framework, implemented as an Android library. It helps developers to handle uncertain input and implement feedback and GUI adaptations. ProbUI replaces the usual static target models (bounding boxes) with probabilistic gestures ("bounding behaviours") [4].

Voice-activated recording The time can also be recorded automatically when detecting certain sounds (shouts).

Figure 33 From observations to solutions Team A1 | RaceClocker

Team A1 | RaceClocker

Figure 34 Explanation concept Alena

UXAD 2021 | Phase one

Concept two Anna The first step within creating concepts was to clearly visualize what types of buttons and functions were available. As mentioned before we clearly see that buttons and functions are not well organized (Figure 35 & 36), there is no clear structure and hierarchy. Timekeepers get a much cleaner interface, a lot of information currently takes in a lot of space which is not necessarily important. Therefore more focus will be shown to the buttons needed to track times. Different pages will be limited only to a grid and list interface (Figure 39 and 40). This concept allows for prepared timing, one can first select a participant and then assign a connected time or the other way around (Figure 38). First time, and then assign a participant to this time. Also two step timing is possible within the same interface through the use of a long press.

Figure 38 Two step timing

56 Figure 35 Timer dashboard

Figure 39 Start timer

Figure 36Start timer

Within the race preparation hierarchy was missing, most importantly a navigation bar is added which helps to give the user overview within their use flow (Figure 37). When uploading participant lists, it is important that the possible functions are clearly visible. Also feedback with color coding is used in order to communicate and visualize the race process during the race (Figure 37).

Figure 37 Concept timer dashboard Team A1 | RaceClocker

Team A1 | RaceClocker

Figure 40 Split timer

UXAD 2021 | Phase one

Concept three

Dimensions

Maureen

When voluntarily timing a rowing race, my hardest struggle was to divide my focus on three dimensions at a time (Figure 43). Therefore, a simple but effective solution is to provide the time keeper two ways of timing. First pressing the time, then assigning the right participant and the other way around. This way of timing, together with a larger timing button and a simple and clean screen, is the focus of this concept.

Hierachy

UXAD 2021 | Phase one

Within my concept ideation I started with defining and structuring the current elements of RaceClocker’s interface. Figure 41 shows three categories in the current hierarchy: information (blue), functions (red) and navigation (yellow). They are all over the place in each different interface, not ordered logically which makes it more difficult for the user to find the right element. In my concept I structured these three categories and arranged them in different ways with the same colour codes as mentioned before (Figure 42).

Figure 41 Current hierarchy of RaceClocker

Figure 43 Race Experience with dimension y (which boat is approaching), dimension z (boat is passing the line) and dimension x (the right digital timing button needs to be pressed)

< Figure 42 Organising the hierachy of RaceClocker Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Concept four Saki (Shunqi) The timekeeping page is redesigned in a more visual way. The participants are shown as bubbles. A noticeable “finish line” distinguishes the finished and unfinished participants.

Welcome page

Data linkage

When the timekeepers open the link, they will first get an overview of the race info, which can help them check if they are in the right place.

The timing data of split point 1 will be transferred to the timekeeper at the next split point. In other words, participants are not ordered by their bib numbers, but by their passing time at the previous timing point.

Prioritization 60

The timekeeper needs different information at different stages. For example, bib number is the only information needed for recognising the approaching participant. By tapping the bubble, it will get bigger and move to the front of the list. Then the name of the participant will also be shown on that bubble for double checking if this is the right participant. In this way, the approaching participants are prioritized. When the participants are passing by, the time can be registered by tapping their representative bubbles. After that, the bubble will move over the finish line. And it will include more information, such as the passing time.

Figure 44 Interfaces of concept

Gesture control

A lot of conventional gesture controls are added to prevent accidental touches. They are explained in Figure 44.

Team A1 | RaceClocker

UXAD 2021 | Phase one

Concept five

Based on the interaction vision and architecture, there are two design points that I focus on:

Shuyue Based on the insights from the observation and the aim to connect the digital and physical world, I developed my design according to the different steps of the races and select two of the points which are most significant in the real race. FIrst, I set the design goal and interaction vision (Figure 45) and reframe the architecture (Figure 46) of the RaceCocker to have a more clear and consistent hierachy.

UXAD 2021 | Phase one

1. The different race status

2. Recording

Color change Different colours represent virous status of the race to give managers and time keepers obvious reminders.

Record for one participant When there are only one participant approaching the end point, users can record by two steps.

Figure 45 Design goal & Interaction vision

1. When the participant is close, select the participant in advance

262 Side bar Use a side bar to show the process of the race and help keepers know it efficiently and intuitively.

Team A1 | RaceClocker

3. App will select the next participant

Record for multiple participant When there are multiple participant arriving at the same time, these groups of buttons can be used to fit the various situations.

1. When observing two participants , select them in the same time

Figure 46 Information frame

2. Record the time without seeing the phone.Phone will vibrate if the time is recorded

Team A1 | RaceClocker

2a. If they arrive at the same time, pressing volumn button to record the time.

2b. If they arrive in different time, pressing volumn button and lock screen button.

UXAD 2021 | Phase one

Evaluation All of the individual concepts were discussed and introduced to one another. While doing so, quick notes were taken. Findings and opportunities were discussed while keeping the design brief and scope in mind. Some incubation time was planned to process all insights. The PMI method was used to evaluate all concept directions. One by one, we noted down plusses, minuses and interesting aspects on cards in the Miro board (Figure 47). All of these cards were a starting point to cluster all of the promising cards based on our scope (See Appendix 12 for all individual concept cards). We organized the ideas into our primary and extended spaces (Y-axis). Some really interesting but dubious ideas were labeled as to be tested. Horizontally we clustered horizontally the PMI cards in three categories: information, function and navigation (Figure 49). These three categories were based on the previously defined inconvenience within the current interface (Figure 48).

Figure 47 Example of PMI scheme in Miro [4]

Figure 48 Categories within RaceClocker’s interface Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Final concept direction All of the previously introduced concepts were evaluated and clustered as mentioned in the previous section (Redesigning). We started to generate all these insights into a new concept. While creating this concept we step by step used the PMI cards to create aspects of the concept. The concepts are explained and elaborated upon according to the five problem statements identified in the design brief (Chapter 3 Design Brief).

Confusing hierarchy

Within the hierarchy issue we categorized the UI elements into three categories: navigation, function and information, as identified in the previous chapter. First of all, a fixed navigation bar will be used to improve the hierarchy. We will clearly tell the user in which part of the website they are by using color changes within this fixed navigation bar. Furthermore, in the navigation bar buttons and information will be ordered logically based on the category they belong to. We deliberately collect some of the functions into a menu button to make the main interface simple and clear.

Our design goal is to use RaceClocker to bridge the gap between the physical and digital world for timekeepers. We want timekeepers to feel confident while using RaceClocker as a timing tool. To achieve this goal, we generate our concepts according to the five problem statements.

X 1

Fixed navigation bar

Buttons and information will be ordered logically

Figure 49 Clustering the cards of the PMI schemes from each concept in Miro [4] Team A1 | RaceClocker

Team A1 | RaceClocker

Menu button

UXAD 2021 | Phase one

TRACK TIME

first selecting a participant then assigning time to a participant then assigning the correct time first registering the time

Complicated use flow A welcome page will be used in order to communicate necessary details to the timekeeper. In this way we want to welcome the timekeeper and make them feel confident. When improving the use flow it is important to change some functions and move them to race preparation. Because some pre-settings can be determined by the race manager, if necessary a timekeeper can also adjust these settings to personal preferences.

Swipe left or right to undo or reassign a tim

Welcome page e

There are two ways for the timekeepers to track time: (1) first registering the time and then assigning time to a participant or (2) first selecting a participant and then assigning the correct time. This enables time keepers to prepare themselves for timing when a participant is approaching. Pre-selecting a participant gives them the ability to time at the exact moment as the participant passes the line without looking at the screen. When multiple participants are approaching at the same time, the timekeeper can first register the time and then assign the time to the right participant. In order to prevent the timekeeper from mistakes, functions for the participants who have done will disappear after recording time, buttons will not be clickable anymore. If a mistake has been made, the timekeeper can swipe left or right to undo or reassign a time. Team A1 | RaceClocker

Team A1 | RaceClocker

UXAD 2021 | Phase one

Different colors are used to represent the various status of the race

Sidebar: Indicators and notes

Vibration or sound feedback

Lack of clarity in icons and buttons

Lack of clear feedback In order to make the timekeeper feel more confident, we provide various types of feedback. In terms of the progress of race, some indicators and notes to the participants can be used to enable the timekeeper to get quick information from other managers. Besides, different colors are used to represent the various status of the race.

Vibration or sound feedback is also used to reassure the timekeepers that the action has been performed successfully with no need to check the screen. In this way, timekeepers can focus on the physical world.

Team A1 | RaceClocker

Buttons need to have enough color contrast so that the user can distinguish them easily. The time button should be clear and large enough for the timekeepers to prevent accidental wrong clicks on other buttons.

Team A1 | RaceClocker

Clear and large

UXAD 2021 | Phase one

Next steps. We will continue on detailing the redesign for RaceClocker within phase 2. Activities such as more conceptualization, peer reviews and user testing will help us to further detail the interface. 1

Gestures

Volume button

References.

Difficult operation on the product Based on our categorization of the information that timekeepers need to pay attention to, we attempt to improve the experience of inputting information from the physical world for timekeepers. To smoothen this process, we intend to integrate gesture design into our concept, for instance, longer press for more information. We also want to create our own set of ProbUI to provide a more intuitive operation experience.

ProbUI 4

Besides, we intend to use more than digital buttons as the input. For example, timekeepers can press the volume button for recording, turning the phone into landscape direction can trigger mode switching (eg. switching between the grid and list mode), etc. Team A1 | RaceClocker

[1]

Official website RaceClocker https://www.raceclocker.com

[2]

SurveyMonkey from users of RaceClocker https://nl.surveymonkey.com/results/SM-QCG33X2K9/

[3]

Miro board 1 of team A1 https://miro.com/app/board/o9J_lUyEEbA=/

[4]

Miro board 2 of team A1 https://miro.com/app/board/o9J_lQDFPtw=/v

[5]

Prob UI http://www.medien.ifi.lmu.de/probui/#!/intro

[6]

Daniel Buschek and Florian Alt. ProbUI: Generalising Touch Target Representations to Enable Declarative Gesture Definition for Probabilistic GUIs. In CHI ‘17: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. Denver, CO,

Landscape direction

Team A1 | RaceClocker

UXAD 2021 | Phase one

Appendices. 1. Use Cases

Use case 1 >

Alternative flow

Team A1 | RaceClocker

UXAD 2021 | Phase one

Team A1 | RaceClocker

UXAD 2021 | Phase one

Use case 2

Team A1 | RaceClocker

UXAD 2021 | Phase one

Yes

Already an account?

My Races page

Setting up a race or managing an prepared race?

Setting up

Creating a new race

Filling in race details

Race details

What kind of start type?

Editing start list

Mass

Start list

Turn on desired amount of participant details

Wave

Start list

Adding wave names

Edit Are all race details and participant information correct?

Race overview

Yes

Add participants manually

Go to the race

Do you have a CSV file of the participants?

Upload CSV file

Prepared race

Edit race details Name / mail adress / password

Category / Bib or Bow number / club / handicap / name

Individual

Creating an account

Category / Bib or Bow number / club / handicap / name

Participants list correct?

Participant page

Yes

Is the amount of participants details in the file the same as selected in the start list?

Go to webbrowser

Organising race with RaceClocker

Race name / date / time / sport type / distance / split points / location

2. Detailled Flow chart

Mail adress / password

Edit participant list

Timing race with RaceClocker

Go to timer dashboard

Do you want to share the timers with timekeepers?

Timer Dashboard

Open start timer

Timer start

Do you want to set a countdowntimer?

Open split timer

Timer split

Select preferred timer

Edit interval between starts

Open finish timer

Timer finish

Click start for corresponding participant

Click start

Yes

Open CountDown

Timer Dashboard

Yes

Link

Do you want to send them via e-mail or copy a link?

List/grid/keypad

E-mail

Is the race finished?

Copy link

Yes

Send E-mail

Download excel Completed race with RaceClocker Share public link

Team A1 | RaceClocker

Select automatic refreshing or scroll function

Yes

Do you want to share live results?

Results page

Race overview

Team A1 | RaceClocker

Sharing race results with RaceClocker

UXAD 2021 | Phase one

3. Review analysis WebScorer

RaceClocker

Competitors

RaceSplitter

Team A1 | RaceClocker

RaceGorilla has no reviews except for 5 star-rates.

Team A1 | RaceClocker

UXAD 2021 | Phase one

4. Interfaces competitors examples

Team A1 | RaceClocker

UXAD 2021 | Phase one

5. First hand experience analysis

Team A1 | RaceClocker

UXAD 2021 | Phase one

6. Persona’s

Team A1 | RaceClocker

UXAD 2021 | Phase one

7. Interviews

Interviewing chairwoman of Asser Rowing Club

Insights stakeholder RaceClocker Goal and Positioning • RaceClocker serves as an alternative manual timing tool in lieu of chip timing and stopwatches. • RaceClocker is designed to facilitate a very broad range of races in terms of types and scales. • RaceClocker has multiple users, which include the main users (race organizers, time keepers) and marginal users (racers, audience, and friends or family of the racers). 90

Market Landscape • RaceClocker targets a niche market. • RaceClocker has 3 main competitors, including Webscorer, Racesplitter, and RaceGorilla. Dos and Don’ts • The founder is eager to get more critical feedbacks • For redesign, we should focus on crucial and prevalent needs first. • We should try to improve the usability for unprofessional users. • We should keep the recognizable visual style. • Some of the terms are used differently in different places. They should be well-defined to avoid confusion. • We should avoid the clumsy click-here-and-that type of first use guidance.

Introduction Thank you for participating in our research study. My name is [...]. I’m here to learn about how a rowing race is organised and how you, as a sport club manager, think about RaceClocker. The whole session will take about 30-40 minutes. And I also want to ask: Are you okay with recording this session? Interview Would you like to briefly introduce yourself? Asser rowing club, coaching junior Could you please tell us how a rowing race is organised? Two types: Internal competitions: individual start, 15s after each other, trial, side by side, 2 lanes, 2 boats starting, wave start, also with competitor What are the things you really need to pay attention to during a race? Number the boat, information in the RaceClocker system, participant list, people’s awareness and stick to it

And at which moments do you use RaceClocker? Make a schedule before, and put everything in RaceClocker in the evening before the race Have you ever been the timekeeper during a race? Yes, I have. At the most time we have multiple timekeepers. I’m also the one who collects data. There are different kinds of timing, which one do you prefer the most? List, because it shows more information (name and club of the participant). The first time that you tried RaceClocker, how did you experience that? Was it very easy to learn? Did you watch the introduction video on the RaceClocker website? Easy to learn, didn’t watch the video, explored by herself. What functions/features of RaceClocker do you like the most? And Why? It has Handicap, wave start, everyone can use it on the phone. What functions/features of RaceClocker do you dislike the most? Or do you think that they can be better? And Why? Categories, no much choice, participants list (want to change the category, need to be flexible in naming) Upload participants via csv, the example is different from the default category and need to be adapted Do you like the current style/color palette of RaceClocker? And Why? It’s fine, easy to recognise. not the most important, functionality is more important. Do you prefer to use the smartphone or tablet during the timekeeping? (Which devices are used mostly for timekeeping) ipad/phone, no preference Other suggestions If there are changes to participants, like switching the wave, she needs to send whatsapp messages to every timekeeper and tell them to fresh the browser. Because the state in all devices is not auto-refreshing. If she opened another app or webpage with the phone or tablet, she needs to log in again every time. The waiting time is too short, 5 minutes no action = logged out. Also the RaceClock logo on left-top navigates you to the homepage, and it causes the log out. Auto stayed login is better Want to have flexible categories

Team A1 | RaceClocker

UXAD 2021 | Phase one

8. Quick User Test Script

Team A1 | RaceClocker

UXAD 2021 | Phase one

Team A1 | RaceClocker

UXAD 2021 | Phase one

Team A1 | RaceClocker

UXAD 2021 | Phase one

9. Overview of issues of user test

Team A1 | RaceClocker

UXAD 2021 | Phase one

10. Plenary how to’s

100

101

Team A1 | RaceClocker

UXAD 2021 | Phase one

11. Inspirational interfaces in other contexts.

102

103

Team A1 | RaceClocker

UXAD 2021 | Phase one

12. Individual concept directions and PMI cards

104

105

Team A1 | RaceClocker

UXAD 2021 | Phase one

106

Team A1 | RaceClocker

Project Report | Project Usability and User Experience Assessment in Design (Part 1)

Articles inside

Interviews

Inspirational interfaces in other contexts

First hand experience analysis

Quick User Test Script

Plenary How To’s