← Hogwarts Mystery case study

Game UI portfolio · Jam City

Interface art for Harry Potter: Hogwarts Mystery

Zohan Lin — HUD, iconography, menus, minigames and event art for a live mobile RPG.

A full component system built to ship: every button, frame and icon drawn in four house themes, exported at three scales, and named so engineers could drop it straight into the build. The interactive screen here is assembled entirely from those exported pieces.

  • HUD & navigation
  • Icon systems
  • Live-ops events
  • Minigame art
  • @1x / @2x / @4x export
Energy24
Coins1,260
Gems85

Charms class · Choose a responseA first-year's spell has gone wrong in the corridor.

Interactive mock · pick a choice to see the states change16:10 · all exported assets

Minigame art

Hogsmeade memory match

An illustrated card deck for a timed matching minigame: one card back and a set of fronts themed on joke-shop goods from Zonko's. Each front uses its own color frame so pairs read at a glance on a small phone screen. Try it.

0Moves
0/8Pairs
0:00Time

Second deck · Hogwarts set

memoryMatch_cardFront*.png · 20 fronts · 208×296 @4x

Component states

Every frame has a locked, open and finished state

Quest and lesson tiles need to tell players what they can tap right now. I drew each container in three progress states, each with an active (selected) and an idle version, plus button families for primary, secondary, premium and disabled actions.

Progress tiles · active / idle

Locked, active
locked
Unlocked, active
unlocked
Complete, active
complete
Locked, idle
Unlocked, idle
Complete, idle

Button family

Continue

hp_btn_cta_med

Later

hp_btn_secondary_med

85 Gems

hp_btn_prem_med

Locked

hp_btn_inactive_med

Back
Close
Info
Arrow

Meters

star fill
star gain
star loss
health
energy
creature

Gain and loss fills let the animation layer show a stat change before it settles.

Iconography

Three icon families, one silhouette language

HUD icons are solid parchment shapes with a dark keyline so they hold up over any scene. Location and navigation glyphs are cyan line drawings with a soft glow, matching the map. Combat icons add color only where it carries meaning: red for damage over time, teal for heal, gold for stun.

Painted icons

Lessons, rewards and level-ups

Spell lessons get a painted hex badge with the spell's effect as the hero. Collectible items are drawn as upgrade ladders so the reward for each level is visible before the player earns it.

Notebook, levels 1–4Notebook_L1–L4@4x · 144×144
Creature feed bag, levels 1–3feedbag_L1–L3@4x · 256×256
Holiday event presents & ornamentsHoliday/*_Present.png · ball 1–2.png

House theming

One layout, four houses

Players belong to a house, so identity assets ship as a set of four: crest, banner, point gem, map glyph, background, and seasonal pieces like the house sweater mascots. The structure stays fixed and only color, animal and material change.

System design

Duel stances

Duels run on a rock-paper-scissors loop between three stances. I designed the stance badges, the hex choice frames in matching trim, and the diagram used to teach the loop in the tutorial.

Diagram: Aggressive beats Sneaky, Sneaky beats Defensive, Defensive beats Aggressive
Aggressive
Defensive
Sneaky
stance_red
stance_yellow
stance_blue

Feature work · in progress

Magical creatures hub

Early UI for a creature-care feature: a care panel over the 3D scene, a creature badge in three readiness states, and feed and bond actions that light up when a task is ready to collect.

Work-in-progress creature hub screen with care panel

Badge states

inactive
active
ready

Actions · idle → ready

feed
feed_ready
notif
add
add_ready
xp_doober

Production

Built for the build

Art only helps if it lands in the game correctly. Every asset followed one naming pattern and shipped in three densities, so engineers could find, swap and scale pieces without asking.

hp_btn_cta_med@4x.png
hp_Project prefix
btn / icon / container / hudAsset type
cta / choice / navRole in the UI
sm / med / lrg · active / inactiveSize and state
@1x / @2x / @4xScreen density
@1x · 37px
@2x · 74px
@4x · 148px
680+Exported PNGs in the main set
4House variants per identity asset
3Densities per UI asset