Opta Sports Widgets
-

Style Guide and Component Library

The Challenge

Each Opta Widget is a snippet of embeddable code that visualises a specific set of sports data. When combining many widgets together you can create customised sports centres across all the major global sports. We were challenged to create a universal language that works across every widget for every sport. All widgets needed to be fully responsive, something never considered before. 

The Process

We rethought the entire widget suite. Approaching the task by considering all the widgets at the same time, this had never been possible before. We finally summarised all our efforts into a Style Guide and a Component Library.

The Outcome

Widget Style Guide:  Fundamental design rules that all widgets must follow. Ensuring consistency across the whole widget suite.

Widget Component Library: Every component across the whole widget suite visualised. Showing all elements separately across 2 different breakpoints (desktop and mobile).

Client: Opta
My Role: Lead UX & UI

Old vs New Version

Basic CSS Rules


In order to keep the CSS to a minimum we designed the widgets with the basics in mind. Anything that adds extra unnecessary CSS was avoided. We chose to leave out the frills so our customers can build on top of our simplistic designs. This means they don’t have to overwrite lots of rules that don’t match their brand. Here are some core principals:
 
- No rounded corners, simple square edges.
- No drop shadows
- No custom fonts, arial, san-serif only.
- No capitalised text, keep it the same as the feed provides it.
- Avoid borders, light background colours instead.
- Limit the colour pallet, only use our limited colours.

OldvNew2OldvNew2

Simplifying the Colour Pallet


We’ve evolved the colour pallet by simplifying the range of colours. Bringing meaning to the use of colour and standardising each hex value. For example the old hex, #F1F2F2 now became #F2F2F2. Where possible we’ve considered the WCaG Compliance Ratings. Ensuring all text is at least AA compliant. Here is our reference tool: 
http://snook.ca/technical/colour_contrast/colour.html

However there are some instances that colour compliance is ignored. We needed to make the Widgets feel like part of the Opta brand. If we were to be fully colour compliant, the entire pallet would become a lot darker, moving away from the core brand colours. As a compromise, we use the WCaG Ratings as a guide and have limited the main colours to shades of Opta blue, and shades of grey only. 

Mobile and Desktop Style Sheets

For the first time, the customer now has the ability to choose if they’d prefer to use the Mobile Style Sheet or the Desktop Style Sheet. The intention of the Mobile Style Sheet is to apply minor changes to the widgets. Clickable elements increase in height. Ensureing they're large enough to be tapped with a finger. Text is also increased in size so it’s easier to read on smaller screens.

Mobile and Desktop Match Center

Designed For Multiple Sports

MultiSport2MultiSport2

Opta: Widget Style Guide

Opta: Widget Component Library

Conclusion

The Opta Style Guide and Component Library is a living product. It is constantly evolving as additional widgets get introduced. As it stands, these docs explain everything our design and development teams need to know about the suite. By using them anyone will have the ability to make new additions feel like part of the existing product. The time and effort required to do so is now reduced to a minimum.