20five App
Every January, the volleyball team of the TSV Unterhaching organizes a huge tournament. During a massive event spanning two days, 32 teams compete against each other on six courts in two gyms.
20five was developed to guide participants and organizers through the weekend. It provides the athletes with information about where and when their next game will take place while keeping every user up-to-date with the latest scores in real time.
Users and their problems
We discovered different types of users. Each one of them has a specific set of use-cases and problems.
- Tight schedule
- Short amount of time for warm-ups
- When and where is my next game?
- Manage time between matches
- Need to have time for warm-up before matches
- Want to have fun
- Additional responsibility besides own matches
- Necessary duty
- Uncertainty about which game to umpire
- Adapt to new way of scoring
- When and where is the game to umpire?
- Want to have a easy time
- Avoid errors
- Responsible for the tournament's flow
- Keep a tight schedule
- Not able to overlook every game at the same time
- Dependent on the reliability of teams and referees
- Delegate refereeing
- Calculate play-off matches
- React to spontaneous changes in the tournament flow
- Wants to have a smooth tournament flow
Players
As a player of a team, I need to know when and where my next game is scheduled. During the break between two games, it’s hard to keep track of time while it flies by. After all, you are watching your opponents matches, chatting with your mates and tasting that super yummy apple pie.
The athletes need to know, when and where their next match will be. With the area of the competition spread out over multiple buildings, the players also have to factor in traveling distance to their designated volleyball court. They will also want to know, who they are playing, so they can prepare the strategy for their match.
Also, since the app is updated with the proceeds of the tournament in real time, the app updates the players on their position in the table and lets them know if they will make it to the finals.
Referees
While two teams match off against one another, a third team is scheduled to supply the referees for the match. Therefore, uers of 20five can be players and referees during the tournament. The ref therefore faces the same predicament as the players: They need to know, at what time they need to be on which court.
An important part of refereeing is documenting the score of the game. Before 20five was developed the referees had to fetch the score sheet from the tournament’s organizer, score the game with pen and paper and then deliver it to the organizers after the game had finished. With the app, those processes are digitized. The score gets transferred within the app.
Delivering the score sheets is a crucial part of the tournament’s flow. The organizers depend on the quality and reliability of the refereeing team, which 20five facilitates.
Tournament organizers
The organizers of the tournament are responsible for the flow of the entire event. Usually, the tournament follows a tight schedule. Not being able to control every six of the courts can be very frightening to a certain degree. Hence, the organizers are dependent on the the self-reliance of teams and referees.
The tournament is usually divided in two parts: the group stage and the play offs that follow. After the group stage, the table has to be calculated so the advancing teams can be determined.
It also may happen that the games have to be rescheduled to a different time or court.
Our solution
The app is available on iOS, Android and as a web app.
Onboarding
Users of 20five most likely support or belong to one of the participating teams. After launching the app, the users can select their team within the app. This gives them a centralized platform which allows them to navigate the tournament effortlessly. The app gives the user the location of the next match they will want to win, referee or cheer for. It also lets you check your team’s position in the table and gives you an indication if you’re likely to advance further.
Team overview
Answering the question when, where and against whom is my next game and showing which game you have to score, the team overview is the center of the users information source. It shows at what time the games of your team are scheduled and who you are playing against. You can also check the standings of your group which shows you your success in the group phase but also gives you a glance on the next drawings.
The team overview let’s you navigate to the match's details. Not only can you access the exact score of the sets, but also at what time and place the match takes place. Referees are able to open the score sheet directly from here.
Score sheet
The score sheet is where the magic happen. We chose a metaphorical design to provide an experience that is close to a real-world scoreboard to ease new users into the 20five way.
A tap on the numbers lets you raise a team’s score, while you can erase points by taping the subtract-button. Each tap on the display generates an update with the servers in real-time.
This is replicated for any user of the app - the user sees the score of every game in real time.
After finishing a set, referees have to start the second set and the teams usually switch sides for the next set. The referees can now decide, whether they want to switch the teams positions in the app to the teams actual position on the physical playing field, or keep it as is.
Reminders
During the tournament, it’s easy to forget the time. In order to remind them of their upcoming matches, we’re offering push notifications 15 minutes prior to their next match. That gives the participants of the tournament the time to find the right court and do a quick warm-up before their match starts.
Good to know
To keep everybody informed about the tournament, the app provides information about the tournament’s schedule. It also promotes the menu of the bistro - including a very yummy apple pie - as well as the rules of the tournament.
Gathering feedback
Having developed a MVP from scratch it was crucial for us to gather feedback from our users during the tournament. We wanted to know whether the app was useful, how users interacted with it and if and how we should keep developing it.
Naturalistic observations
While we listened to feedback and just talked to players about how they used the app, we were especially interested in how referees were using the scoring feature. We had the unique opportunity to conduct naturalistic observations and just watch the referees score the games.
There are four crucial moments when scoring a game that we wanted to have a closer look at:
- Starting the game
- Scoring the first point
- Handling of the end of the first and the start of the second set
- Finishing scoring the game and finally submitting it
What we learned:
Starting the game was rather easy. Users had almost no problems finding the game they had to score.
However, scoring the first point was much more difficult. While the design of the scoring table was familiar and clear to all users, they rarely figured out how to add points to the team’s scores. Some users even thought they needed to score errors, because it was the most prominent call-to-action on screen.
Once they had worked out how to add points to a team - either by trial or asking other referees - they adapted quickly to the interaction pattern.
Unfortunately, submitting the scores to the server and displaying them on the scoring screen was cause for frustration, since the cell phone coverage tends to be very poor in our gym. After the referees had entered a new score, the app would only display the new score once it had submitted the update to the servers. Sometimes it would take up to 10 seconds until the updated score showed on the screen. No wonder, the app made some users curse a lot…
Finishing the first and starting the second set caused no major problems. We found out the need to write the instructions for finishing a set in a more user-centered way. It also became clear that we can provide a clearer hierarchy of the call-to-action buttons.
While finishing a match itself was a no-brainer to most users, some weren’t confident whether the game had transferred to the server. There was no indication that the game was scored successfully, their task was finished and everything was fine.
Usability Testessen
After the first trail run of 20five at the last tournament we were excited about how many users had used the app and by the amount of feedback we got. Aside from fixing a couple of bugs in the code, we mainly focused on how to make scoring easier. Having learned the score sheet wasn’t intuitive and submitting points to the server was too slow in gyms with poor wireless connection, we made adjustments.
First, we changed the way how points were submitted. The new iteration lets the users change the score without frustrating them due to pending network requests. The score is now saved locally in the app first and changing the score happens immediately. However the score constantly is pushed to the server in the background of the app. Users see a status information about the synchronization with the server, similar to the send receipts in messaging apps like WhatsApp.
At the Usability Testessen at Jochen Schweizer we tested the new updates with six different participants.
We found out that scoring now works much easier then before. Some users didn't understand the status indicators at first. Compared to the high frustration with the old way of scoring, our new approach was a huge step in making 20five easier and more fun to use.
We also observed how hard it was for some users to navigate between different pages. Using a third-party library we had originally integrated off-canvas navigation into the app. This library didn’t include proper back-navigation, i.e. every time the users wanted to navigate to a different page they had to use the off-canvas menu. This led us to the decision to get rid of the external library to build a bottom navigation including a back-navigation on the left header. Users can now switch directly between screens with the bottom navigation at the tip of their thumbs.
My role
At the beginning of the project I drew scribbles to visualize the structure and user flow of the app. During the development process I helped skinning the front end to polish the user interface. In doing so I learned a lot about using the basic concepts of git, such as committing, branching and merging.
I planned the observations during the tournament, led the observations themselves and collected and analyzed the feedback we gathered during the tournament. I helped shifting the focus towards an even more user-centered development. I also led the planning, conducting and analyzing of the usability tests at the Usability Testessen.
Future
We are constantly working on optimizing 20five. It has already been used to support the German Youth championship tournament in 2016 and 2017. We are looking to support more tournaments in the future.
Are you interested in using 20five for organizing your next volleyball tournament? Just send us an email and we will get in touch with you.