Time-Split
UI Design
March, 2024
1.
Project Overview
Type: Game UI Design
Platform: PC, Console
Client: Outer Paradise Studio.
Genre: Third-Person Shooter, Action-Adventure Shooter.
Design Tools:
- Figma: UI design, Prototyping.
- Illustrator: Icons, Backgrounds.
- Unreal Engine 5: Implementing.
Video: Game HUD in Co-op mode.
Screenshot: Game's first boss.
Game Concept
Paradox: Time-Split is a Third-Person and Co-op Shooter that blends fast-paced shooting mechanics with rich story-driven gameplay.
The game is set across two distinct eras – a distant, technologically advanced future and an ancient magical world inspired by Middle Eastern mythology, particularly Assyrian mythology.
Players take on the roles of two futuristic mercenaries who are tasked with navigating through these eras, harnessing both advanced weaponry and mystical abilities.
Game Modes:
In addition to Single Player Campaign and Multiplayer Mode (LAN and Online), Time-Split offers a Co-op Mode, with vertical split-screen for two players to collaborate and battle the timelines.
Target Audience:
Casual players, fans of Shooters and Action RPGs, and those drawn to fantasy storytelling will find themselves at home in this game that offers an immersive experience, balancing fast-paced combat with explorative elements.
UI/UX Vision
The UI/UX design will aim to deliver a seamless experience enhancing storytelling and immersion.
Era-Adaptive:
The game's UI adapts visually between the two eras reflecting both the futuristic setting and the ancient magical world, while maintaining a cohesive structure across both.
Story-Centric:
The HUD (player vitals, weapon widget, compass) and UI menus provide intuitive controls and easily accessible information without clutter or distraction, while reflects the player's progress.
Video: Game Main UI Preview
2.
Project Scope
Project Scope details all the UI and UX requirements of the project.
Summery
The UI/UX design for Time-Split will focus on delivering a streamlined and immersive interface that adapts to the player’s progression while supporting the dual-era game setting.
The interface will need to adjust visually as the players move between a futuristic world and a magical past, while maintaining structural consistency to enhance usability.
High-level Checklist
This project will cover the design of core game elements, including:
-
HUD Design: (Player vitals, Weapon Widget, Compass)
-
Game Menus (Main Menu and Sub Menus, Settings, Pause)
-
Player Select Screen (Single Player and Co-op)
-
Skill Tree Screen and Progression.
-
Visual elements (Icons, Backgrounds, Artwork)
Color Restrictions
Primary Color: Gold.
Color Theme: Dark.
Colors to Avoid: Certain central elements in the game, such as Bosses, are elementally associated with specific different colors, such as red. And thus, we might need to avoid Semantic color use (Red for negative elements for example).
3.
Users
Proto-persona
We'll create two primary personas reflecting a blend of our target groups, one for casual, story-driven players and another for competitive PvP enthusiasts.
As we are designing for casual players in the selected genre, we will draw from existed market research and build Proto-personas as starting Personas.
Screenshot: Player's Vitas in Co-op mode.
Casual Player Persona:
"Story Seeker"
Competitive PvP Player Persona:
"Strategic Shooter"
Audience Considerations:
Now that we have personas, the design will cater to the dual-nature of the target audience – those who focus on immersive, story-driven gameplay and those who thrive on competitive PvP.
For (Story Seeker) Emily, we will emphasizes storytelling and immersion. The HUD will be minimalistic, not overwhelming the screen with unnecessary details, and the color changes (gold to blue/red) will integrate with her character progression without feeling too "gamey."
For (Strategic Shooter) Kevin, the UI/UX will need to balance minimalism with functionality, especially in PvP modes. Quick access to health, stamina, and weapon status will be critical, and customizability will be key so that players like Kevin can adapt the HUD to their preferences.
Design Considerations:
With these personas in mind, we will focus on creating a UI that serves both types of players. We will need to ensure that:
The HUD is unobtrusive and easy to interpret for casual players, without losing any functionality for competitive gamers.
The menus, particularly in PvP mode, allow for quick decisions and seamless transitions between game modes, settings, and abilities.
4.
Research & Design Inspirations
As we need to strike a balance between a sleek, adaptable UI for story immersion and a highly functional, responsive HUD for competitive gameplay. To do this, we can gather design inspiration from both narrative-driven games and competitive shooters.
We will focus on gathering ideas from existing games and UI/UX design trends that can inform our design direction taking inspiration from titles that have successfully balanced story-driven experiences with competitive PvP elements, and use their design principles to inform our own.
4.3
Skill Tree
Game:
Assassin’s Creed Odyssey
Assassin’s Creed Odyssey offers a clean and well-structured skill tree that balances usability with aesthetic appeal.
Branching Skill Layout: Odyssey uses a clear, grid-based structure for its skill tree, where each skill is visually distinct and grouped into categories (Hunter, Warrior, Assassin).
Skill Unlock Progression: Each skill unlocks in tiers, showing a clear path of progression while maintaining flexibility for the player to customize their build.
Screenshot: Assassin’s Creed Odyssey
5.1.
HUD Design
Player Vitals
Rethinking Indicators
Traditional vitals bars often encroach on the weapon bar area, cluttering the interface and causing confusion for players. Alternatively, they may be placed in different corners of the screen, forcing players to constantly shift their focus between multiple areas, disrupting the flow of gameplay in narrative-driven games.
Breaking away from conventional vital bars and providing an immersive UI experience, the Health and Stamina Widgets were designed and positioned with a minimalist, yet effective approach.
Dynamic Feedback
By focusing on a fading effect of the white icon, the depletion is subtle yet informative, ensuring that the player's attention stays on the gameplay and story.
As the player’s vital decreases, the white fill of the vital icon gradually fades, offering a visual cue that health is low, without relying on red or other loud colors.
When the player’s vital begins to regenerate, the white fill refills the icon, dynamically representing the health recovery process.
Video: Player vitals and weapon HUD.