✳ In this project I was tasked with
✳ In this project I was tasked with
✳ In this project I was tasked with
Designing a clear and intuitive Combat Interface for a mobile game while balancing smooth interactions, strategy and immersion.
Designing a clear and intuitive Combat Interface for a mobile game while balancing smooth interactions, strategy and immersion.
Role
Role
Role
Product Designer
Product Designer
Product Designer
Tools
Tools
Tools
Figma
Figma
Figma
Timeline
Timeline
Timeline
4 weeks
4 weeks
4 weeks
Disciplines
Disciplines
Disciplines
UX Design
UX Design
UX Design
•
•
UX Research
UX Research
UX Research
•
•
Interaction Design
Interaction Design
Interaction Design
Setting the stage
Setting the stage
Setting the stage
What is TEOTL: New Age
What is TEOTL: New Age
The game combines an evolving narrative, tactical gameplay and dynamic battles to create an immersive experience.
It is a Mobile Gacha RPG set in a dystopian world, where players build hero teams and engage in strategic combat.
The game combines an evolving narrative, tactical gameplay and dynamic battles to create an immersive experience.
It is a Mobile Gacha RPG set in a dystopian world, where players build hero teams and engage in strategic combat.
The game combines an evolving narrative, tactical gameplay and dynamic battles to create an immersive experience.
It is a Mobile Gacha RPG set in a dystopian world, where players build hero teams and engage in strategic combat.
Screenshots of the current app
My Role
My Role
My Role
UX & Visual Designer
UX & Visual Designer
UX & Visual Designer
Crafted wireframes, interactive prototypes and UI assets.
Crafted wireframes, interactive prototypes and UI assets.
Crafted wireframes, interactive prototypes and UI assets.
Implement all the interfaces in engine and also script all the necessary animations required for the interfaces.
Implement all the interfaces in engine and also script all the necessary animations required for the interfaces.
Implement all the interfaces in engine and also script all the necessary animations required for the interfaces.
🎯 Project Goals
🎯 Project Goals
🎯 Project Goals
Improved Usability: Enhance navigation and usability for a smoother player experience.
Improved Usability: Enhance navigation and usability for a smoother player experience.
Improved Usability: Enhance navigation and usability for a smoother player experience.
Enhanced Player Experience: Making interactions more intuitive and enjoyable.
Enhanced Player Experience: Making interactions more intuitive and enjoyable.
Enhanced Player Experience: Making interactions more intuitive and enjoyable.
Diegetic UI Design: Ensuring the UI blends seamlessly into the game world for better immersion.
Diegetic UI Design: Ensuring the UI blends seamlessly into the game world for better immersion.
Diegetic UI Design: Ensuring the UI blends seamlessly into the game world for better immersion.
⚠️ Project Challenges
⚠️ Project Challenges
⚠️ Project Challenges
Balancing Immersion & Clarity: Keeping the UI visually cohesive with the game’s aesthetic without sacrificing readability.
Balancing Immersion & Clarity: Keeping the UI visually cohesive with the game’s aesthetic without sacrificing readability.
Balancing Immersion & Clarity: Keeping the UI visually cohesive with the game’s aesthetic without sacrificing readability.
Ensuring Responsiveness & Feedback: Making animations and interactions feel intuitive and enhancing player engagement.
Ensuring Responsiveness & Feedback: Making animations and interactions feel intuitive and enhancing player engagement.
Ensuring Responsiveness & Feedback: Making animations and interactions feel intuitive and enhancing player engagement.
The Problem Statement
The Problem Statement
Players struggle with an unclear, unresponsive combat UI, making it hard to execute actions smoothly and stay engaged. The lack of intuitive feedback and seamless interaction disrupts gameplay.
Players struggle with an unclear, unresponsive combat UI, making it hard to execute actions smoothly and stay engaged. The lack of intuitive feedback and seamless interaction disrupts gameplay.
Limited responsiveness, inconsistent animations and a disconnect between the UI and game aesthetics reduce usability, impacting immersion and making combat feel less fluid and satisfying.
Limited responsiveness, inconsistent animations and a disconnect between the UI and game aesthetics reduce usability, impacting immersion and making combat feel less fluid and satisfying.
The Problem Statement
Players struggle with an unclear, unresponsive combat UI, making it hard to execute actions smoothly and stay engaged. The lack of intuitive feedback and seamless interaction disrupts gameplay.
Limited responsiveness, inconsistent animations and a disconnect between the UI and game aesthetics reduce usability, impacting immersion and making combat feel less fluid and satisfying.
Define
Define
Define
Combat Scene Requirements
Combat Scene Requirements
The combat interface needs to fulfill several key requirements to ensure a smooth and engaging battle experience:
The combat interface needs to fulfill several key requirements to ensure a smooth and engaging battle experience:
The combat interface needs to fulfill several key requirements to ensure a smooth and engaging battle experience:
Turn Order
Turn Order
Turn Order
Displays the upcoming and current turns of both player and enemy characters, helping players strategize.
Displays the upcoming and current turns of both player and enemy characters, helping players strategize.
Player Info
Player Info
Player Info
Shows key details of the active character including health, name and status effects for easy tracking.
Shows key details of the active character including health, name and status effects for easy tracking.
Ability Container
Ability Container
Ability Container
Displays the available abilities of the active character, making it easy for players to choose their next move.
Displays the available abilities of the active character, making it easy for players to choose their next move.
Other Actions
Other Actions
Other Actions
Includes options like defense or swap, offering flexibility during combat.
Includes options like defense or swap, offering flexibility during combat.
Competitor Analysis
Competitor Analysis
Examining how each game designs its combat UI for strategy, clarity, and player experience.
Examining how each game designs its combat UI for strategy, clarity, and player experience.
Examining how each game designs its combat UI for strategy, clarity, and player experience.
Turn Order Display
Turn Order Display
Shows upcoming turns for both allies and enemies on the left side of the screen.
Shows upcoming turns for both allies and enemies on the left side of the screen.
Player Info Display
Player Info Display
Displays health, energy and status effects at the bottom (in Sections).
Displays health, energy and status effects at the bottom (in Sections).
Ability Display
Ability Display
No abilities are displayed but a cooldown is present.
No abilities are displayed but a cooldown is present.
Turn Order Display
Turn Order Display
Timeline at the bottom, showing upcoming turns for all characters.
Timeline at the bottom, showing upcoming turns for all characters.
Turn Order Display
Turn Order Display
Shows upcoming turns for both allies and enemies on the left side of the screen.
Shows upcoming turns for both allies and enemies on the left side of the screen.
Ability Display
Ability Display
Icons with mana/energy requirements and cooldown timers.
Icons with mana/energy requirements and cooldown timers.
Takeaways
Takeaways
Takeaways
Clear distinction between enemy team and player team.
Clear distinction between enemy team and player team.
The Turn Order is mostly in straight lines.
The Turn Order is mostly in straight lines.
Info about the player and their teammates' ultimate abilities.
Info about the player and their teammates' ultimate abilities.
The passive effects are above the player characters and enemies.
The passive effects are above the player characters and enemies.
Design
Design
Design
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Sketched rough UI concepts on paper to quickly explore different layouts and interactions.
Sketched rough UI concepts on paper to quickly explore different layouts and interactions.
Sketched rough UI concepts on paper to quickly explore different layouts and interactions.
Used these early drafts to refine ideas before moving to digital wireframes.
Used these early drafts to refine ideas before moving to digital wireframes.
Used these early drafts to refine ideas before moving to digital wireframes.
Mid-Fidelity Wireframes + Feedback (Version 1)
Mid-Fidelity Wireframes + Feedback (Version 1)
Mid-Fidelity Wireframes + Feedback (Version 2)
Mid-Fidelity Wireframes + Feedback (Version 2)
Before showcasing the final combat screen, let’s first look at its key components to see how they shape the overall experience.
Before showcasing the final combat screen, let’s first look at its key components to see how they shape the overall experience.
Combo Info Component
Combo Info Component
Health Bar
Health Bar
Health Bar
This bar indicates the character's health.
This bar indicates the character's health.
It can be filled and depleted based on the ally’s and enemy’s actions.
It can be filled and depleted based on the ally’s and enemy’s actions.
Ultimate Bar
Ultimate Bar
Ultimate Bar
This bar indicates the character's special move charge.
This bar indicates the character's special move charge.
It fills up based on the character’s actions.
It fills up based on the character’s actions.
Targeting Frame
Targeting Frame
Targeting Frame
This arch is used to display which ally the character is targeting.
This arch is used to display which ally the character is targeting.
There are character specific icons as well.
There are character specific icons as well.
Character Base
Character Base
Character Base
This circle is used to indicate if the character is active or not.
This circle is used to indicate if the character is active or not.
It changes colors to indicate different actions as well (refer below)
It changes colors to indicate different actions as well (refer below)
Primed Ability Frame
Primed Ability Frame
Primed Ability Frame
Used when the enemy is being targeted
Enemy Targeting Frame:
Used when the enemy is being targeted
Used when the enemy is being targeted
Used when the enemy is being targeted
Primed Ability Frame
Primed Ability Frame
Primed Ability Frame
Used when the player’s primed ability is active
Used when the player’s primed ability is active
Used when the player’s primed ability is active
Ultimate Ability Frame
Ultimate Ability Frame
Ultimate Ability Frame
Used when the player’s ult move is active
Used when the player’s ult move is active
Used when the player’s ult move is active
Healing Ability Frame
Healing Ability Frame
Healing Ability Frame
Used when the player’s is casting healing on an ally
Used when the player’s is casting healing on an ally
Used when the player’s is casting healing on an ally
Turn Order Component
Turn Order Component
The turn order displays the upcoming turns of both the allies and enemies. With each ally and enemy character having unique portraits.
The turn order displays the upcoming turns of both the allies and enemies. With each ally and enemy character having unique portraits.
The turn order displays the upcoming turns of both the allies and enemies. With each ally and enemy character having unique portraits.
Character Info Component
Character Info Component
Health Bar
Health Bar
Character Potrait
The character portrait changes based on the active character.
The character portrait changes based on the active character.
Name Banner
Name Banner
Name Banner
This banner displays the name of the active character
This banner displays the name of the active character
Health Bar
Health Bar
Health Bar
This bar displays the health of the active character.
This bar displays the health of the active character.
Passive Abilities
Passive Abilities
Passive Abilities
These 6 circles each contain passive abilities of the character.
These 6 circles each contain passive abilities of the character.
Combo Info Component
Combo Info Component
Ultimate Attack
Ultimate Attack
Ultimate Attack
Displays the ultimate attack and fills up in the BG.
Displays the ultimate attack and fills up in the BG.
Ability Container
Ability Container
Ability Container
Contains the abilities that character is able to use.
Contains the abilities that character is able to use.
Ultimate Charging State
Ultimate Charging State
Ultimate Charging State
The ultimate is charging (indicated with the blue fill bg).
The ultimate is charging (indicated with the blue fill bg).
Ultimate Charged State
Ultimate Charged State
Ultimate Charged State
The ultimate is at max charge and can be used by the player.
The ultimate is at max charge and can be used by the player.
Abilities
Abilities
Abilities
The 3 main Abilities of the active player character.
The 3 main Abilities of the active player character.
These icons will change based on the character.
These icons will change based on the character.
Other Actions Component
Other Actions Component
Help Section
Help Section
Help Section
Pause button
Tutorial button
Pause button
Tutorial button
Reserves
Reserves
Reserves
Two characters that player can switch and use during combat
Two characters that player can switch and use during combat
Two characters that player can switch and use during combat
Miscellaneous Actions
Miscellaneous Actions
Miscellaneous Actions
Defense Button
Swap Character button
Defense Button
Swap Character button
Final Screens
Final Screens
Role
Product Designer
Tools
Figma
Timeline
4 weeks
Disciplines
UX Design
•
UX Research
•
Interaction Design