WR Ranked Design System

In 2019, Ranked entry had a density problem. Three entrances — Solo, Team Match, Arena — sat side by side as equal cards and took up 70% of the screen. So a new player's first decision was which door, not where they stood or what they were climbing toward. The screen led with a choice that didn't matter and buried the one that did: your rank, your progress, the climb. It treated your tier as decoration, not as the center. There was no sense of standing, and no pull toward the next level.

We ran the interviews to find what motivates the players the moment they open Ranked: this is a moment of ambition. They come to measure themselves: how far have I climbed, how close is the next tier, what will it cost to break through. The pull is the climb itself. So we rebuilt it around the feeling: show exactly where you stand, and make the next tier feel close enough to chase.

By collapsing three entrances into one, we made the rank the subject of the screen. Solo, Team Match, and Arena run different matchmaking: solos queue against solos, premade teams against premade teams, because a coordinated party carries an advantage the system has to balance for. But which queue you enter is a matchmaking decision, not the first thing the Ranked screen needs to ask. We moved it downstream. That cleared the page to do one job: hold your current rank, your score, and the distance to the next tier, with everything else minimized to quiet. The trophy helmet sits at the center as the thing you're fighting for.

The original design made the rank a portal, not a badge — one shape doing two jobs. First, it's the way into the game: you launch your match through it, so the thing you press to play is the same thing that carries your rank. Second, it shows exactly where you stand — your tier, your division (two gems, Iron II), and your points charging toward the next step. The door into the Rift and the readout of your standing, in one component. That was the vision V1 set out to prove.

V1's most expressive state was the promotion series: the 2-5 games that decide whether you climb. The ring flips: it splits open into a row of win/loss lights, one per game, so the player reads the whole series at a glance. How many won, how many left, what's on the line. One ring, two jobs, no second screen. It's what the redesign was for: high-stakes standing you grasp in a single look. The ranked ladder it sat on was later tuned simpler for mobile, where the audience climbs more casually than PC's hardcore competitors — a game-design call to retire the Promo stage.

V2 rebuilt the rank to fit tight size constraints and scale cheaply. Ten ranks, Iron to Challenger, assemble from four components: the ring, the gem, the wing, and the emblem crest. Swap the parts, get the tier. One modular kit covers the whole ladder — it holds ten distinct ranks visually consistent and turns every future tier or seasonal reskin into a parts change, not a redraw. The original vision became a production system the team could extend it in the future.