Mobile Game HUD Redesign
Reduced accidental inputs by 61%
Players reported frustration with accidental ability activations and poor health bar visibility during intense combat sequences.
Redesigned the HUD layout with larger touch targets, contextual ability grouping, and a high-contrast health system.
61% reduction in accidental inputs and 23% improvement in player retention at the 7-day mark.
Sole designer. Ran playtests, designed all UI assets, and worked directly with Unity engineers on implementation.
The Problem
The existing HUD was designed for tablet and scaled down for phones without adaptation. Touch targets were too small, abilities were grouped alphabetically instead of by combat context, and the health bar used a thin gradient that was nearly invisible during bright combat effects.
“"I keep hitting the wrong ability in the middle of boss fights and it costs me the run." — Player review, App Store
Research & Discovery
I analyzed 500+ player reviews mentioning UI issues, ran 8 moderated playtests with screen recording, and benchmarked 6 top-performing mobile RPGs. The data showed that 73% of accidental inputs happened during abilities that were adjacent to the movement controls.
Design Process
I created 4 HUD layout variations and tested each with 5 players. The winning layout separated offensive abilities from defensive ones, placing them on opposite sides of the screen. Health bars were redesigned with a dual-layer system: a thick colored bar with a numeric overlay.
Final Solution
The final HUD features context-aware ability grouping, 44px minimum touch targets (up from 28px), a high-contrast health system visible over any background, and a cooldown visualization that doesn't rely solely on color.
Results
Post-launch analytics showed a dramatic drop in accidental ability activations. Player sentiment in reviews shifted from UI complaints to gameplay praise. The App Store rating climbed from 3.8 to 4.2 within the first month.
Reflection
This project reinforced the importance of designing for the worst-case scenario — in this case, fast-paced combat with screen effects. What looks clean in a static mockup can fall apart in context. I now always test UI with the most chaotic gameplay footage I can find.