Results & Takeaways
A robust visual system and design pipeline that scaled across platforms, teams, and years of live service—while deepening engagement and brand identity.
Defined and scaled Runeterra’s visual system from concept to live service supporting 10+ expansions.
Introduction
0
Years on the team
0
Expansions Supported
0
Visual System to
Rule Them All
TL;DR
Riot wanted a collectible card game that expanded the League universe without alienating core fans. I helped define Runeterra’s visual identity from the ground up, built scalable UI systems, and helped build a design system based workflow—powering 10+ expansions and years of live service.
Situation
When I joined the Legends of Runeterra team (then called Project Bacon), Riot was making a bold move: expanding the League of Legends IP beyond its MOBA roots to reach new audiences. Legends of Runeterra wasn’t just a card game, it was a gateway into the League universe for players who had never touched Summoner’s Rift.
That meant rethinking how the world of Runeterra was presented, what story beats were prioritized, and how players connected with champions and Regions through interaction, not action. Designing for this goal meant facing several unique challenges.
To ensure the game met both business and player goals, we grounded our work in targeted research insights. These findings shaped how we approached system design, content surfaces, and player engagement across the product. We prioritized learnings that helped us balance clarity, lore, and long-term retention.
Background & Role
As Lead Visual Designer on Legends of Runeterra, I helped define the game’s visual identity from the ground up. I shaped the core aesthetic, established scalable design systems, and led strategy across card anatomy, Region identity, progression, and live events. I collaborated closely with cross-disciplinary teams to identify gaps, streamline pipelines, and build a Figma-based design foundation that supported over 10 expansions and a multi-year live service.
Titles: Manager, Visual Design & Sr. Visual Designer
Expanding on an existing IP with high player expectations using the interface to tell stories from around the world
Task
Our task was to turn deep world-building into systems-level design thinking and visual clarity—so Runeterra could become a new kind of on-ramp to Riot’s most beloved universe. Defining a consistent aesthetic across client features, supporting a deep progression system, and building a live-service surface that could sustain new content and community interest over years.
As one of the first designers on the project, I was responsible for helping define Runeterra’s visual language from the ground up—spanning material systems, color palettes, Region identity, card anatomy, live-service UI—and building a scalable visual system that could:
Reflect the rich lore and visual DNA of League of Legends
Allow every Region to have its own strong identity
Maintain visual clarity in a UI dense with information
Enable fast iteration and cross-platform scalability
Engage players across live updates, events, and personalization features
Actions
Highlight: Unified materials, colors, and typography across all UI
Role: IC, Strategy, Multi-platform Design, Visual Direction
Art Direction
Visual Direction
Design System & Tokens
UI Hierarchy
Cross-Platform
I helped create a unified aesthetic for Runeterra by refining color palettes, typography, iconography, and UI materials. We built a material-based system to communicate hierarchy and narrative:
Runeterran Canvas: Used for backgrounds to ground everything in a real world element
Gold & Glass: Reserved for high-impact, premium interactions (e.g., Play button, or the cards themselves)
Fiery Embers: Use as our base celebration effect to signal new content or progression updates
These tiers mapped to hierarchy across HUD, collection, and store screens—giving consistency to both passive and interactive UI states. The overall palette and materials were designed to remain neutral, giving intentional space for Region-specific imagery and colors to shine clearly.
Highlight: Built scalable templates for 1,000+ cards across Regions
Role: IC, Framework Creation, Collaboration with Stakeholders
Visual Direction
Visual Systems
Complex Hierarchy
Scalable Assets
Gameplay UI
Unity Implementation
In collaboration with the concept team and gameplay designers, we shaped the card frame system, balancing functionality with thematic expression:
Created reusable, scalable templates for cards across rarities, factions, abilities as well as spell types
Ensured clarity at a glance (mana, stats, rarity, effects) with high-contrast layouts and readable text
Built Figma components to speed design iteration and align gameplay and visual updates
Champion cards included dynamic frame states for level-up conditions and transformation
The system balanced aesthetics with usability and was extensible to support growing card mechanics and the need to incorporate visual elements from each Region.
Highlight: Scaled visual language across deck builders, progression, and events - including color palettes and iconography
Role: Lead, IC, Creative Direction, Cross-team Collaboration
Visual Direction
IP Expansion
Brand Systems
Scalable Assets
Lore Integration
I led the visual development of Region-specific palettes, iconography, and thematic treatments. Each Region (e.g., Demacia, Targon, Noxus) acted as our framing for deck building (similar to Magic's card color, or Hearthstones classes) and needed to provide clarity of that Regions unique card rules but also their thematic. To solve for this each Region was given:
A custom color palette focused on capturing the identity of each Region and maintaining alignment with established Region lore and public facing imagery
Unique icon sets that simplified the existing League IP icons to make them more effective across all platforms at different resolutions but still recognizable to players
Modular shape language that built upon the original League IP themes and was applied across deckbuilders, cards, and progression UI
The system balanced aesthetics with usability and was extensible to support growing card mechanics and the need to incorporate visual elements from each Region.
Highlight: Designed core meta-progression experience, balancing usability with engagement loops across PC and mobile
Role: IC, Lead, Art Direction, UX, Collaboration with Design
Visual Direction
Progression Systems
Player Retention
Asset Creation
Brand Systems Expansion
Unity Implementation
I was responsible for the design direction of the Region Roads, Region select, and Intro + Champion nodes, as well as the visual design of the initial Region chest and capsule assets. This was the game’s primary progression system that:
Allowed players to earn gameplay content through play
Rewarded commitment with character unlocks, cards, and cosmetics
Balanced aesthetic personality with usability on PC and mobile
This work reinforced long-term engagement by giving players a sense of progress and identity investment.
Highlight: Led client event theming for major expansions, delivering scalable events and client takeovers tied to release beats
Role: Lead, Art Direction, External Resource Management
Visual Direction
Figma Systems
Live Ops
Monetization
Player Retention
Pipeline Refinement
System Scaling
Unity Implementation
I owned the design for the progression systems and live-service needs alongside our personalization and meta-game systems teams:
Event Pass: Gamified timed progression through themed reward paths that utilized the existing Region Road structures and was rebranded using the design system
Client Takeovers: Themed menus and environments for events like K/DA, Targon, and Ruination built excitement and hype for the newly released content
Region Road: Continued visual and UX design for new Region launches to extend the content available to players
These updates were mapped to release cadences, marketing beats, and narrative arcs—driving re-engagement and contributing to measurable Daily/Monthly Active Users (DAU/MAU) spikes as well as Average Revenue Per User (ARPU) around event drops.
Highlight: Transitioned to Figma based design system, increasing collaboration and cutting design iteration time by 3x.
Role: Lead, Framework Creation, Collaboration with Engineering
Visual Direction
Design Systems + Tokens
Figma Systems
Scalable Assets
Optimization
Unity Implementation
I led the effort to transition our team from an outdated Photoshop/Illustrator-based pipeline to a component-based design system in Figma. This transformation created a centralized, scalable system that improved our collaboration, accelerated our workflow and improved our implementation pipeline into Unity:
Introduced Figma component libraries for UI patterns, card templates, and system materials, enabling faster iteration and consistent output
Established design tokens for color, typography, and spacing that mapped directly to Unity assets, minimizing visual drift in implementation
Enabled true cross-discipline collaboration with real-time iteration between visual design, UX, and engineering
Reduced redundant work and empowered designers to confidently build UI with shared assets
This shift unlocked higher design velocity, improved communication between disciplines, and became the foundation for the visual system used throughout live service and expansion support.
A robust visual system and design pipeline that scaled across platforms, teams, and years of live service—while deepening engagement and brand identity.
0
Expansions supported that scaled across PC & mobile
0
Average spike in DAU as well as other spikes in monetization after each themed event launch.
0
Increase in team velocity after the implementation of the design system
Systemic Design
Quality Bar
Systems at Scale
Launched Product
Other Projects
