ABOUT
See It LiveDesigning for VALORANT
VALORANT is a genre defining tactical shooter with one of the largest, most passionate player bases in competitive gaming. As senior designer on the frontend, I helped define the design system for all front-end experiences alongside one other core designer, owned several key screens and large parts of the home experience, and later extended the design system across platforms. As well as occationally going into other parts of the game to help support the team.
Iterations
A smoothly running team needs a solid end to end process when it moves fast. From UX to build. Communication is everything. We built on atomic design, with a twist. Brad Frost's work pushed me to level up our libraries, but the real plus was when creation through systems is easy, ideas flow freely. A system can be a bad contraint if not done correctly, so working closely with the team, we heard out all the needs and adjusted accordingly. Our pipeline moved from UX naming conventions, to components, to in game assets, all with the same naming conventions to help keep consistency from UX to implentation. An easy paper trail. Balancing classic atomic design against Riot's existing foundation. Early on, devs got lost in our comps even when things weren't labeled as clearly as they should be. When we met with them about workflow optimizaition, this was one of the clear stumbling blocks. So we rebuilt for clarity: easier to parse, consistently named. The system started producing results.
Here's a Choose Mode screen I designed, building the image tiles from core background assets in Photoshop. I worked closely with the character art team to get assets that I then edited to make each tile memorable. We diverged from the PC layout to make it feel at home on a TV, larger blocky elements and easier to navigate from across the room. I also helped the team set up a physical test area with a recommended viewing distance, so we could evaluate designs the way players would actually experience them. The tiles share a consistent layout and theme throughout. The medium is never neutral. A pattern that works beautifully on a phone becomes unreadable from ten feet away on a television. Designing for games across console and PC forced me to internalize this. Console interfaces are governed by the ten foot rule: larger type, higher contrast, a hierarchy that does more work with less precise input. Designing in context matters, and it's a principle I brought with me from designing for automotive interface.
Atomic Design
The component system was grounded in Atomic Design principles but shaped around how Riot actually worked. Inside Figma this meant a living library designers could pull from without rebuilding every sprint. The deeper benefit was consistency and saved time. When everyone works from the same source, designs are naturally more consistent. Getting there required patience. Much of the team had years of muscle memory in Photoshop and Illustrator, so instead of forcing a migration we built the conditions for change through hands on sessions structured around real work. Once designers felt fluent, the library stopped being something they were asked to use and became something they relied on. A win for everyone.
Design Systems at Riot: Building the Foundation
When I joined, the design process was fragmented in ways that quietly drained everyone's energy. No shared library, just designers solving the same problems independently. The first move was establishing a component system in Unreal Engine 5, built around Atomic Design principles and shaped around Riot's culture. What began as a console pattern was eventually ported to PC. From there we extended that thinking into Figma, running hands on workshops to drive real adoption rather than sitting in a digital corner. The goal was never a cleaner file structure. It was giving the team back the headspace to do work that actually matters.
Style Frames
Speed of iteration matters as much as quality of output. Style frames became one of the most practical tools in the process, capturing the intent of an animation without the overhead of building it out in full. Getting a direction validated early is almost always more valuable than arriving at a review with something polished that is pointing the wrong way. A few well chosen frames could communicate timing, hierarchy and tone well enough to align stakeholders and unblock development. Iteration speed is a design skill, and knowing how much to show at each moment only comes from shipping enough times to learn.
Design debt - Creating consistency
One of the more revealing audits I ran was tracking down every error and empty state across the game. Working closely with UX, I identified areas that were inconsistent. After a few back and forths about how many levels we really needed, we managed to convince everyone we just needed two tiers of warning orange and red. Without a central library, designers had been solving the same problem independently for years, creating inconsistencies like this. Notification icons had proliferated, each one slightly different in style, color, weight or logic. This caused a high cognitive load, every inconsistent pattern makes the player recalibrate, and in a game environment that compounds quickly. Consolidating those states into one coherent system was not glamorous work, but it was impactful.
Party lobby
The Library
A design system is only as useful as it is navigable. We put serious thought into the information architecture of the library itself, because a component that is hard to locate gets rebuilt from scratch, which defeats the purpose entirely. Clear naming conventions and logical grouping meant even new team members could orient themselves quickly. When developers and producers can open the library and understand what they are looking at, collaboration gets smoother and handoff conversations shift from explaining where things live to discussing how they work.
