top of page

RAHUL

YERRAMNEEDI

JULY 2021 - JUL 2023

TIMEFRAME

UX DESIGNER

MY ROLE

VIDEO GAME

PRODUCT

LEGIO VOX STUDIOS

CLIENT

COMBAT UI found in the game

OVERVIEW

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

PROBLEM STATEMENT

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

TURN ORDER

A interface that displays the upcoming and current turns of the player and enemy characters.

ABILITY CONTAINER

A section that displays the NORMAL abilities and ULTIMATE abiltiy of the character who is active.

PLAYER INFO

A section that displays the HEALTH, NAME AND EFFECTS of the player or active character.

OTHER ACTIONS

A section that displays the other actions that the player can perform like Defense and Swap.

COMPETITORS

Hero Cantare with WEBTOON™ (NGELGAMES , 2020)

EPIC 7 (SMILEGATE , 2018)

HONKAI STAR RAIL (MIHOYO, 2022)

TAKEAWAYS

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.

LAYOUT

Keep it minimal and clear. The interface should not obscure the gameplay & we want to essentially frame the gameplay.

INFO

There should be a priority in terms of info provided to the player. Display what's most important first without being too distracting.

ABILITIES

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

IDEATE

2

MOCKUPS

LO-FI WIREFRAME

TESTING PROTOTYPE

FINAL VERSION

3

CONCLUSION

TAKEAWAYS

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.

REFLECTION

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.

bottom of page