The International Federation of Basketball (FIBA) and its discipline of 3x3 is the largest urban team sport in the world, becoming part of the Olympic 2020. It is a form of the game played three a side on one basketball hoop. FIBA owns a wide variety of digital services, some of them designed for the players to register and arrange their games, some of them for the basketball fans, some for the organisers etc. All those services had a slightly different look and feel, behaving differently with various development teams working on those. Each development team had been implementing custom solutions to a problems, which unavoidably lead to a different user experiences and style.
After working on the 3x3 worldtour site for a while, reinventing solutions to similar problems over and over again, we felt the need to change something. This was the point where we decided to introduce a Design System, to achieve more cohesion and consistency between the digital services.
To enhance the overall look and feel, we created a component library with the most occurring components, to streamline the design and development work and increase efficiency.
With the components designed in Sketch and implemented in Storybook, we established a Living Styleguide. This Living Styleguide consisting of general design guidelines, do’s and don’ts, accessibility principles, design tokens and view templates to guide designers and developers to create unified products and experiences in a scalable and sustainable way.
Design library in Sketch.
Component library in Storybook.
Documentation in docz.