FACEIT is one of the biggest names in the esport industry, with 15 million players using its product to compete in various games, such as Counter-Strike: Global Offensive. The platform offers a highly competitive environment in a third-party product, allowing players to step-up their game, to train, and even to give access to the professional scene of esport for the best of them.
When I joined FACEIT along with an other designer, we’ve discovered a few design files and not a single guideline apart from the one provided for the FACEIT Branding (mainly limited to the use of colours and the logo). After some discussion with the different teams, it appeared there was no consensus on what components (such as buttons) should look like.
A Design system is essential to provide a single source of truth for all the components used repeatedly within a product. It avoids for example recreating components from scratch while we know it already exists somewhere, or having different styles of the same one across the product. It appeared crucial for us to develop a design system. To start this project, I first introduced the design tool Figma to the product managers and offered quick trainings on how to use its features at its best, especially the component creation.
To accomplish this project, we learned a lot from existing design systems and related articles, such as the very well documented Material Design system from Google, the Atlassian Design system, or the Carbon from IBM.
Some of the tasks for building the Design System included: Establishing a documented colour palette, listing all the states possible for each components, providing complex reusables patterns such as sidebars, and delivering guidelines and best practices for at least the most reused components.
While it was released gradually, the project took approximately 6 months before launching its first full version.
Impact and results
Since the creation of our Design System, more than 700 components have been documented. Guidelines and best practices are also detailed for our main components such as Buttons or Data Tables. It’s difficult to establish a quantified result since we were only 2 designers in the company at the time we released it, we are assuming it sped up our design process a lot, and think of it as a success since all the product teams are united around this single source of truth and are all using actively the design system.
My role and who I worked with
I led the project along with a senior UX designer. Today we are still maintaining the Design system on a regular basis.