Quick Look
Quick Look
Quick Look

Mapping the world of Runeterra for 100m fans

Team Credits

Sy Harris, Craig Parkinson, Vivianette Ocasio, Jeff Zhang, Christy Benson, Aleena Byrne, Dane Cook

My Role

Design & Product Lead

Business Impact

  • Created a positive impact on player engagement and furthered the development of the League of Legends IP
  • The map provided a much-requested, official visualization of the League of Legends world, which was enthusiastically received by the lore-focused community
  • The initial teaser trailer garnered over 750,000 view, and created an opportunity for the co-founder to tease the upcoming MMO
  • The map served as an internal tool for Rioters to align on storytelling and ensure consistency in world-building across different departments and projects

What I did

  • Created the concept and pitched it to stakeholders to get buy in
  • Product Strategy
  • UX & UI design
  • Creative Direction
  • Interaction Design
M

Overview

Runeterra is the fictional world of League of Legends. It has rich lore, characters, and stories. Until now, there was no map. This made it hard for players to grasp where everything takes place in the world. So, we built an interactive map that brought the world to life.

Fully Interactive

We didn't just want to release a map. We want to take our players there. That's why we made it fully interactive. You can explore anything you see and it's a deep well.

Interactive Map of Runeterra
Interactive Map of Runeterra with Noxus Highlighted
Interactive Map of Runeterra with Demacia Highlighted

Region View

When you click into a region you can explore the champions, places, and stories that inhabit it. This brought Runeterra to life because now everything has a sense of place.

Animated Landmarks

The camera choreography and rich animations fill the whole map. They enhance a player's immersion in the world.

Runeterra Map Examples

A Sense of Place

For the first time, every piece of art had a place in the world of Runeterra, which gave it context in players' minds. Understanding why Demacia was at war with Noxus now made sense.

Runeterra Map Examples

On Mobile Too

Many of League’s players around the world play LoL in PC Cafes and don’t always have access to a computer. So we made the interactive experience available on mobile too.

Runeterra Map Examples