Cold Static
UI/UX & Audio Design
Project Overview ❄️
Cold Static is a PSX-inspired narrative horror game set inside a cold, brutalist radio station. Players step into the role of a vinyl DJ, navigating the station while uncovering the town's dark mystery.
The Challenge
Working alongside a 6 person team, I set out to create a cohesive UX/UI system that balanced usability with Cold Static’s Visual Identity, while remaining achievable within the rapid development cycle of a one-week game jam.
Project Length: 1 Week
UX/UI Design 🎮
Visual Design 🖼️
Developed the visual direction for the interface, including typography, layout, iconography, textures, and overall UI language.
Audio Design 🎧
Created custom sound effects and audio feedback for UI interactions and atmosphere.
Music Composition 🎼
UI Ideation!
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!