League of Legends

Building a multi-brand design system for Riot Games

My Role
Design Lead / Product Lead / Product Strategy / UX & UI
Team Credits
Sy Harris, Vivianette Ocasio, Jeff Zhang, Christy Benson, Mark Rinkel, Craig Parkinson, Jules Glegg, Adam Petersen, Mike Shindle, Shaun Randall
Riot Games Multi brand Preview

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.
Riot Games Multi brand logos
Riot Games Multi brand Unified Dev Site

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.
Riot Games Multi brand fully animated
Riot Games Multi brand live wireframes

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.
Vision of Universe Website

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.
Riot Games Multi brand theory

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.
Riot Games Multi brand research

Thanks for
stopping by

Projects

Directing 15 Seasons of Fortnite
Building Fortnite’s UXUI org
Creating Fortnite’s new design system
Creating the interactive map of Runeterra
Designing Universe
Building a multi-brand design system for Riot Games
Redesigning League of Legends player support site
Designing an interactive compare feature
Redesigning amazon.com

LinkedIn

Medium

Resume

tyler.lahaie@hey.com

Tyler LaHaie Logo
© 2024
Made with care by Tyler LaHaie