Game HUD with Challenging Limitations

I led the design for HiberWorld's comprehensive game UI, covering both play and creation experiences. The goal was to develop a scalable, responsive HUD suitable for low-end devices. Adhering to the engine's GUI system limitations pushed us to find creative solutions.

The New HiberWorld Engine

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

Starting from Scratch

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

UI mockup of early HiberWorld game HUD

UI mockup that I started working with.

Focus Area and Limitations

A significant portion of our users were teens from India using low-end devices or kids in the US playing on iPads. The UI needed to be culturally inclusive and responsive to various screen sizes.

At the time, we had only one developer working on the game UI in C++ and Noesis, which meant implementations took longer. Using an older version of Noesis, we also lacked basic functionalities like drop shadows and animations.

My Vision

Given the limitations, I couldn’t be too bold with my design choices, so the focus was on creating simple, clear, and consistent UI elements.

Buttons were resized and repositioned for logical grouping and future features. The placement adhered to phone ergonomics and a grid system for proper alignment and spacing.

Create mode mockups

Some of my mockups for a new create mode UI.

There’s Never Enough Time

As a small startup, we had to work quickly to deliver results, often juggling multiple projects. I collaborated closely with developers and the product owner to make incremental improvements without detracting from other priorities.

Iterate, Iterate, Iterate...

We made many iterations based on internal testing, user feedback, and the introduction of new tools and features. Despite technical constraints, the resulting interface is scalable, clear, and consistent.

Create and play mockups

Some of my mockups for a new create mode UI.

The Result - 5 Million Games Created

Since 2022, the UI has supported the creation of over 5 million virtual worlds, with registered users spending an average of 40+ minutes per day on HiberWorld.

To see it in action, head over to HiberWorld and try it out yourself!

Other Projects

CASE STUDY

Commerce Experience in Game Engine

I designed a full commerce experience, allowing users to purchase avatar items without leaving the game engine.

UI DESIGN

PROTOTYPING

USER RESEARCH

CASE STUDY

Vehicles and Race Match Game Mode

Facilitated game design of vehicles and the user experience of race matches in HiberWorld.

GAME DESIGN

PROTOTYPING

WORKSHOPS