WR Portal Experience

In 2019, Wild Rift's mode select was rectangular cards assembled in Photoshop — no design system, no shared documented style rules. Visually, it read like a knockoff of HOK (Honor of Kings). I was looking at a product that had no visual idea of its own, targeting a younger, mobile-native audience that deserved one.

The direction came from the fiction, not a moodboard. In Piltover, portals are built to travel — Jinx's machine in the Wild Rift promo video, a Hextech device that opens a window into another world. So I reframed the whole problem around one question: if the phone is the portal, what should every screen in the pre-game flow feel like? Everything after this followed from that question.

Square or circle. Both are legal inside League of Legend's Hextech language, but they mean different things. A rectangle anchors you to a surface. A circle is an opening. A pre-game flow meant to feel like travel cannot begin on a surface. I chose the circle as a conceptual rule, not a style preference: the shape had to carry the idea that you are stepping through a portal into the Rift, not browsing a menu. That rule became the thing every later decision had to answer to.

Play button, mode select, lobby, champion select, game. We rebuilt every stage of the pre-game flow around the portal. The circle morphs as you move deeper, the environment parallaxes behind it, and by the time you reach the lobby you feel like you have traveled somewhere. It shipped as the default flow for roughly 30 million monthly players. The bet landed where it was hardest to: it reads fresh and modern, and still unmistakably League.

Three designers built the foundation. Eighteen build on it now — ten visual, eight UX, across the RT and QT teams. The real shift was getting them off Photoshop and onto Figma: we replaced hand-built files and Google Drive reviews with one shared system. Consistency stopped being something we caught in review and became a property of the system itself.