Deep Upgrades.
Zero Regret.

Role

Lead UX — Glyphs & Relics

Owned the UX process and interaction models from pre-production through launch. PC and mobile.

Responsibilities

Problem definition

Audience analysis

Player verbs

Player paths

Information architecture

Wireframes

Motion target critiques

Team

6 Eng · 1 GD · 1 PM · 2 Art · 1 UX Dir · 1 Audio

Date

November 2023

The Problem

Progression had a ceiling.
Players had hit it.

Players had mastered the upgrade loop and hit a wall. Gear, abilities, and leveling all had a ceiling. There was no way to make your heroes feel like yours. Without something new to chase, there was no reason to keep investing.

Before — collection screen, maxed heroes with no progression path

Before — Original UI · No upgrade path

Decisions that gave
depth a shape.

01Information Architecture & Research

Architecture first. Screens second.

We mapped the full architecture of the feature before a single screen was designed. Unlocking the Relic, acquiring Glyphs, equipping them, upgrading them, filtering, sorting, selling. Without it, none of the other decisions had a place to land.

Full information architecture map for the Glyphs system

Working IA — Miro

Information Architecture & Research

Verbs. Paths. Architecture.

I came into the project without deep knowledge of mobile upgrade systems. Competitive analysis of Dislight and Marvel Strike Force gave me the foundation. I learned how similar systems handled upgrade flows, what worked, and where players got lost. From there I could start mapping our own system.

Strikeforce Competitive Analysis — Miro

Dislyte Competitive Analysis — Miro

I started with player verbs, every action a player could take within the feature. Unlocking, acquiring, equipping, upgrading, filtering, sorting, selling. Those verbs became a site map. The site map became flows. Flows became the IA. By the time the screens existed, the hard decisions had already been made.

Site Map — Miro

→

Player Paths — Miro

02UI States

The system introduced itself before it was active.

Players had only ever acquired Glyphs through battles and the store. The equip system was new territory. I designed the pre-unlock state to show slot shapes and surface a tooltip before the system was active.

Elrond hero screen — Glyphs unlock at level 15

UI States

Sealed. Not hidden.

After the full Relic system was built, I stripped it down to its bare bones to build the pre-unlock state on the hero detail screen. Slot shapes with a lock icon in the center and a single tooltip were all that was needed. The visual effects fired when the player came back to the screen at level 15 or higher.

Final States

Locked state

→

Pre-unlock preview

→

Unlocked

03Interaction Design

Rotation solved the slot.

Every Relic slot shares the same shape. Rotation is the only variable. That single decision made it clear which Glyph belonged where. A pending icon on the Relic triggered a contextual menu to revert or confirm. Set bonuses were communicated through shape, VFX, and a dedicated UI at the bottom showing active set bonuses.

Old screen layout — hero with glyph slots

Interaction Design

One shape. Every slot.

We knew early the Glyphs needed to look like carved stone, something that felt like it belonged in Middle-earth. The real design problem was how to arrange six slots around the weapon in a way that felt natural and readable. I iterated through gray box wireframes and sketches until the circular arrangement landed. Once the layout felt right, I built it responsively in Figma so I could swap configurations and test quickly. The far right image is the final gray box configuration. From here it was connected to the design system and shipped.

Gray Box Iteration

→

Final Configuration

04Collection Management

Hundreds of Glyphs. Players still needed to find the right one.

Players could carry hundreds of Glyphs across a large roster. Sorting by rotation seemed logical until it added more complexity than it removed. I combined all rotations within a set instead. Tap a slot and only the Glyphs for that set highlight. Everything else fades.

Glyph inventory — lore and quickness sets

Collection Management

Sets were the right filter.

Sorting by rotation added a layer of complexity players didn't need. I figured that out early through sketching. Combining all rotations within a set removed that layer. Equipping and removing Glyphs between the inventory panel and the Relic UI became seamless and intuitive without a tutorial.

Collection Management

Tap Glyph in Inventory when nothing is selected

→

Corresponding slot selected

Equip Glyph in an Empty Slot

Tap the empty slot in the weapon widget

→

Empty slot selected

05IA / Wireframes

Every upgrade showed its hand before you committed.

At level 1 only the primary stat is visible. Secondary stats revealed one at a time as the Glyph leveled up, or all at once with enough Gold. I mapped the stat reveal system to existing Galaxy of Heroes tech and designed the animated track preview UI and animation vision. Players always knew where they were and what was coming.

IA / Wireframes

No surprises.

I used the Star Wars Galaxy of Heroes upgrade screen as the reference for the stat reveal system. The tech was already built. I mapped our system to it and iterated through versions of the screen until it became the final Glyphs upgrade UI.

SWGoH UI