Crafting an Arcade Odyssey with Spatial 3D UI
My Role
UI/UX Designer
Tools
Photoshop, Unity
Year
2023
Overview
Astroball, an exhilarating multiplayer arcade game designed for PC platforms, received a cutting-edge UI overhaul under my expertise.
Collaborating closely with the talented game studio’s development team, we seamlessly transitioned from a traditional 2D interface to a spatial 3D UI. Leveraging Unity’s capabilities, the revamped UI enhances the immersive gaming experience, embodying the essence of a modern arcade masterpiece.
The biggest challenge
Apart from the extensive UI revamp, the major hurdle was the complete overhaul of the Lobby System Screen and Level Editor. The initial wireframes provided by the client were cumbersome, making it challenging for players to easily locate and join new rooms.
User Flow
A user flow is a visual representation of the steps that a user takes to complete a task on a game. It is a way of understanding how users interact with your product and identifying any areas that may be causing problems.
Wireframes
A wireframe is a low-fidelity, visual representation of the layout of a website or app. It is a quick and easy way to sketch out the basic structure of a page without worrying about the details of the design. Wireframes are often used in the early stages of the design process to help designers and stakeholders collaborate and get feedback on the layout of a page.
The initial designs were handed to me by the client in the form of these wireframes to serve as a starting point for the project.
Typography
Following discussions with the team, I proposed and gained unanimous agreement on a playful and arcade-inspired font choice.
Lobby & Level Editor
In the initial stages of the project, I highlighted the significant challenge of revamping the existing Player Lobby Screen and Level Editor implementations. Through numerous iterations and collaborative discussions with the team, I successfully devised the optimal solution for these screens.
Player Lobby
In addition to completely redesigning the Level Editor, I also introduced a concept for its screen, allowing users to select multiple maps simultaneously.
Level Editor
Level Editor - Select Map
Mockups
Game Footage
During the project’s concluding phases, the development team and I executed my initial concept, incorporating a spatial 3D UI. This design choice aimed to achieve a classic yet modern aesthetic for the game.
