T H E   A S S O C I A T I O N

UI / UX DESIGN • Web Design • Projection Design

APR 2018 - JUL 2018

 
 
 

INTRODUCTION

Having worked with adidas on many occasions through Turfmapp connected us to other opportunities in the soccer industry. One of them was a new influencer league in Los Angeles, called The Association. It’s an adidas-sponsored invite-only soccer league. Their goal is to push forward the culture in and around soccer over a span of 10 weeks. They have teams from companies like SpaceX, Red Bull, and Beats by Dre competing in their 5v5 league (April-July 2018).

 

OBJECTIVES

The Association hired us to handle the on-court experiences from a technology perspective. Their goals were to…

  1. Be able to project the live scoreboard for each game at the events

  2. Be able to share live scores with fans through social media

 

LIVE SCOREBOARD

We developed a simple app for them that works right in the browser. On match days, the referees were able to control the game clock and scorekeeper on their mobile browsers, while a dedicated laptop projects a full-screen live scoreboard onto a big-screen TV at the indoor facility.

We decided to make this available in the web browser because it would be more easily accessible by referees without the hassle of signing up for anything, and because of the shorter development time. I kept the designs as simple as possible, while trying to match with the league’s branding.

Through social media, the league was also able to share a link where fans from anywhere can follow the live scoreboard in real-time.

One challenge we faced was that there were 4 games per night: two simultaneous games at 8:30 PM and two at 9:30 PM. To make the app most relevant for referees and admins, we came up with the option to make each game “Go Live”. When a game is live, the scoreboard become editable by the referees, and the scores are displayed on the live link for the public. We also decided to create a unique link for each game in order to allow each game to be shown on separate big screens.

OUTCOMES

With our experience developing and using the Live Tracker product for Turfmapp, we were able to translate the efficiency aspect to The Association league. Usually, tournaments would have an extra staff by each court to update the scores, but by allowing the referees to update the scores on their phone after every goal, it eliminates the need for extra staff.

Additionally, we went beyond the scope to design static graphics on other big screens at the facility. We created the fixtures and standings for each week during the regular season, and during playoffs we created the playoffs bracket.

There are things I would like to improve on for future leagues that require this type of app. To make the scoreboard more interactive, I would incorporate animations after each goal. On the referee’s end, it would be great to be able to select the goalscorer and display that with the goal animations on the live scoreboard. This would also create a lot of value for the league organizers if the app is able to record and store all the goalscorers for each game. Currently, they have to manually record them on paper.

 
 
The full-screen Live Scoreboard on a big screen

The full-screen Live Scoreboard on a big screen

 
Scorekeeper (for referees) on the web browser. The last screen is what the fans see on the live score public link.

Scorekeeper (for referees) on the web browser. The last screen is what the fans see on the live score public link.

 
Standings and fixtures on the big screen

Standings and fixtures on the big screen

 
Playoff bracket on the big screen

Playoff bracket on the big screen

 

 

Other Design Projects

Turfmapp

ToCa Football