we.ref App

Outwith the elite level of football, match officiation and data collection have traditionally been carried out using old-fashioned and error-prone methods. Here’s how we met the challenge of modernising the beautiful game.

Our client we.data came to us with a mission:

the evolution of live sport data

Among their number is a former footballer turned accredited referee, with experience at all levels of football from school-level upwards. His experience was that football was missing a trick: why should the use of modern technology for digitised match day data capture, real-time match reporting and branded social media integration be the sole preserve of the elite level?

Everything pointed towards such digital evolution being transformative at grassroots and amateur levels too: it would increase fan engagement, reduce administrative error, tighten up safety and compliance, and offer opportunities for increased revenue.

An app for real-time sport data

Our specific role would be to develop a mobile app for match day data capture to be used by match officials (referees), club officials and journalists.

Top-level requirements

Before a match, everyone should see a list of upcoming fixtures.

On match-day, club officials would use the app to enter team line-ups, colours and formation then submit those to the referee.

Moving onto the pitch, the referee would wear a smartphone on their forearm and use the app for recording all match events including:

starting/stopping periods;
registering goals and substitutions; and
issuing yellow and red cards.

Data would be sent in real time to the cloud to be made available instantly on public-facing we.data websites and social media messaging.

Lastly, journalists should have access to the same “match recording” features as referees, but with data being sent to their specific publication.

Challenges

This was a very exciting project but undoubtedly a challenging one. The realisation soon dawned on us: how would we create an app to be fast, user-friendly, and capable of constant two-way internet communication when used on a football field, in driving rain, in the middle of nowhere?

Discovery

Given the level of detail involved in the project, our first task was to gain a fuller appreciation of the detailed functional and technical requirements. We had to delve deeper into the subject matter; to understand the client’s existing infrastructure; and to test ideas.

What API functionality would the app require and did it exist or need built?

Which mobile development platforms were available and what was best suited?

What possible methods existed for reliably transmitting data under the constraints of poor or no internet connectivity?

For this, we conducted a number of stakeholder interviews with our client, followed by various proof-of-concept tests.

Wireframes and User Experience Design

Our next task was to create detailed wireframes and prototypes. This was a fairly lengthy and involved process due to the complexity of the app.

For the in-play screens we had to concentrate hard on the size of tappable regions, on clarity of naming, and on very clear colour contrast. These would be the factors that ensured good usability under trying circumstances. At every stage we received feedback from a referee’s perspective and iterated our designs accordingly.

The technical approach

Mobile Framework

Having identified iOS and Android mobile devices as our target, we chose Ionic as our platform for app development. Ionic is an Angular-based toolkit for developing hybrid mobile apps, offering great component libraries, tools for testing and simulation, plus the ability to develop a single application which can be used to deploy both Android and iOS apps. Furthermore, we had already successfully used Ionic on previous projects including an app for the University of Strathclyde and our own Cheers product, so we knew it was reliable. A quick proof of concept also revealed that Ionic provided - or could be extended to provide - everything we needed with regard to API-based communication, interactivity, and data storage.

Infrastructure

Our client already had a datastore and API. Using the API, the app would authenticate, retrieve forthcoming fixture information, post match set-up data (team lineups etc) then send and retrieve a regular stream of event data during the match. We worked closely with the API engineers throughout the process to ensure that we had the required endpoints and that they delivered data in the most efficient way possible.

The need for speed

While watching an early prototype in use at a football match near Glasgow, we noticed a slight delay as the referee moved between screens when registering certain events. This was a tricky problem because in the case of issuing a caution, for example, there are by necessity several steps for which all data needs sent to the cloud. Back in the lab we realised that the app was working too hard, too often. By updating the app to log the relevant data and queue the work needing done, but postpone doing the actual work until a period of inactivity in the match, we were able to make the referee’s process much faster.

No connection, but the show must go on

One of the great challenges we faced was how the app should cope when internet connection was lost during a match. It was, of course, paramount that operation remained seamless for the referee and that data integrity was maintained.

To achieve this, we developed a system which combined complex local storage; API request queueing; and intelligent, non-destructive sync. After much testing and iteration, we reached the point where the app appeared to behave exactly the same when offline as online, with the referee able to concentrate solely on the job.

Usability Testing

One of the great aspects of this project is that since the earliest prototypes, the app has been in an almost constant loop of testing and feedback. Using tools such as TestFlight we have continuously shared beta versions with numerous football clubs, referees and journalists. We’ve also observed the app in situ during a number of live matches which lends a perspective that simply could not be gained in the confines of the studio. This feedback loop has been crucial for progress.

we.ref has now been tested in hundreds of games. It has been proven to be sufficiently robust, reliable and beneficial as to gain FIFA and IFAB approval. Meanwhile, together we continue working with referees, teams and coaches to gather feedback and enhance.