OVERVIEW
Transforming Riot’s fragmented web ecosystem into a modular, reusable design system
At Riot, because the main company website was a collection of different web pages, each with different styles, updates constantly meant bespoke styling. What should have been a simple improvement became repeated work across teams, slowing down both design and development. This project was about shifting from designing pages to designing reusable systems.
MY CONTRIBUTION
I developed the visual and typography system for 5 of Riot Games’ websites, as well as conducted research and analysis on brand guidelines to inform system development. I focused on designing a system that would eliminate redundant work, scale across multiple products, and support both consistency and brand flexibility.
ROLE
UX Designer (Design Systems)
SCOPE
Typography, Color Systems, Cross-functional Delivery
DURATION
8 months
IMPACT
Contributed to a scalable, consistent design foundation across Riot’s web ecosystem.
PROBLEM
Fragmented Ecosystem, Repeated Work
The current web experience had multiple micro-sites with that operated independently, which often led to multiple bespoke designs and manual effort for updates on a site by site basis. The impact of this was a less efficient process and use of resources, as designs were not reusable and updates did not propagate across different websites.​
APPROACH
Riot introduced a modular design system that transformed how pages were built.
These modules could be combined to build player experiences, making it easier and quicker to build consistent experiences.
​
​
Our goals were to develop:
Flexible, reusable components
A system where improvements scale automatically
A foundation for long-term efficiency
MY ROLE
Supporting a Modular System
While the Blades framework introduced a modular approach to building pages and defined the structural system, I focused on defining the visual systems that made scalability possible.
A snapshot of my working Figma file
Key Contributions
Conducted brand and design audits across multiple game ecosystems
Collaborated with the lead visual designer to develop typography systems and color palettes for 5 game websites
Developed color guidelines for blade designers and developers to inform consistent color application across blades
Ensured alignment between Riot’s brand vision and system implementation
COLOR PALETTE SYSTEM
Conducted audit of existing color usage and branding for different games, developed color palettes while preserving game-specific identity, and established a guide for consistent application across components.
TYPOGRAPHY SYSTEM
Conducted audit of existing typography across multiple games, collaborated with the team to align on mobile sizing, and defined a scalable type hierarchy.
%201%20(2).png)
Design System Documentation work is blurred due to confidentiality.
IMPACT
This work helped transform a fragmented ecosystem into a more unified experience
Due to this work, the team was able to reduce duplicate design efforts across teams and improve efficiency in design implementation. We also improved consistency across Riot’s ecosystem and created a scalable foundation for future development.
The design system and documentation I contributed to support this initiative created a flexible system that allowed each game to maintain its identity while operating within a unified framework.
This design work can be viewed on any of the game websites under Riot Games, such as the League of Legends page.