Team Size: 100

Time Frame: 8 Months

Engine: Unity

Gameplay footage from the 3/8/25 prototype build:

GDC 2025

Project Dreamscape was showcased at GDC 2025 as apart of the New York State Pavilion.

Planning and Delegation

My first steps were to comb through the project's design document to determine everything that may need UI elements. Then, I met with our producer to compare and confirm the list was comprehensive. Following this, I moved everything into an excel sheet to categorize by what had the highest priority and segment this into potential weekly sprints. Adjustments to this were made based off of sprint reviews and updates from other design departments. This also involved ensuring that each team member's tasks were best suited to their skill set and experience, so that updates were completed as timely as possible.

After mock-ups were ready, I handled cross-department communication to ensure next steps were completed, such as art passes. This included programming, art, and animation. Additionally, I updated weekly the UI/UX section of our design document to accurate reflect the work of my team.

Style Guide

Because we were creating assets that would need an art pass, I facilitated team meetings where we would work together to create a style guide that could be easily followed by departments. Our style guide was created using Miro.

Mock-ups

Aspect Icons

Below are examples of mock-ups I created to represent the player's selected aspects. These are Fear and Rage, both in active and inactive states. Each time the player levels up, they are given a pop-up to select a new aspect. This aspect comes with powers related to the aspect-type; for example, rage powers are more brutish. I wanted to make sure that this would reflect in the icons artwork and color.

Additionally, as reflected in the style guide, each aspect was given a unique color. This decision was made so that even when the icons were small, such as in the HUD, the player would be able to understand at a glance which power was active through color recognition.

Wave Pop-up for HUD

During the game, the player goes through different types of "waves." Each wave has a timer or quota (Example: Kill 0/3 enemies), a short description of the player's goal, and three tasks they can complete for extra tokens. The tokens can either be of the type empower or weaken.

When creating this pop-up for wave events, the goal was to convey a significant amount of information while also keeping it as easy to digest on a glance as possible. I made sure to emphasize the timer text via the red color, as this would be the most vital and consistently referenced information.

Designing the tokens were challenging, because they had to appear so small. Thus, I chose to make them simplistic, and primarily rely on color for recognition. I also chose to go for a pink for the weaken tokens, because a darker red might signify something negative despite both tokens intended to be rewards.

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.

Team Size: 8

Time frame: 8 months

Language/Engine: Unity and C#

Awards: Best Narrative and Writing at Game BIITes

Prototype build from 3/15/2025. Set for May release:

Windows 98 and VHS Motifs

Buster's takes place inside of a video rental store in the 1999's. The goal with creating the UI was to emulate the look and feel of the Windows 98 and VHS menus as an homage to the time. This involved recreation in Adobe Illustrator and/or outside sourcing depending on the asset needed.

Choices were made throughout on how common features of visual novels could be adapted to not only "make it work" with the aesthetic, but also make it make sense. For example, I chose for visualizer on characters' respective opinions on the player to utilize a settings slider and have the character's name replace what would be a menu header.

Similarly, with the Main Menu pictured above, VHS icons were chosen based off the content of the button. I decided not to make the text fully reflect VHS menus because there was not a strong enough association with what buttons were necessary. For example, the continue button has the fast forward symbol because the association was strong enough in terms of skipping forward in the game, but not enough for the player to understand if the text was "Fast Forward."

Yarn Spinner

The project utilized the Unity package Yarn Spinner for visual novels. I wrote the integration that allowed it reference our C# scripts. This included connecting the click of a choice to trigger both the character's stored opinion of the player and the notification of a change in the character's approval.

Alongside this I created comprehensive documentation for this process. This was so that the team's non-technical writers could easily copy and paste commands into Yarn Spinner as they wrote, without needing to dive into the C# scripts.

Game BIITes

Buster's was showcased at Illinois Tech's annual festival of games hosted by their IGDA chapter, Game BIITes. There, Buster's won the award for Best Narrative and Writing.

Team Size: 2

Time Frame: 3 weeks

Engine: Unity (C#)

Play The Game

Design

Click anywhere in the boxes below to expand content.

Team Size: 1  

Time frame: 1 Week  

Engine: Unity (C#) 

Play The Game

Design

Programming - C# with Visual Studio

Demo

Time frame: 3 Week  

Language: WPF with XAML and C# (Visual Studio)

Demo

Project Documentation

Credits

This project was created for the Columbia College Chicago class Programming II taught by Janell Baxter.