‍

Overview

Riot has a lot of brands, and at the time, had a lot more on the way, which are now public. We worked on a design system to support every brand, ensuring it was flexible and scalable. Our solution? A multi-brand web design system. It was built with React. It could serve as a live prototyping kit or the main brand for League, Hextech.

‍

‍

‍

Unified Dev Site

We built a custom internal website. It housed all the themed components as they came online.

‍

‍

‍

Fully Animated

One of Riot’s super powers is animation. It was important for the design system to be capable of complex animations.

‍

‍

Live Wireframes

Game brands are often developed last, and over time. We created a live wireframe kit for teams to use, to unblock progress. As the brand was developed, they could turn on the theme later.

‍

‍

Brainstorms

We needed to think and consider many views. 10 teams actively built web projects at Riot and they did it independent from one another. Our goal was to align them on shared web patterns,  design, and scalable technology. Mapping how it would work and fit together was a multi year endeavor.

‍

The Theory

Function is the unstyled, base component. It would include functionality and be formatted to accept inputs like a theme and content. Feel added the unique styles to each component on top of the functionality. Form is the content that would go into the component.

‍

‍

‍

Consensus Building

To get teams to use a central design system, I gathered data from each of them using surveys. I crafted a presentation based on that data. It shows the value a design system could create for them, which convinced them to use the system.

‍

‍