Game UI Design

Here is some of my process for creating UI using UX principles, with an accessible flair.

Finished Examples

Personal Project

A personal project I made to see what UI I could create in only one afternoon. Art and design done by me.

Created using Figma

Eyes of the Forest

A pause/settings menu made for a senior game project. Design by me- tech by Ridley Liu - art by Chloe Ng

Created using Unreal

Redesigning ‘Baulder’s Gate 3’ ‘s Inventory UI

I combined the simplicity of BG3’s console UI with the mobility and detail of their PC UI.

Created using Figma and Procreate

Bubbo’s Calling

Made for “Global Game Jam”. The menu and assets took about 3 hours to create. Art and design done by me.

Created using Figma, Procreate, and Unreal

Personal Project

Quick project to test out Figma animations. Thank you Tim Gabe for the tutorial

My Focus

  1. Accessibility

    The settings themselves must be useful and applicable to the user, while the menus need to be readable and easy to navigate.

  2. Testability

    All settings should be clear enough to test easily and iterate on.

  3. Modular

    Settings should be easily added and removed, and the layout should be easily altered.

  4. Demonstration

    The prototype needs to clearly communicate its concepts and usability to the rest of my team.

Mock-Up Process

  • Finalized Prototype

  • Stage 1, Blocking

  • Stage 2, Sections

  • Stage 3, Defining

  • Stage 4, Information

  • Stage 5, Adjustments

  • Stage 6, Polish

Execution with a Team

  1. In-Engine

    First, the settings prototype is given to my engineering team to be prototyped in-engine.

  2. Testing

    Then the user research team, including myself, will study how users interact with the new features.

  3. Iteration

    The data collected will help me work with the engineers to make appropriate changes, and repeat this cycle as needed.

  4. Finalize

    Finally, the UI artist will make the finalized version of our menu, with the finalized settings.

Execution without a Team

While I love having programmers and artists to support my designs, that is not always possible. Most of the game teams I have been in, I have done both the technical and art side of UI creation.

While I have a history of art, I am relatively new to programming. That doesn’t mean that I am not willing to tackle any problem that is handed over! I will need resources and possibly some help, but I am very willing to learn new tools and techniques

Lastly, why it is important to get features in early!

2/3 games that I have created settings menus for have had to cut important features because we did not give enough time for them to be implemented early.

I have learned to advocate early and often, as well as cultivate a good relationship with the team that is helping me implement.