Game HUD with challenging limitations

I began working with HiberWorld's new custom engine shortly after the platform transitioned away from its old JavaScript-based engine. My task was to create the UI for all the new features we had planned.

When I joined the team, the UI was in its early stages with basic functionality and several usability issues. The desktop UI was merely a scaled-up version of the mobile UI.

The existing interface had accumulated the usual early-stage problems: it worked, but it fought the player. Contrast failed against bright backgrounds, button states were ambiguous, and controls were larger than they needed to be, leaving no room for the features we had planned.

Because the desktop layout was a scaled-up mobile layout, neither felt designed for the device it was on.

Given the limitations, I couldn't be bold with the design choices, so the focus went into simple, clear and consistent UI elements. That constraint turned out to be clarifying rather than limiting.

Buttons were resized and repositioned for logical grouping and for the features we knew were coming. Placement followed phone ergonomics and a grid system for alignment and spacing, so the same rules held whether the player was on a phone in portrait, a phone in landscape, or a desktop browser.

I explored each layout in parallel directions — one driven purely by grouping, one by thumb ergonomics, one by strict grid alignment — and compared them against real worlds rather than empty mockups.

I collaborated closely with the developer and the product owner to make incremental improvements without derailing other priorities. Working inside one engineer's capacity meant sequencing changes so each one shipped on its own rather than waiting for a big release.

We iterated continuously based on internal testing, player feedback and the arrival of new tools and features. Despite the technical constraints, the resulting interface is scalable, clear and consistent.