Shipped

BitCraft Online at Clockwork Labs

Led UI/UX for a sandbox MMO, shaping the visual identity, component system, and design-to-engineering workflow.

Led BitCraft's UI/UX from visual direction through implementation, building the design system, core game surfaces, and launch marketing assets for a complex MMO spanning inventory, crafting, progression, map, and social systems.

Client
Clockwork Labs

Skills
UI/UX Design
Visual Design
Branding

Tools
Figma
Unity
Adobe Suite

My Role
UI/UX Designer

Timeline
Q3 2024 – Present

Team
Tyler Cloutier (CEO)
Alessandro Asoni (CTO)
Carter Minshull (Lead Game Designer)
Morgan Nyblom (Art Director)
Lisandro Crespo (UI Engineer)

Challenge

I was brought on to define BitCraft's UI from the ground up. Working directly with the CEO, CTO, Art Director, and Game Director, the team needed a visual direction that felt native to the game's world and narrative while scaling across the broad surface area of an MMO.


Establishing a Visual Language

The visual direction was developed collaboratively with leadership, refining broad exploration into a shared Art Deco-inspired system that could scale across UI and world-facing assets.

A concept that stays true to BitCraft's runic foundation, using clean lines, geometric forms, and restrained lighting accents to add depth. Inspired by League of Legends.
A quieter direction built around desaturated neutrals, transparent layering, and minimal forms. Lightweight strokes and clean typography create a modern, polished interface with subtle magical qualities. Inspired by Frostpunk, The Legend of Zelda: Breath of the Wild, Valorant, Star Wars Jedi: Survivor, and Monument Valley.
A warmer, more inviting direction centered on energy, optimism, and approachability. Bright palette accents, cool shadow balance, and subtle runic textures help frame content while preserving a playful tone. Inspired by Genshin Impact, Pokemon, and Animal Crossing: New Horizons.
The final direction built on the strengths of concept 3, carrying forward its warmth, energy, and inviting tone. The system was developed across both light and dark modes, using bright palette accents, cool shadow balance, and subtle runic textures to frame content without losing clarity.

Visual Identity

The visual system was built to support density, clarity, and a distinct BitCraft aesthetic.


Color Palette
A split-complementary system with tonal variants for each primary color, designed to support layering, segmentation, and UI patterning. Light and dark modes support both daytime and low-light play.

Typography & Spacing
A 14px base paired with an augmented fourth scale (1.414) maintains legible hierarchy in information-dense views without oversized headers competing with game data. An 8pt spacing grid provides consistent rhythm across component layout and padding.

Shape Language
The visual language draws from Art Deco geometry, using precise 30 and 45-degree angles with strict 4px and 8px stroke weights for dividers and framing elements. This gives the interface structural consistency throughout.
Image 1
A split-complementary palette with tonal variants for each primary color, balancing contrast and harmony across the interface.
Image 2
Linear Runic Tech Lines used as motifs and flourishes to add structure, framing, and visual rhythm across the UI.
Image 3
A consistent system of 30° and 45° angles used throughout UI components and world elements to create structural cohesion.
Image 4
Square-based Runic Tech Line motifs reinforce the system's geometric language across interface surfaces.

Interface Design

The component library extended that system across the full MMO surface area without relying on one-off patterns.


Component Library
Covers the full range of MMO interaction contexts, from inventory and crafting to dialogue and progression, with every component grounded in the same visual system.

Windows & Panels
A modular window and panel system built to handle dense information across the game's layered simulation systems without introducing unnecessary visual noise.

HUD
Keeps critical information accessible during active play without obscuring the game world, and scales with gameplay complexity as players progress.

Notifications & Feedback
Inline and side-panel notification variants provide contextual feedback across the game's many concurrent systems.

Cursors & Entities
Contextual cursor states and entity display patterns help players identify interactable objects, NPCs, and other characters at a glance in a populated open world.
Image 1
Image 2
Image 3
Image 4
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 9
Image 10
Image 11
Image 12

Modeling Complex Game Entities

Items, cargo, and collectables each operate under different rules. Their structure and presentation were designed so players could distinguish them at a glance.


Items
Occupy a limited inventory grid, where scarcity and placement are central to the resource-management loop.

Cargo
Heavier than standard items and singular in nature. Carrying cargo affects player movement, surfacing a meaningful tradeoff through the interface.

Collectables
Bypass the inventory and route directly to a vault, requiring distinct visual treatment so players understand that they follow a different rule set.

Designing for Long Play Sessions

MMO sessions are long by nature. The UI was paired with the game's day-night cycle so light and dark modes could reduce visual fatigue without compromising readability.


Designing the In-Game Map

The map needed to communicate complex world-state information clearly across multiple zoom levels and in the minimap. I designed an icon system for players, creatures, ruins, claims, empires, and custom markers, while ensuring the map could support interactions such as claim previews, marker placement, and tracking. Biomes, borders, and sailing wind direction also needed to remain immediately readable.


A Scalable Icon System
Designed map icons for players, creatures, ruins, claims, empires, and custom markers, with each category remaining legible across full-map and minimap contexts.

Readable World State
Biome regions, empire borders, claim tiers and statuses, and sailing wind direction all needed to be visible at a glance without overwhelming navigation.

Interaction & Tracking
The map supported interactive behaviors such as claim previews, custom marker placement, and tracking flows, so the iconography had to function as both information and interface.
Image 1
Image 2
Image 3
Image 4

Marketing & Brand

The design language was extended into booth design, merchandise, and Steam campaign assets.


TwitchCon 2025 Booth
Designed and modeled a 3D booth preview that gave the team a concrete visual reference for planning BitCraft's physical presence at TwitchCon 2025.

TwitchCon Merchandise
Designed the TwitchCon 2025 hoodie, extending the BitCraft visual identity into a physical product.

Steam & Social Assets
Produced wishlist campaign assets and reusable templates for the marketing team, enabling consistent output across YouTube, Steam, and social channels.
Image 1
Image 2
Image 3
Image 4
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Outcome

The game entered early access with strong traction across wishlists, concurrent players, and sales.


250,000+
Wishlists
Accumulated ahead of launch through sustained public visibility and coordinated marketing.

4,500+
Peak Concurrent Players
A strong retention signal for an independent early access MMO at launch.

127,000+
Copies Sold
Estimated Steam sales as of March 2026, representing a strong result for an independent studio's early access title.
arrow_back BitCraft Online at Clockwork Labs ios_share