Chlorofell (UI/UX)

Type of Project: Academic Multidisciplinary Team Role: UI/UX Designer Size: 12 members Duration: 8 months Software: Custom Engine, Figma

Overview

  • Chlorofell was developed over the span of an entire academic year.

  • Prototyping was done in Unity, while the final product was built in a custom C++ engine.

  • The game is an isometric top-down shooter focused on player mastery and challenging combat encounters.

  • Features include manual reloading and ammo with various effects to enhance combat strategy.

  • Contributed as a Level Designer and UI/UX Designer.

  • Worked closely with artists, programmers, audio designers, and fellow game designers.

  • Created the UI/UX style guide, designed wireframes, and implemented menus using the team’s custom engine and editor.

  • The team aimed to deliver the best possible game under academic and technical constraints.

Responsibilities

  • HUD Design

  • Menu Design

  • Menu implemetation in custom C++ engine

  • Production

Planning

  • Assisted the systems designer during pre-production by prototyping core mechanics.

  • Planning was done iteratively, focusing on how similar games communicated mechanics through UI.

  • Drew significant inspiration from SYNTHETIK 2, particularly its Active Reloading mechanic, which influenced the team’s manual reload system.

  • After pre-production, created a UI/UX style guide to support and align efforts across art, programming, audio, and design teams.

  • The style guide helped communicate design intentions and streamline collaboration throughout development.

©SYNTHETIK 2. (2021). Flow Fire Games UG

©SYNTHETIK 2. (2021). Flow Fire Games UG

Play it On Steam!

Chlorofell UI/UX Style Guide

The purpose of this guide was to provide a resource for the team to understand the functionality and style of the UI.

Below is the style guide in its entirety.

First up was the “Assets” section — it laid out all the UI elements needed so the artists knew exactly what I was asking for, and could understand my thought process if they had feedback or changes.

  1. Second was the “States” section for the programmers — I made this to give them clear gameplay events to which the UI should respond.

    • I also used mind maps (pages 13–16) to make the different states super clear, and the programmers told me it helped them know what to do without constantly checking in.

  2. Lastly, there was a “References” section for the artists to get a feel for the visual direction, such as how the icons, animations, and VFX should look.

    • Even though some reticle UI icons were already made, I still included assets, states, and reference art to help both programming and audio stay on the same page.

This guide includes:

  • Color Palette

  • Main Menu layout and design

  • For each UI HUD Element

    • Required Assets for functionality

    • Gameplay States

    • Art References

Main Menu

The starting portion of this guide is the out-of-gameplay menus. I worked with my UI artist to get a color palette from our in-game environment art to create continuity between the menus and where the player is actively playing.

As part of making the main menu, I put together an eye progression diagram to show how players would naturally look at everything on screen.

  1. I used my UI artist logo as an arrow to lead the eye toward the arted-out menu background.

  2. From there, the idea was that the player’s attention would easily land on the buttons.

I also planned out the feedback for the buttons, so players would clearly understand how they’re interacting with the main menu.

Intended user flow for the main menu:

  • First, users notice the game title.

  • Then, their attention is drawn to the art on the right.

  • Finally, they are guided back to the menu buttons due to their visual contrast.

Main Menu End Result

My work on this main menu included implementation, feedback, and layout!

Game HUD - Reticle/Ammo

In this section, I will break down the reticle using the slides from the style guide!

Reticle/Ammo - Assets

Reticle/Ammo - States

Reticle/Ammo - Art References

  • Initially, I settled on a crosshair/reticle reflecting the different ammunition types.

    • Purple: Explosive ammo

    • Blue: Shield ammo (same color as shield icon)

    • Green: Slow ammo

  • Worked with artists to develop the right-click icon in the reticle to signify which type of ammo the player would be switching to.

  • Worked with the UI artists to define the reload animations to signify success, failure, and normal reloading.

  • Created a mind map to communicate different states visually to the programming team.

  • Set the framework of the mechanics of the UI via the mind map.

  • Programmers often utilized the guide to create the mechanics for the game.

  • The team often used the mind map to understand how the flow of combat would progress in moment-to-moment gameplay.

  • Helped reinforce and determine the types of animations and signifier feedback that would be needed for the mechanic.

In-Game Footage

Prototype UI

Release UI

  • From my mock up in the Unity prototype I determined the assets needed and presented that info to the team.

  • Made sure to define and explain the design of the assets that were needed.

Ending Notes

Learning Outcomes

  • At the time of writing, it’s my senior year, and it’s been two years since I worked on this project.

  • I learned a lot about team communication, especially when it came to design clarity.

  • At first, I wasn’t planning to make a UI/UX style guide, since most teams in our sophomore course didn’t bother with one.

  • But I ended up making one anyway because UI was such a big part of our gameplay loop, and I wanted the whole team to be on the same page.

  • The design and style stayed consistent throughout development because of that guide — it really helped us stay aligned.

  • Creating UI with multiple game states also taught me how important it is for the UI to make sense not just to players, but to the team too.

Complications/Issues

  • Due to working on production and level design, I could not dedicate as much time as I wanted to the project. This resulted in having to hand off or not participate in certain implementations, such as the HUD.

  • In this project, I got into the custom engine way later than I should have, resulting in a lot of crunch and less time to iterate/improve on the project.

  • Team communication between disciplines was not ideal during the last bit of the project, resulting in less polish.

End Of Days