League of Legends

Creating the
Interactive Map
of Runeterra

My Role
Design Lead / Creative Direction / Product Strategy / UX & UI
Team Credits
Sy Harris, Craig Parkinson, Vivianette Ocasio, Jeff Zhang, Amanda Jeffrey, Efflam Mercier, Christy Benson, Aleena Byrne, Dane Cook

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.
Visit the Map
Interactive Map of Runeterra

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 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.
Runeterra Map Examples
Runeterra Map Examples

Animated
Landmarks

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

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

Thanks for
stopping by

Projects

Directing 15 Seasons of Fortnite
Building Fortnite’s UXUI org
Creating Fortnite’s new design system
Creating the interactive map of Runeterra
Designing Universe
Building a multi-brand design system for Riot Games
Redesigning League of Legends player support site
Designing an interactive compare feature
Redesigning amazon.com

LinkedIn

Medium

Resume

tyler.lahaie@hey.com

Tyler LaHaie Logo
© 2024
Made with care by Tyler LaHaie