ABOUT
See It LiveDesigning for VALORANT
VALORANT is a genre defining tactical shooter with one of the most passionate player bases in competitive gaming. Designing for that audience raises the stakes considerably. These are players who notice even if a single pixel moves on the HUD. They hold the experience to an exceptionally high standard. That pressure shaped how I work. Riot didn't just talk about being player first, they built it into a culture.
Iterations
Great design rarely arrives fully formed. The most important work happens in the space between the first comp and the final shipped screen. The reviews, the pushback, the conversations with developers who surface constraints you had not considered, are all important parts of the process. My process is built around showing work early and often, long before anything feels polished enough to share. Feedback, processed well, is a design tool. The skill is not just in hearing it but in knowing which notes to keep and which reveal a miscommunication worth clearing up or opportunity to improve the design. Working alongside other designers at Riot sharpened one skill in particular, which was synthesizing feedback from contradictory directions. Vague notes are inevitable on a team that size, and learning how to ask the right questions to surface what someone actually means became just as important as the design work itself.
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 in ways that purely mobile or web work rarely demands. Console interfaces are governed by the ten foot rule: larger type, higher contrast, a hierarchy that does more work with less precise input. Mobile asks entirely different questions: smaller canvas, fragmented attention, experiences that have to survive thirty second bursts with one hand. Designing in context is very important and something I brought over from designing for Corvette.
Practice mode
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. Without a central library, designers had been solving the same problem independently for years. Notification icons had proliferated, each one slightly different in style, 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.
