UI SYSTEMS

Building a complete interface system from the ground up.

WILDCARD · UI/UX Director · Product Design · Interaction · Motion

Designing a cohesive UI system for a complex multiplayer game—from information architecture and navigation to high-fidelity menus, HUD, interaction states, and in-engine implementation.

The Challenge

Building a UI system for a game that was still finding itself.

Wildcard evolved significantly throughout production, with new systems, features, and design directions continually changing the experience. The challenge was to create a UI system flexible enough to evolve with the game while maintaining a consistent visual language and intuitive interaction patterns.

I owned the UI/UX direction and was responsible for defining the creative vision, UX strategy, and execution of the game's interface systems.

My Approach

Wireframes & UX

Starting with structure.

Before establishing the final visual language, I worked through the underlying flows and information architecture of the experience. Wireframes allowed me to explore navigation, hierarchy, and interaction patterns before committing to visual design. As the designs and systems of the game grew through production, wireframes always became the starting point for working out the structure and flows.

Building The Visual Language

Typography

Typography was designed to balance readability with the futuristic, competitive tone of the game, creating a hierarchy that could scale across menus, gameplay information, and supporting systems.

Iconography

Iconography was developed as a consistent visual language for abilities, equipment, navigation, and gameplay information, allowing complex systems to communicate quickly and consistently.

Navigation & Menus

Creating the Player’s Navigation System

The main menu established the foundation for how players moved through the broader experience. From here, the interface needed to connect gameplay, collection, customization, social features, and progression without making the system feel overwhelming.

The Deckbuilder

Turning a complex collection system into an understandable player workflow.

One of the more complex areas of the product was helping players manage the creatures they had collected and build decks they could take into gameplay. Players had the ability to filter quickly, easily slot and unslot cards in their loadouts with a click, explore broader character stats, and customize color and skins.

Collection

Making a large amount of game information approachable.

The collection experience needed to support discovery, inspection, and customization while keeping the information hierarchy understandable. Players could move from a broad collection view into detailed information without losing their place within the larger system.

Store & Pack Opening

From browsing to reward.

The Store connected the collection system to acquisition, giving players a clear path from discovering content to understanding and obtaining it.

Pack Opening

The pack-opening experience shifted from information architecture to anticipation, using animation, timing, and progressive reveals to turn an acquisition into a moment of interaction.

Gameplay HUD

Bringing the system into gameplay.

Menus give players time to explore. Gameplay doesn't.

The HUD needed to communicate critical information immediately without competing with the action happening on screen.

The goal was to create a consistent relationship between the interface players used before a match and the information they relied on during one.

Designing Behavior, Not Just Appearance

A UI system isn't only a collection of screens. It also needs to communicate what can be interacted with, what has changed, and what is happening next.

I designed and implemented interaction states, animations, and transitions to create consistent feedback throughout the experience.

From Design to Engine

I owned the UI from visual design through in-engine implementation, working closely with engineers on the underlying logic and functionality.

Reflection

Good UI systems create consistency without creating sameness.

Building Wildcard's UI reinforced the importance of designing beyond individual screens. Every menu, HUD element, interaction state, and animation needed to function as part of a larger system.

The most valuable part of the process was balancing consistency with flexibility—creating reusable patterns that could support a growing product while still allowing each experience to have its own purpose and personality.

Design the system, then design the experience.