Transformers: Galactic Trials

Translating a strong franchise identity into a functional game interface.

Transformers: Galactic Trials is a fast-paced combat-racing game set in the iconic Transformers universe. Players race across futuristic tracks, transform between vehicles and robots, and battle opponents using powerful weapons and abilities in dynamic environments.

My role

UX/UI design · Motion graphics · Trailer editing

Project type

Racing · Combat

Release date

October 2024

Developer | Publisher

3DClouds | Outright Games

Platforms

Platforms
Transformers: Galactic Trials key artTransformers: Galactic Trials logo

UX/UI concept

As UX/UI Designer, I was responsible for designing the complete interface system, from menus to HUD, creating a cohesive sci-fi visual language that supports both racing and combat mechanics while staying true to the Transformers universe.

Faction Identity System

The Autobots and the Decepticons share the same structural UI but carry distinct visual accents. Color coding, faction emblems and character-specific elements adapt without breaking navigation consistency.

Dual-Mode Interface

The transformation mechanic demands a HUD that works in both robot and vehicle states. Weapon systems, Energon management and combat overlays adapt their layout while keeping critical information anchored.

Visual Identity Reimagined

Bringing the IP’s iconic visual language into a fresh gaming experience. The challenge was to preserve its identity while creating a UI that seamlessly supports both high-speed racing and intense combat.

The interface draws from the Transformers universe’s visual heritage, using angular geometry, faction color palettes and sci-fi typography to create a system that feels both authentic to the IP and functional in fast-paced gameplay.

HUD

The HUD adapts to two existing forms, BOT and ALT, each with specific combat and racing information requirements. Weapon status, skill availability and Energon management overlay traditional racing telemetry. The system maintains consistent anchor points like health and position on the left, timer and objectives on the right, while adapting its visual density per form.

Bot form

Emphasis on combat: health, ammunition, targeting and skills.

Bot form HUD

Alt form

Emphasis on movement: speed becomes a prominent metric, Energon boost and dash take the place of weapons and skills.

Alt form HUD
Single Player HUD mockup

Single Player

MultiPlayer HUD mockup

MultiPlayer

HUD mockup

In split-screen, all racing and combat information is condensed into a reduced viewport while maintaining full readability and hierarchy.

Consistency Between Forms

The game doesn’t completely redesign the HUD when transforming. Instead, it preserves the same fundamental structure, colors, iconography and visual language while changing the emphasis of individual information. So the player develops a single mental model of the HUD, rather than having to learn two separate interfaces.

Assets and Iconography

I designed and developed cohesive icon systems for skills, weapons, relics and gameplay widgets, ensuring readability and clear communication across the experience.

Drone screensDrone screens
Skill icons
Autobot skills iconsDecepticon skills icons
Reward cardsReward cards
WeaponsWeapon icons by range and classWeapon icon states
Aim systemAim system states

Color palettes

Menu palette

The palette combines white and black as the foundational framework, with electric blue providing the main visual thread throughout the interface. The franchise’s official red and purple colors are used as accents to distinguish and emphasize the two opposing factions, the Autobots and the Decepticons, reinforcing their identities while maintaining a cohesive overall design.

White

#FFFFFF

Primary color

Pure Black

#02010A

Primary color

Electric Blue

#73F5FA

Highlight color

Deep Red

#C10230

Autobot color

Rich Purple

#5C0F8B

Decepticon color

HUD palette

The HUD palette uses vibrant, high-contrast colors to communicate information quickly and intuitively. Their high saturation creates a strong contrast against the dark background, ensuring that key information remains immediately visible even within a dense and visually complex interface.

Health

#82FF38

Armor

#2873FA

Energon

#FF00C3

Quest objective

#73F5FA

Weapon card

#FF0000

Positive

#00A800

Negative

#D20000

Common Relic

#73F5FA

Rare Relic

#8BEB42

Epic Relic

#B20EFF

Artifact of the Prime

#FFB800

Fonts

The typography combines clarity and personality, balancing a clean and readable typeface with a more distinctive display font to give the interface a strong sci-fi identity. This contrast creates a clear visual hierarchy while keeping the experience functional and immersive.

Used throughout the game to ensure a consistent visual language.

Montserrat

The quick brown fox jumps over the lazy dog. 0123456789


Chosen for titles and headings to create a distinctive visual hierarchy.

Squada One

The quick brown fox jumps over the lazy dog. 0123456789


Reserved for numerical and secondary information.

Orbitron

The quick brown fox jumps over the lazy dog. 0123456789

Video Production

Trailers

I led the video production for Transformers: Galactic Trials, creating all game trailers from editing and post-production to final delivery and platform-specific exports. Content was adapted and delivered across the company’s social media channels and the various gaming platforms supporting the title.