Serving up a digital design system for Wimbledon

Wimbledon is iconic. Class were tasked with protecting and reinforcing that status by creating a digital design system that unites brand and development teams around a common visual language.

The purpose of the digital design system is to accelerate the design process, reduce development inconsistencies, and build bridges between teams collaborating to bring the Wimbledon’s online brand to life. The design system is a collection of components, guided by clear standards, that can be assembled together to build any number of Wimbledon websites or apps.

We created a suite of reusable components that serve as the building blocks of the front-end Wimbledon website. Wimbledon’s components range in complexity from single function elements, like buttons and fields, through to more complex components in the form of match fixture tables and player profile cards. The component library, used consistently and repetitively, creates a more predictable and easy user experience for the website visitor.

The design system allows Wimbledon’s web development team to spend less time focused on style and more time developing a better user experience for website visitors. When code for countless unique interface elements conflict it could potentially break a website. To avoid conflicting CSS and JavaScript we created code snippets for each component. This makes it easy for website developers to maintain quality control of the code moving forward.

Visual language is a core part of the new digital design system. We also delivered style and code snippets for colour, grid systems, typography, iconography, and image use across different page templates and devices.

The end product enables the Wimbledon development team to build better digital products faster. The essence of the Wimbledon brand is “In Pursuit of Greatness” and the digital design system Class built helps them deliver such promise time and again.