Case study 05 · Riot Games · 2014–2016

Wayfinding for 1,000 Rioters

Riot was moving an entire campus: 1,000+ employees into a new headquarters with more than 120 meeting rooms. MiniMap was the in-house answer. A mobile app to find your meeting, spot the nearest bathroom or kitchen, and book the closest open room before your laptop finishes waking up.

Role
UI & UX design
Team
"Product Riot": me plus a team of developers
Context
Campus move · 120+ rooms
Scope
Flows · Wireframes · Visual UI · Spec

The setup

New building, old problem

A campus move sounds like a facilities project until a thousand people can't find their 11:30. Riot's meeting rooms carried League of Legends champion names, a beloved campus convention that already existed. The rooms had personality but zero spatial logic. You can't deduce where "Garen" is from the name.

So the design bet was simple: don't fight the culture, navigate it. Keep the champion names front and center, let the map handle the geography, and make booking so fast that hallway squatting dies out on its own.

The thinking

Three decisions that shaped the app

  1. Map first, list never. The home screen is the floor plan with champion portraits as room pins. You orient by walking direction, not by scrolling an alphabet. Bathrooms and kitchens are pinned too, because during week one of a new building, "points of interest" means coffee.

  2. Two taps to a room. Quick Book asks exactly two questions, how long and how many people, then grabs the nearest open room. Every extra field is a meeting that starts late.

  3. Let the lore live. Each room page pairs its schedule with the champion's actual League lore and splash art. It costs one collapsible panel and buys the thing you can't spec: people wanting to open the facilities app.

The work

Wireframe to shipped screen

Toggle between the grayscale wireframes and the finished UI. The structure barely moves. When the skeleton is right, the visual pass is paint, not surgery.

Three grayscale wireframe phone screens: campus map with room pins, navigation arrow overlay, and the Garen room detail with schedule
Plate 01·A

The skeleton. Map, wayfinding state, room detail. Every later screen is one of these three doing a costume change.

Two high-fidelity screens of the Garen room: splash art header, capacity and equipment specs, book, navigate and report actions, schedule and expanded League lore panel
Plate 01·B

The paint. Garen's page in final UI. Splash art, capacity, cork wall and whiteboard specs, and the lore panel that made room pages worth reading.

Five-screen booking flow: map, wayfinding arrow, room schedule, quick-book with duration and attendee steppers, and confirmation
Plate 02

The Quick Book flow. Nearest open conference room: how long, how many, book. The steppers default to 30 minutes and 2 people, because that's what most ad-hoc meetings actually are.

Product spec laying out MiniMap MVP, 1.1 and 1.2+ roadmaps with annotated screen flows
Plate 03

Designing the roadmap, not just the screens. The spec split MiniMap into MVP, 1.1, and 1.2+. Ship map-and-book first, then contextual calendars, then search. Inside an agile team, the design deliverable is a sequence, not a poster.

Wireframes of meeting notification states: next-meeting card with countdown and message-the-owner flow
Plate 04

The nudge states. "Next meeting in 4 min" cards and a message-the-owner flow. The difference between an app you check and an app that checks on you.

The outcome

Culture as interface

1,000+Rioters moved to the new campus
120+Champion-named rooms, mapped and bookable
2 tapsTo book the nearest open room

MiniMap carried the campus move it was designed for. The same Product Riot tour of duty also included the intranet redesign, an employee directory, and a teams database: the internal tooling layer for a company growing at full sprint.

Looking back: the champion rooms taught me that adoption is a design material. We didn't invent the naming convention. We made it navigable, and that's why people opened the app.