JULY 2021 - JUL 2023
LEGIO VOX STUDIOS
COMBAT UI found in the game
THE END OF THE LINE: NEW AGE is a gacha game in development by Legio Vox Studios. I was one of the lead UX Designers for this project and was responsible for the end-to-end design of features and systems. I got to collaborate with Leadership, Production, Engineering and QA teams to concept and refine these features.
• Implement all the interfaces in engine and also script all the necessary animations required for the interfaces.
• Crafted wireframes, interactive prototypes, visuals and UI assets.
• Main UI/UX & Visual Designer.
• Implementing the interface in engine and ensuring all the animations are functioning properly.
• Ensuring that the UI is consistent with the game's overall aesthetic.
• Making sure the UI looks and feels diegetic.
• Create a layout that is easier to use and navigate, making it a more enjoyable experience for users
As a UI designer, I need to create a user interface that is intuitive and visually appealing. With the combat system in the game being a turn based one, the main challenge is to provide the player with enough information so that they can understand the system without feeling like they've been overloaded with information and also making sure the interface feels like it fits the narrative of the game.
COMBAT SCENE REQUIREMENTS
A interface that displays the upcoming and current turns of the player and enemy characters.
A section that displays the NORMAL abilities and ULTIMATE abiltiy of the character who is active.
A section that displays the HEALTH, NAME AND EFFECTS of the player or active character.
A section that displays the other actions that the player can perform like Defense and Swap.
Hero Cantare with WEBTOON™ (NGELGAMES , 2020)
EPIC 7 (SMILEGATE , 2018)
HONKAI STAR RAIL (MIHOYO, 2022)
After taking a look at some of the combat screens from other games, here are some of the things I noticed:
1. Clear distinction between enemy team and player team.
2. The passive effects are above the player characters and enemies.
3. TURN ORDER is always in a straight line.
4. Info about the player and their teammates' ultimate abilities.
Some ideas based on the user and market research conducted that will be used when creating the mockups.
Keep it minimal and clear. The interface should not obscure the gameplay & we want to essentially frame the gameplay.
There should be a priority in terms of info provided to the player. Display what's most important first without being too distracting.
The player should be able to identify enemy attacks and the range of their attacks.
LOOK & FEEL
Making sure the UI feels diegetic. It should feel like it belongs in the game's universe.
1. Based on a lot of playtesting sessions that were conducted in studio, most of the testers really liked the way the Final Version of the UI was presented. The framing especially because it didn't clash with the gameplay in the middle, this was an issue earlier where testers felt like the interface was too huge and constantly clashed with the gameplay making things hard to understand.
2. We initially had the player info and ability section designed differently. This resulted in us using a lot of screen space and it felt like two completely different interfaces. In the end, we decided to use the same layout for both so that they feel like they work well with each other.
3. A lot of our ability icons are also designed to represent a metal texture and have a diamond shape because we wanted our interface to have that metal click feel. So, when the players click on an ability button it would then rotate in place and lock in.
I am quite proud of this project as it was quite the journey seeing these interfaces transform from low-fidelity wireframes to fully animated interfaces ready for testing, and it was a pleasure to work with a group of outstanding designers, engineers artists.