Quick Look
Quick Look
Quick Look

Directing Universe, the definitive source of lore.

Team Credits

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

My Role

  • Design Lead

Business Impact

  • Enhanced player engagement and deepened player connection to the intellectual property (IP) of League of Legends.
  • Set the stage for the upcoming Riot MMO, a massive opportunity.

What I did

  • Creative Director / Lead Designer
  • UX & UI IC work
  • Product Strategy
M
League of Legends Universe Site

Overview

The world of Runeterra was a fractured, unfocused place in the minds of players. We built Universe to solve that. Universe is the digital lore compendium of the world of Runeterra, which League of Legends the game and Arcane are based on.

Comics Library

We built a custom interactive comics viewer. We also made a library for players to explore and track new items.

League Universe Site - Comics

Immersive Stories

We used visual layouts to put players into the stories of Runeterra. They made the stories more vivid.

League of Legends Universe Site - Immersive Stories

Content Season Hub

The creative teams at Riot generate an immense amount of content for players. It was hard to keep track of. So we concepted a seasonal content hub where players can consume it linearly.

League Universe Site - Content Hub

Alternate Universes

League has many alternate realities. Universe created a space for players to explore them more deeply.

League of Legends Universe - Alternate Universes

Crafting a Vision

I crafted a product vision from the player’s perspective. It shows their world with Universe in it. It outlined the current experience, and showed what the future would be like.

Vision of Universe Website

Low Fidelity

We considered various ways to organize our large amount of content. First, we used low-fidelity wireframes. These helped us map out patterns and flow without diving into a specific details.

Low Fidelity Wireframes for Universe

Brainstorm

Before wireframes, we’d spend hours thinking together about the experience. Here’s a collection of my whiteboard work that I did.

Low Fidelity Wireframes for Universe

Site Map

Universe was a hub for all the creative content around League and Runeterra. Mapping out where content would go was a crucial component of our strategy.

League Universe Site - site map