Sports Data Console

The data console is used by both internal teams and external clients to view the data collected for all sports a user profile has access to. A user can view the dashboard of upcoming tournaments and games across sports, they then select a tournament to view the fixtures and individual matches/ games. During the live status of any match/game - the statistics and in-play actions are fed into the platform.

This project required a redesign of the existing platform that was being transitioned to a new technology stack. At the same time, a review of user experience and features were addressed. Customer feedback and subject matter experts were interviewed to gather research, together with a review of data points that were prioritised which together informed our decision-making and the UX design.

Scoreboard component - in detail.

The scoreboard component was a key element. Whilst it needed to carry individual sports requirements, the team were looking for generic-based foundations of the module that could be adapted. Below are the steps that were taken and discussed to reach our goal. 

For all sports we had to look at consolidating them into a scoreboard type or determine them as edge cases. As can be seen, all fell into either a VS or Quarter/ Set based scoreboard except Golf.

Sketching layouts to rapidly explore options and quickly uncover what is and isn't working, and where gaps in flexibility existed in displaying scores, set scores and top-line game statistics or game play states.

VS - Scoreboard Wireframes

Wireframes of the sketched layouts were created to further test structures, variations and states of play through colour changes in sections.

Quarter/ Set based
- Scoreboard Wireframes

Scoreboard Final Designs -

Below are the final designs for a selection of individual sports, additional game statistics or states have been added such as; Timeout counters, current break details or batting and bowler player names.

Scoreboard states

The scoreboard also included a multitude of different states of play for the sports, below are a few used for Football. The change in background colour was used predominantly to highlight a change in play or the leading team.

Page templates

The console consists of 4 to 5 main templates to deliver multiple sports to the users. Starting with a Dashboard view, there are two view states, via Competitions (Card view) or Events (Table view). Both views are filterable by sports and/or date. Once a user is within the Sports tournament they can view all Fixtures of a tournament. Selecting a Game/Match displays a game template with a scoreboard, in-play actions, line-ups and statistics.

Snooker implementation

The screens below demonstrate how the templates flexed to deliver the Snooker sports data.

Golf implementation

To deliver golf, it required a change in core templates due to the nature of change in data feeds. However the atomic design elements were still used to deliver a new set of templates for all future golf tournaments and events.

Design system

A light design system was created to provide the team with a platform for the ongoing addition of sports or features and functions. Below are some of the sheets from the design system.