top of page
Mask group
Technical UI
Mask group
Personal
Mask group
8 Weeks
Mask group
Unreal Engine

WHY THIS TOOL?

Character creators are an integral part to player role play and character connection in RPG games, but implementing them in UMG with accessibility and changes in mind can be daunting for new developers. This tool aims to make the UI of this feature as accessible and modular as possible.

TARGET AUDIENCE

KEY FEATURES
DEVELOPER TOOL

A modular UI tool for creating character creators in RPG games. Designed for developers who want customizable character systems without extensive UMG knowledge.

Due to the mentioned requirements, the tool has:

  • Data tables and data assets storing all necessary information;

  • Modular widget system that references data tables for spawning and updates;

  • Character data saving and loading functionality;

  • Exposed widget data for easy modification.

When learning UMG in Unreal Engine, the complexity can be overwhelming for beginners. This tool makes character creator UI accessible to developers with minimal blueprinting experience.
The design prioritized three key requirements:

  • Easy to use with little blueprinting knowledge;

  • Self-contained with no additional plugins;

  • Familiar interface comparable to existing design tools.

DESIGN PROCESS

During this project, key skills developed:

  • Extensive research on game features;

  • Figma wireframing for tool and interface design;

  • Engine research to identify optimal implementation methods;

  • Data assets in Unreal Engine 5 for data storage and retrieval;

  • Creating modular tools for specific audiences;

  • Playtesting for usability and functionality;

  • Writing pipeline documentation for novice developers.

The project followed a simple structure:

RESEARCH

FEATURE BREAKDOWN

IMPLEMENTATION

DOCUMENTATION

RESEARCH & FEATURE BREAKDOWN

RESEARCH

KEY FEATURES
PLAYER EXPERIENCE

To understand what makes successful character creators engaging, Baldur's Gate 3 served as the primary reference.

A Zubek Model analysis identified which mechanics drive player experience and how to replicate them.
Key findings:

  • Seamless menu navigation creates a simple user journey;

  • Built-in customization options for every button make choices feel unique;

  • Pre-built characters and save functionality reduce friction;

  • Consistent visual language across menus improves clarity;

  • Moveable widgets allow personalized layout.

GAME RESEARCH DOCUMENT

FEATURE BREAKDOWN

FEATURE BREAKDOWN

Game paint-overs were used to define the separate elements of the feature while Figma prototyping was used to create an outline of what engine functionality will be.

GAME RESEARCH DOCUMENT
WIREFRAMING

FEATURE BREAKDOWN

FEATURE BREAKDOWN

Before digital implementation, wireframes established visual language and validated functionality.

This helped define the widget nesting structure:

  • Main HUD

  • Navigation Buttons Box

  • Selection Menu Box

  • Summary Box - has multiple states.

    • Race State

    • Class State​

    • etc.

IMPLEMENTATION

FEATURE BREAKDOWN

For beginner-friendly implementation, each widget uses basic nesting that developers can customize later.
The main widget splits into boxes where nested widgets spawn based on data table references. Each data table corresponds to a specific menu, keeping the structure organized and scalable.

IMPLEMENTATION

LAYOUT
image 34
DATA TABLES

IMPLEMENTATION

FEATURE BREAKDOWN

Data tables access the widget's exposed information, allowing developers to preview buttons and duplicate existing ones for consistency.
This approach resembles Excel spreadsheets which is a familiar format for most developers. The table structure also enforces clear variable organization, reducing errors during expansion.

image 35

IMPLEMENTATION

FEATURE BREAKDOWN

For easy navigation of the tool the variables were sorted into simple and clear categories while exposing the variables that will be used most. In addition, many of commonly used functions are outlined within the blueprint for a quick overview.

NAVIGATION
image 36
image 37
EXPANSION

IMPLEMENTATION

FEATURE BREAKDOWN

For developers looking to expand the tool, clear code organization was essential. Custom macros handle common tasks, while consistent colour coding and detailed comments identify which data tables connect to each blueprint section.
This documentation approach helps developers learn the system while making modifications.

image 38
image 39

DOCUMENTATION - In-Depth Documents

COLOUR CODING

DOCUMENTATION

FEATURE BREAKDOWN

Consistent colour coding helps developers navigate the blueprint:

  • Purple - Pre-Construct functions

  • Cyan - Custom Events

  • Pink - Interface events

  • Green - Developer notes

  • Red - Error/Debug

Comments relate directly to widgets, making it easy to trace which data table affects which UI element.

image 40

DOCUMENTATION

FEATURE BREAKDOWN

Here is a more detailed overview of the research that was done on Baldur’s Gate 3’s character creator.

The analysis examined:

  • Core mechanics that drive player engagement

  • UI patterns that create seamless navigation

  • Visual language and consistency

The research revealed that successful character creators prioritize:

  • Immediate visual feedback for every choice

  • Clear categorization reducing decision paralysis

  • Pre-built options alongside deep customization

  • Consistent button language and layout

These findings directly shaped the tool's feature set and interface layout. The data table structure mirrors BG3's categorization approach, while the wireframe design emphasizes visual feedback.

GAME RESEARCH
RESEARCH FOCUS
KEY FINDINGS
INFLUENCE ON DESIGN
GAME RESEARCH DOCUMENT

DOCUMENTATION

FEATURE BREAKDOWN

Before implementation, engine research identified the most effective methods for building the tool in Unreal Engine 5.

  • Identify UMG capabilities for dynamic widget spawning

  • Compare data storage methods (data tables vs. data assets)

  • Evaluate performance implications of different approaches

  • Data tables offer familiar Excel-like structure

  • Modular functions reduce code duplication

  • Icon support possible through texture references

These findings led to choosing data tables and assets for information storage. The research also revealed opportunities for features like icon, colour, sound and border variance support, as well as modular widget nesting that weren't initially planned.

ENGINE RESEARCH
KEY FINDINGS
ENGINE RESEARCH DOCUMENT
INFLUENCE ON DESIGN
RESEARCH FOCUS

DOCUMENTATION

FEATURE BREAKDOWN

Since this tool targets beginner developers, clear documentation was critical. The pipeline document guides users through setup, usage, and expansion without requiring deep UMG knowledge.

  • Initial setup and integration

  • Creating characters using the tool

  • Adding new options to data tables

  • Expanding functionality with custom features

  • Troubleshooting common issues

Through user testing, the documentation was refined to ensure readability for developers with limited UMG experience. Each section includes visual examples and step-by-step instructions.
Beyond basic usage, the document teaches developers how to modify and extend the tool. Sections explain adding new variables, updating widgets, and creating custom features—empowering developers to make the tool their own.

ACCESSIBILITY
PIPELINE DOCUMENT
PIPELINE DOCUMENT
STRUCTURE

RETROSPECTIVE

The tool had succeeded within the target audience of developers and was an amazing exercising in learning more about widgets, modularity and engine constraints. I use the best practices for modularity present in this project as much as I can - focusing on reusability, ease of use and minimizing direct dependencies.

If I were to tackle this project again, however, these would be the main changes:

  • Research more into the data storage and use during runtime earlier in the project to define their strengths and weaknesses.

  • Research all UMG widgets to find out their uses cases and reduce as many draw calls as possible. This would have also reduced the amount of nesting necessary for some features.

  • Begin functionality testing with other developers a lot earlier for prioritising next features or direction of the tool.

bottom of page