Designing the Immersive Map Feature
Joined in 2018 as a UI/Visual Designer to collaborate with Riot Games & provide expertise as a Mobile UI Designer. I was the main designer on a brand-new mobile-first feature creating interactive Runeterra map progression system and story collection flows.
Product Design
Coordinated efforts among game designers, narrative designers, artists, and engineers to define feature scope and constraints.
Define the Scope →
UI/UX Design
Wireframed UX flows to guide players through Runeterra map progression, mission tasks, and reward collection.
Design Process →
Visual Development
Designed user interface and visual concepts aligned with the pre-established Hextech style language of League of Legends.
Concept Exploration →Goals of the Immersive Map Feature
With any new feature, a designer's role is to understand business & player goals, identify technical constraints, and help the game designer prototype rapidly.
Core Objective
Establish a mobile-first progression system separate from core 5v5 gameplay where players explore iconic Runeterra locations, completing challenges to earn lore and collectible achievements.
Defining the Scope & Technical Alignment
Working with limited sprint time and technical budgets, we aligned cross-functional teams (narrative designers, artists, and engineers) early to keep development costs low and maintain an agile workflow.
- Scope Alignment: Collaborated with game designers define the feature and rapidly mocked it up to pitch for approvals.
- Parallel Production: Coordinated with artists to creating map illustrations while designing Unity UI prefabs for engineers to prototype.
- Performance Optimization: Designed features with production time and memory limits in mind
UI/UX Process & Cross-Functional Collaboration
The interactive map interface was one of the most collaborative areas of the feature. Players unlock champion-specific story quests by completing challenges across iconic Runeterra locations.
I wireframed the UX flows and created high-definition mockups matching League of Legends' established style language. After getting approvals, I constructed prefabs in Unity for seamless engineering handoff.
While prototypes were being developed, artists were simultaneously finessing the art of the map while I also refined the UI Design of the feature, resulting in the final prdouct.
Visual Development & Hextech Concept Exploration
Since this whole feature was about immersion, a challenge was concepting a key visual that would explain the feature. Since the mission reward was unlocking exclusive champion lore comics, I wanted to use some sort of tome concept.
Through rapid iteration, the visual progression evolved from a standard book into a hextech inspired projection device that would give a preview of the reward.
Story Presentation
League of Legends has made motion comics before, but given the limitations of mobile memory and screensize, we had to ideate a feature that be optimized for a mobile game. Due to certain licensing issues, we also could not call these rewards "comics" and would have to be called stories.
After conducting mobile market research, I proposed delivering lore rewards via an interactive visual novel format with some added interest of using the phone's gyroscope to allow for parallaxing layers.
Working with the development team in China, the team in Palo Alto, and the IP holders in LA simultaneously was quite the challenge but I learned a lot about managing conversations across multiple disciplines.
View more projects below.