Wallpaper showing the Dota 2 logo.
Wallpaper showing the Dota 2 logo.

Dota 2 Arcade

UI / UX

Year
April / 2021 — Present
Role
UI / UX Artist
Company
Spirit Bear
Tools
Illustrator, Photoshop, Figma

For the past 5 years I have worked as a UI/UX designer and artist on large-scale mods within the Dota 2 ecosystem, with our custom games surpassing 6 million combined downloads.

I collaborate with a global team of developers and have worked on more than 10 projects, each with its own complexity, where problems such as economy, combat HUDs, inventory navigation, seasonal banners, ranking and leaderboard panels, iconography, logo design and illustration are routinely my responsibility.

2,467,541 downloads.
2,467,541 downloads.
1,852,739 downloads.
1,852,739 downloads.
2,181,823 downloads.
2,181,823 downloads.
116,864 downloads (logo designed by me).
116,864 downloads (logo designed by me).

Revolt is a custom game mode centred on high-complexity inventory management. The core loop requires players to manage an 8-slot inventory of elemental runes, which can be combined up to 3 times — creating an exponential number of attack variations.

↗ Link to the Steam Community page

User interface built by the development team. User interface built by the development team.
User interface built by the development team.

The mod’s challenges centred on:

  • Reducing the cognitive load of identifying elements during fast-paced combat;
  • Smoothing the learning curve for the rune-combination mechanic;
  • Designing the complete visual identity, including logo creation and production-ready UI assets optimised for the Source 2 engine;
  • Establishing player feedback loops through user research, to validate the onboarding flows and the clarity of the HUD.

↗ Read the full documentation on Notion

Beginning of the user journey exploration.
Beginning of the user journey exploration.

To optimise the core gameplay loop, I restructured the main player portrait component into a centralised hub for fast management. By relocating the primary actions to the lower quadrant, players can equip, unequip and use quality-of-life features easily — such as one-click Auto-Upgrade — significantly simplifying management during combat.

Development of the stats and abilities interface. Development of the stats and abilities interface. Development of the stats and abilities interface.
Development of the stats and abilities interface.
Development of the stats and abilities interface.

I always look for narrative references so the interface carries a deeper meaning within the game’s story. The main inspiration was the circularity of the hero himself — IO is a sphere — and I also drew on elements from the Dota 2 × Portal crossover skin.

To solve the rune scalability problem — the combinations are effectively infinite — I used the Magatama shape as a reference, which let elements merge without requiring a distinct icon for every new rune.

The Dota 2 × Portal crossover skin for the hero IO, and the set of magatamas: the reference symbol for combining elements in the runes. The Dota 2 × Portal crossover skin for the hero IO, and the set of magatamas: the reference symbol for combining elements in the runes.
The Dota 2 × Portal crossover skin for the hero IO, and the set of magatamas: the reference symbol for combining elements in the runes.

Every interface goes through sketching, a low-fidelity animated prototype to test flow, and a high-fidelity prototype to validate the visuals and final interactions.

Tutorial intro screen and receiving the first rune. Tutorial intro screen and receiving the first rune.
Tutorial intro screen and receiving the first rune.
Rune management panels. Rune management panels.
Rune management panels.
General HUD and rune inventory. General HUD and rune inventory.
General HUD and rune inventory.

All assets were organised in Figma for the development team to access and control.

General icons used throughout the experience. General icons used throughout the experience.
General icons used throughout the experience.

The logo grew out of the game’s narrative concept, using IO as the letter O with the elemental runes around it to hint at the gameplay dynamic and the mod as a whole.

Revolt logo.
Revolt logo.

Screenshots of some of the live interfaces in the newer mods.

Hero selection screen and season panel. Hero selection screen and season panel.
Hero selection screen and season panel.
Perk selection panel at the start of a match, and illustrations for player reporting. Perk selection panel at the start of a match, and illustrations for player reporting.
Perk selection panel at the start of a match, and illustrations for player reporting.
Build creation panel and panel for customising sound messages. Build creation panel and panel for customising sound messages.
Build creation panel and panel for customising sound messages.
Tasks panel and leaderboard. Tasks panel and leaderboard.
Tasks panel and leaderboard.
Back to the main page