Manas
About the Game:
Manas is a 3D, third-person, action-narrative game made in Unreal Engine 5.1 based on the Epic Poem of the legendary hero of Kyrgyzstan, Manas. This game was a part of the 2023 USC AGP Program and was developed over the span of the year.Role: UI/UX Lead
I was responsible for leading the UI/UX team in the development and design of the UI seen across the game, creating the UI kit to communicate the design language across all elements. I worked with the team to establish wireframes, iterate on our prototypes based on player feedback, and create final designs. Our wireframes and concepts were made in Figma and Illustrator, while texturing and other finishing details were done in Photoshop. Additional animations were created in After Effects.Quick View
UI Kit
Icon Sheet
Final HUD
Gameplay
Modal
Main Menu
Loading Screen
Pause Menu
Settings Menu
Controls Menu
Animations
Spirit Abilities Icons
The spirit icons are special abilites unlockable to the player as they progress through the game. Players must complete actions (Lion: melee attack, Falcon: ranged attack, Tiger: horse charge) to charge up these abilities. When fully charged, the icon will glow and emit particles to alert the player it is ready. When activated, the icon will flash white until it has been used, at which point it will revert back to the darkened icon ready to be charged up again.
Player Health and Stamina Bar
When depleted the health bar will show a white bar of the amount of health taken before decreasing to the new amount of health remaining. This can be better visualized in the horse health bar below due to damage amount difference.
Horse Health Bar
When depleted the health bar will show a white bar of the amount of health taken before decreasing to the new amount of health remaining.
Process
User Interface / HUD
My initial task for the project was designing the user interface of the game. We had a number of elements we had to communicate to the player.
- Player Health
- Player Stamina
- Horse Health
- Spirit Icons
- Equipped Weapon
- Current Objective
Initial Wireframe
Our initial wireframe focused on the rough placement of these objects as mechanics in our game were still changing. The horse health bar was placed on the opposite side of the interface to create a left & right balance of the UI.
Initial Concept
The colors of the health and stamina bars were chosen in accordance to their commonplace in games. Initially, the stamina was chosen to be green. However after some consideration, yellow was chosen for stamina as green conflicts with red for those who may be colorblind.
As we moved to our first low fidelity prototype, a few things were shifted to accomodate changes in mechanics. Each attack was given it's own dedicated key, instead of having the player manually change weapons. I decided, due to the less common nature of the controls, to have weapon icons that would flash so the player would have visual feedback of which weapon was being used at all times. The spirit icons were moved below the healthbar to better mirror and visually balance this addition of weapons to the UI. You can also view our high fidelity version of thie concept as well.
Final Wireframe & Design
After conducting our playtests and playing through the game ourselves, we discovered a few issues. For one, the weapon icons and spirit icons were confusing to the player. Initially, we began to look for changes we could make to the UI, but we were also expressing a want to communicate a more singularly themed and connected interface.
To achieve this, the horse health bar was completely isolated on the right side to allow it to own its own space on screen. This was also due to the importance of the horse to the story behind Manas and as the death of your horse would also trigger the lose condition. Weapon icons were removed as it felt more intrusive than it was helpful. The blocking mechanism, control key "Q," was also found to be less important to the player so the controls of right and left click for the bow and melee attacks respectively seemed to be intuitive for the player to understand. The new design also consolidated the visual themes of the UI to the black and gold color scheme while also connecting the spirit icons to the player health bar to incorporate the player items into a single element. We also continued to add more tutorialization elements to the UI to better communicate to the player when actions were available or introduced for the first time.
