Overview Problem Research Design Takeaway

Catador

Game UI & HUD Design

My Role

Sole UI Designer (UI/UX, Wireframes, Prototyping)

Impact

Accessibility: +42%
User satisfaction: +77%
Error rates: -64%

Platform

PC (with future mobile/console considerations)

OVERVIEW

What Is the Project About

I designed the complete UI and head-up display (HUD) system for a rogue-like game from scratch, covering all core gameplay and meta systems. My work focused on usability, readability during fast-paced combat, and visual consistency with the game’s established art direction.

Problem

Lacking a designer makes the original UI incoherent and visually unappealing. Users cannot quickly and easily understand the UI and HUD.

My Responsibility and Process

As the sole UI designer, I was responsible for all game UI and HUD elements, creating a lightweight, scalable system, and annotating mockups for developer handoff. The UI structures and components were designed with the visual style set by the art director.

Solution Overview

Main Menu

Costumed button design to fit the game visual style
Clear content hierarchy to easily understand the UI
Greeting players with warm welcome for pleasant UX

Character Selection

Consistent title and exit button placement in modal design with overlay
Easily understand and differentiate characters with more details
Placing character selections closer with CTA for easier UX to continue the flow

Gameplay View

Clean gameplay view for players to focus on the game
The direction guide only shows up when player is inactive over 5 seconds
Different arrows indicate directions of items off-screen

PROBLEM STATEMENT

The original UI was incoherent and visually unappealing. Players cannot quickly and easily understand the UI and HUD.

Since there was no designer initially, the UI was unclear, making it difficult for players to understand the game. As the sole UI designer, I build up a simple system with fonts and colors to design a coherent game environment.

Project Scope and Limitations

The challenge was to design a UI that:

Remains readable during intense gameplay
Fits the game’s visual style without overwhelming players
Is easy for developers to implement and iterate on
Scales across multiple systems (PC, mobile, console)

RESEARCH + ANALYSIS

Competitive Research

To better design and follow industry standard, I conducted research on potential competitors such as Cult of the Lamb and Vampire Survivors. I was able to analyze interactive and visual elements with the usage of colors and fonts for visual appeals and accessibility.

Selected state helps user focus on an item in complex interface
Titles could be stylish while body text should be kept clean and clear

DESIGN DECISIONS

Customized Game UI

Foundations: Style and System

Instead of building a large design system upfront, I created a lean, flexible component set that could evolve alongside gameplay changes, though it is still responsive for desktop, mobile or console controls. Using the same design for hover and focused states creates a consistent gaming experience in PC or console controls.

Feedbacks and Iterations

During the process, I iterated designs based on internal play-testing feedbacks, stakeholder’s input on clarity and tone, and developer’s feedbacks on feasibility and layout constraints.

Collaboration and Annotation

To support smooth implementation, I annotated spacing, font sizes, colors, and component behaviors. This reduced back-and-forth discussions and allowed developers to implement UI more efficiently.

TAKEAWAY

What I Learned

This project strengthened my ability to design game-focused UX that balances aesthetics, usability, and technical constraints. Designing UI from scratch while collaborating closely with developers taught me how to think beyond screens, considering pacing, player attention, and implementation realities.

What’s Next

Test in Unity alongside mobile and console controls
Add tooltips to improve clarity for interactive elements
Design a landing page website for game introduction

⇧