CSB - Live Sport Visualisation Widget

•

What is the Perform Content ScoreBoard?

Content ScoreBoard (CSB) is the ultimate real-time sports content widget created by PERFORM Sports Media. It combines video and data in one simple plug and play solution. It visualises live games as they happen and is available across multiple sports. CSB has many applications. One of it's popular uses is on betting sites within the 'In-Play' section.

- Extensive pre-match and in-play data
- Audio commentary available in up to 5 languages
- Data in up to 35 languages
- All video matches supported by data
- Match visualisation

Service used by millions of people every day!

Our Challenge

We were asked to focus on the match visualisation element of the CSB and challenged to make the current solution responsive.

The Outcome

The assets we were provided were in JPEG format. We used this as an opportunity to re-create the CSB in SVG format so it can be scaled infinitely. This also allowed us to freshen up the designs.

UX and UI by Asis Patel and Rob Gill

JPEG vs SVG

We recreated the pitches for each sport into SVG format. This presented us with the opportunity to freshen up the designs and create a consistency across th suite the feeling of 'designed by the same person'. The sports CSB serves are football, basketball, ice-hockey, volleyball, beach volleyball amongst others.

Smaller File Size = Quicker Load Speed

Standardising the Whole Suite

We analysed the current product and noticed incosistencies across different sports as well as areas for improvement. Retaining the individuality per sport we introduced a series of rules to ensure consitency across the suite.

Rules Introduced:
- Typography Rules: ensuring legibility even on mobile devices.
- Colour Rules: including a limited colour pallet and support for teams who play in white, previously unconsidered.
- Visual treatment Rules: introducing consistant rules for dropshadows and opacity.

500+ Screens Redesigned Across the Suite

Fully Responsive

We made the widget fully responsive down to 300px. We introduced rules as to how the widget should appear across different breakpoints. This mainly affected smaller breakpoints. Here we had to limit the data on show, and introduce rules for abbreviations. Below shows breakpoints 300px and 600px across various sports.

Conclusion

We made the CSB fully responsive as originally intended. In the process we re-created the whole suite in SVG which decreased the size and improved the overall performance. We also freshened up the look and feel and introduced guidelines to ensure consisitency across the suite.

UX and UI by Asis Patel and Rob Gill