top of page

Mech Game

UI/UX Design

An asymmetrical PvP mech action game designed for both PC and VR platforms.

VR player takes control of a massive mech, experiencing heavy, immersive combat from the cockpit.

In contrast, PC players fight as human units, relying on movement and precision to survive and counter the mech.

Inspired by titles such as Titanfall and Underdogs VR, the game explores the contrast between speed, scale, and player view.

Information

Role

Lead Designer, System & UX/UI Designer

Date

09/2025 - 04/2026

Genre

3D Asymmetrical PvP Multiplayer Action RPG,

First-Person Mech Operating RPG (VR),
Third Person Shooting Action RPG (PC)

Engine & Tools

Engine: Unreal Engine 5.6.1

Tools: Google Docs, Microsoft Whiteboard,

            Figma, Perforce

Project Type & Team

Academic Project, Team Vant Interactive (12 People)

Location

DigiPen Institute of Technology, Redmond, WA,
United States

VantProcess4-3.png

Process Overview
- Mech Game

UI/UX Design

    As the UI/UX designer for the Mech Game project, I focused on designing and implementing cross-platform interfaces for both PC and VR players.
    The process began with research, and I designed UI layouts with prototyping and interaction flows in Figma, defining structure, hierarchy, and state-based behaviors.
    I transferred these designs into Unreal Engine and implemented interactive systems using Blueprint, including button interactions, screen transitions, and visual feedback.
    Throughout the process, I maintained a minimal design approach to ensure clarity with low cognitive load, while refining interaction details to deliver intuitive player experiences.

Below is a step-by-step breakdown of making
UI/UX Aspects of the Mech Game.

Work Process

Research & Reference

    I began by analyzing the requirements for a cross-platform multiplayer experience in which players must quickly navigate and configure game sessions.
    Since the UI was designed as a non-diegetic game screen, the focus was placed on clarity, readability, and efficient interaction rather than immersion.
    I referenced modern multiplayer and action game interfaces. It prioritizes fast decision-making, clear information hierarchy, and minimal visual clutter since many players use it.
    The goal was to create a structured interface that allows players from both platforms to complete tasks such as room creation, room join, and Menu-to-gameplay navigation with minimal friction.
    Early exploration included layout structuring, UI progress flow mapping, and defining how visual feedback should respond to player input.

Layout Design

    The layout design process began with hand-drawn sketches to quickly explore structure and screen composition.

    This approach allowed me to focus on the overall structure by identifying which elements should be in. Also, hand sketching is effective when it needs to be edited fast, which helps the communication with teammates and defines the core layout before moving into actual prototyping.

    The primary goal was to create a clear, structured, and consistent interface that guides players through key actions, such as input, selection, and confirmation.

    I focused on establishing a consistent alignment system, a readable element grouping, and an intuitive navigation flow.

VantProcess2.png

Prototyping

    In the prototyping process, I used Figma not only to define the visual layout but also to simulate interaction flows and user behavior.

    Rather than creating static screens, I built interactive prototypes that replicate how the UI would actually function in-game, including screen transitions, button interactions, and navigation flow.

    Running the UI flow simulation allowed me to test how players navigate the interface, identify friction points, and refine the flow before implementation. It also helped me validate the interface's structure and ensure that each interaction felt intuitive.

    By iterating on these prototypes, I improved usability, reduced unnecessary steps, and established a clear, efficient user flow before moving into implementation phase.

Implementation

    In the implementation phase, I translated the UI designs into functional systems using Unreal Engine Blueprint.

    I implemented core interactions, including button inputs, screen transitions, and Visual feedbacks, ensuring the interface behaved consistently with the designed interaction flow.

    I also built state-driven UI behaviors, including on/off toggle actions triggered by player input and visual feedback that reflects the system's status. Such as the Direct Connect Screen, where the player needs to enter IP, Port, and Password, and I made it so the next screen only appears after the player enters all three.

    In particular, I focused on responsiveness and clarity, ensuring that every interaction provides immediate, understandable feedback to the player.

    By directly implementing these systems, I ensured that the final UI experience matched the intended design and interaction flow defined during the prototyping phase.

bottom of page