Perform Sports Scoreboard
-

Responsive Optimisation

What is the Perform Sports Scoreboard?

The Perform Sports 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. It has many applications. A popular use is betting websites 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

The Challenge

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

The Approach

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. The styling across all the sports was also inconsistent. We used this this as a chance to create a consistent style across the sports.

The Outcome

A fully a responsive product created fully in SVG and a consistent style across the different sports.

Client: Perform Sports Media
My Role: Lead UX & UI

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

size-1size-1

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.