R&D: Hawthorn

League players are getting older. The lore and the adventure are still what they come back for. A match on five other people's schedule is not. Hawthorn keeps the lore and drops the schedule.

• A unique way to experience the lore. Storytelling is the product, not the wrapper on it.
• Built as an ongoing service game, so the relationships and the stories keep developing instead of ending at a credits roll.

Hawthorn started with nothing to inherit. No color system, no typography, no shape language, no components. A card game and a roguelike and a hero collector at once, inside an IP with twelve years of visual history it could not simply copy.

The problems stacked at three levels, and none of them is a visual problem on its face.

• Research the competitors and every League studio product.
• Find the theme that fits Hawthorn, and only for Hawthorn.
• Define the visual pillars, then the color system, typography and shape language.
• Take it from game flow through to HUD design.

I worked with the game designer, the other UX designer, the art director and the artists. The system had to survive all four of them using it.

Defining the pillars. The product side and the creative side each had their own list, and neither was written in a language UI could be held to.

Product goals

• Get the player to challenge at their own pace.
• Deep devotion to the champions.

Creative direction pillars

• Discover Runeterra: belonging, familiar
• League fantasy delivered
• Character driven
• Powerful celebrations
• Player investment

Seven measurements. None of them tells you what a corner radius should be. I cut them down to two that UI/UX could actually be judged against, and wrote what each one is not, because that is the half that stops a system from drifting.

Two passes. First the studio, to find what a League product is not allowed to lose. Then the competitors, to find what a turn-based hero collector with roguelike gameplay already asks of a player.

• Genshin Impact: soft and focused shape language.
• Arcane: color tone. Imperfect, hand made, with wear and tear.
• Honkai: Star Rail: minimum in-game UI.

Each pillar got one instruction, so the palette could be checked against it.

• Runeterra Fantasy: hextech blue with a purplish hint. Add a warmer, richer tone to the blue.
• Always Invited: a warmer tone overall.

Keeping the palette muted was the move that paid off twice. It reads as welcoming, and it leaves the saturated end of the range free. That range is where each region of Runeterra and each individual champion gets to read accurately, instead of fighting the interface for attention.

The hextech corner is the studio's most recognisable signature, and every product cuts it differently. I pulled the corners out of all four and looked at them on their own.

• Runeterra Fantasy: hextech influenced.
• Always Invited: rounded, softer corner.

Those two pull against each other on purpose. The result reads as League on sight and still opens rather than guards.

Handcraft is easy to say and easy to fake. So I tested it the cheapest way. Same modal, same background, one variable changed. On the right the panel sits on paper, with a torn edge and a shadow that does not line up perfectly. It is a small move and it is the whole pillar.

The combat HUD is where the two pillars stop being adjectives. Eight regions, each with its own states and rules. Relic bar, HP bar, intent icons, enemy tiers, turn indicator, bottom HUD, cards and dungeon loot.

Honkai's lesson applied here. Minimum in-game UI, so the champions hold the screen and the interface only tells you what changed.

The clutter was a symptom. The cause was that intent had been drawn one case at a time, so every new rule arrived as another icon and more text to parse.

Define the zones The positioning system had real depth, and players could not see it because position was implied rather than drawn. I defined the zones on the board so a player reads where they stand before they have to think about it. The depth stops being a hidden rule and becomes something you can look at.

Then make the icons a system, not a pile The sorting started as a matrix. Every attack type crossed with every effect, one drawing per cell. It tells you how many states the game has and it does not scale. Nothing in it is reusable, so the set can only grow.

The matrix has a structure hiding in it. Every cell is really two questions: what is about to happen, and how it arrives. So I split the set along that seam.

• A is the effect. Alert, wait, buff, debuff, magic, shield, heal.
• B is the delivery. Dagger, sword, heavy, single target, ranged, area, multi, move.

A is an icon on its own. B is an icon on its own. A plus B is its own icon, and it reads as the combination instead of as a third thing to memorise. A player learns the parts once, then reads every pairing without a tooltip. New cases combine rather than add, so the set stops growing.

A combination is two glyphs, so it wants more room than one. It does not get more room. The HUD gives an intent icon one slot, and a combined icon that grows breaks the row it sits in.

I nested A into B's corner and pulled the composite bounding box from 84 down to 64, the same frame a single icon occupies. The pairing reads at a glance and costs the layout nothing.

Shape alone would have made the composites hard work, because a nested glyph is small. So color does the categorising and shape does the specifics. Every effect owns one hue, which means a player can sort a screen of intents before reading a single one of them.

The card is the smallest place the whole system has to hold. Nine elements, and the ones that matter have to be readable above the fold of the deck, at thumb size, mid-turn.

Mana cost, feature art, deck theme, effective range, name, abilities, attribute color, description, keyword. The feature art carries a visual metaphor for the ability, so a player can identify a card without reading it.

One goal: a seamless flow from the Runeterra map down to the level map.

• Make the Runeterra map feel vast and full of adventure.
• Keep the flow immersive, so players dive into the world and embark on a journey rather than click through a menu tree.

The rule I gave the flow was one line. Every step, we come closer to the champions. World map, region, city, place, floors. Each screen hands off to the next without a hard cut.

The flow needed a mechanism, not a promise. The camera became it. Three views, each one lower than the last.

• Exploration view, top view. Look around before you commit to Runeterra.
• Dungeon view, lower top view. Inside the building now, opening rooms one at a time.
• Combat view, side view. Eye level with the champions.

Top view to lower top view to side view. The camera drops as the player gets closer, so the promise is delivered by the framing itself instead of by copy telling the player they are on a journey.