Role: UI/UX Designer and Programmer

Team Size: 15

Time frame: 9 Months

Language/Engine: Unity / C#

Timbre is a short, survival horror game where the player must lift the curse haunting their family's lake house, while avoiding a terrifying monster. This project was worked on for my senior capstone project at Columbia College Chicago. I worked on designing, creating, and implementing all of the UI for this game. The game is currently in development.

Timbre was also showcased at the 2024 Power of Persistence Gala.

HUD Design

My process began with identifying what the most necessary information to communicate to the player through the HUD was. This was done through my own knowledge of the game, as well as communicating with other game designers to determine what they had intended to occur. Because of the game's genre, the goal was to create the HUD as minimal as possible, in order to keep it immersive. This was a lofty task, because originally the game's HUD was to include: captions - both for the player and NPCs, a sanity meter, an inventory, a journal, the player's volume, and tutorial pop-ups near the beginning of the game.

Rapid Iteration

I started through rapid iteration using sticky notes, as pictured below. When I identified a problem with one design, I sketched another based on this information. This helped to rapidly generate ideas whilst making design decisions, before moving into Figma for more finalized mockups.

Playtesting with placeholder UI during this step and the next step also helped inform the process. For example, it was quickly identified that without significant stylization and animation players would not understand the purpose of the sanity meter, because the values rarely changed in a way that was intuitive (as compared to the voice meter).

Figma

After this step, I moved forward with the best designs and brought them into Figma.

Finalized Mock-Up

Shortly after this mock-up was created, the sanity meter was cut from the game and needed to be removed from the HUD. Additionally, the Figma iteration drew attention to the fact that the design for the VU Meter felt out of place with the rest of the HUD. This was even more visible when testing in-engine with wireframes. The issue was that the idea to make it look like a real VU Meter, meant that it had inconsistent rounded edges compared to other elements, and would need more detail in coloring than anything else.

Therefore, I decided to combine the walkie talkie icon with the VU Meter because of their relation to one another. Using Gestalt Principles, the proximity to the player's speech to text captions provides easier understanding in the shared purpose of the two elements. I also moved the dialogue box to the left in order to condense the space used as much as possible.

In-Game

Game is currently in development. Dialogue UI has not been implemented yet.