FACEIT Design system

Faceit design system examples and overviews

The project

With over 18 million users, FACEIT is one of the biggest names in the e-sport industry. It’s a third-party competitive gaming platform that allows its players to join competitions and leagues for virtual and real-world prizes through automated tournament management and matchmaking technology.

One problem that was identified at Faceit was that there was no clear, elaborate guidelines or consensus on the UI elements used across the platform. As the team was growing and the launch of new products were in the pipeline, such as the Faceit app, this was going to become a broader issue. It was decided that we needed to create a new design system from scratch, a single source of truth for all UI elements to be used within the platform.

My role

Alongside the two other designers in the company at the time, I was involved in the discovery phase and the initial stages of settings up the new design system. Once the structure, naming conventions and first main components were set up I was an occasional contributor.

The Process

Desk research

We [the design team] started off the project by learning as much as we could about design systems, by reading articles, studying already existing guidelines and design systems by companies that had already faced similar challenges.

Inventory and audit

To get an overview of all the UI elements on the Faceit platform we took screenshots of every page of the platform and all their different. As we already knew, there were a lot of inconsistencies and room for improvements. So our next steps were to weed out elements that were duplicated, used only once, not needed or outdated. We then prioritised components that were an absolute must to include in our initial version of the new design system.

Building the Design system

Before we started creating new components we had to make decisions regarding structure, naming conventions, categorisation and presentation. We then divided the work between us in the design team and started building out what would come to be the new Faceit design system.

Icon examples

One part of the design system I worked on was the icons. We already had a rich icon library, however it was very inconsistent. I had to set the rules and guidelines on the treatment of adding new icons, as well as rework the entire icon library to make sure it was consistent and worked well with our new UI profile and design system. Below is an example of some arrow-icons before and after reworking them. Some things that needed updating for consistency were size, stroke, corner radius and overall style.

Old vs new arrow icons

The work on icons also included adding both filled and outlined versions, as well as deciding on structure and naming to make it easier to find and navigate.

Old vs new icon structure example

Results

Design systems are constantly evolving, however before I left the company we had started implementing and adopting the first version of the new Faceit design system, Fuse. Having the most commonly used components in Figma helped speed up the design work and eliminate inconsistencies. The new guidelines and best practices were also helpful in this aspect.