Baldur's Gate 3
Controller UX/UI Redesign
Project Overview
A passion project aimed at improving the controller-based UI experience 🎮 in Baldur's Gate 3 by redefining the radial menu system for better usability and consistency.
The Challenge
Design an accessible nested radial system that is intuitive but doesn't overwhelm the player with too many secondary and tertiary sub-menus.
Figma, Illustrator, Photoshop
Project Length: 4 Weeks
Too Many Radials!
Baldur's Gate 3 has a lot of spells, abilities and items which can easily become cluttered and overwhelming with the original radial carousel menu. Leaving users to sort through pages of radial screens to find what they want to use.
The Solution ✅
Iterated multiple radial layouts , ran usability tests, and optimized the number of sub-menus in a nested radial menu to balance accessibility and depth. All while maintaining the aesthetics and style of Baldur's Gate 3
The Process!
Ideation
After sketching multiple iterations between different nested and hybrid radial menus, I decided that the most optimal for categorization would be within a nested system.
User Flow
After deciding on a Nested Radial System, I needed to map out a user flowchart to see how accessible and efficient it is for a player to find and use the ability, spell or item desired.
Usability Testing Notes 📝
Players enjoyed the organization of the nested radial screens, but wanted to see more consistent iconography across them all.
Players wanted an indication of what nested screen they were on. (Example: Item wheel/spell wheel)
What to Improve
Icon Clarity: The main radial screen should feel seamless with the rest of the iconography. Following the same aesthetic of Baldur's gate 3.
Text Placement: Add prominent and legible text to the center of the sub-menus.
Style Guide
I closely studied Baldur's Gate 3 Typography, Iconography and button layout to get a great understanding of how to mesh them all together in a seamless fashion.
Radials that didn't make the Cut
I wanted to try out a variety of icon and wheel colors to see which would fit the aesthetic of Baldur's gate 3 the best & which would be the most accessible and easy to navigate.
User Response 🎮
Players liked the darker orange radial color as it fits the game's aesthetic and has a stronger contrast with the icons.
Players enjoyed lightly colored outlined icons to differentiate between categories easily.
Accessibility ✅ - Color Blind Simulation
For certain colorblindness, such as Achromatopsia and Tritanopia, the orange color can be saturated more or change hues accordingly.
The darker saturated orange color on the radial menu paired with the white stroked icons allow for great contrast amongst all color blind simulations.
Outcomes!
My Experience ⭐
As an enjoyer of PC games, I typically mostly interact with mouse and keyboard UX/UI. So this was a very fun challenge to tackle controller UI and improve it for console players.
Connected with the Baldur's gate 3 community! Got this idea from friends who shared this experience playing the game on controller and got insight from the community online
Further understood how to design/redesign UX/UI in videogames from start to finish! From initial sketches, to flowcharts and wireframes, usability and accessibility tests to finished working products!
Post-Mortem
This was my first passion project redesigning the UX/UI for a videogame. I've realized I'm incredibly passionate about trying to solve these problems for the better enjoyment of the player base. It was very fun and challenging to break down the controller interactions and optimize button mapping in a nested radial menu. With even more testing and player feedback, I could fine-tune the menu even more, and maybe even explore some of the other hybrid UI approaches I initially sketched.
Thank you for stopping by!