Role
Game UI/UX Designer
Tools
Photoshop · Illustrator
Timeline
5–7 Days
Screens Delivered
16 Screens
Platform
Roblox

The Brief

The client was building "Fuse a Brainrot" — a Roblox fusion-idle game where players collect parts, fuse them into creatures across nine rarity tiers, and compete to protect (or steal) each other's best pulls. They needed a single designer who could take the entire interface — every HUD state, popup, and system screen — from concept to dev-ready mockups in about a week, with a cohesive visual language that felt native to Roblox but still stood out from typical asset-flip UI kits.

Scope of Work

Six systems, one visual language.

Every screen needed to share the same typography, color coding, and button language — so the game would feel like one product, not sixteen separate screens.

🎮 Core HUD & Live Events

Main HUD, currency & zone readouts, and a two-state live event system (incoming warning → active event) for the "Part Storm" mechanic.

⚡ Fusion System

The full fuse flow — part selection with live stat odds, a seven-phase reveal animation storyboard, and a nine-tier rarity sweep bar.

📈 Progression & Retention

Inventory with raw parts vs. fused creatures, a rebirth/prestige screen, and a 7-day daily rewards tracker.

💰 Monetization

A shop with a featured mega-bundle, gamepasses, and boosts — priced and laid out for conversion without feeling pay-to-win.

⚔️ Social & PvP

A steal-alert notification system that turns a negative moment (getting raided) into a re-engagement hook with a teleport CTA.

🛠️ Onboarding & Settings

Loading screen, settings panel, code redemption, and a patch-notes popup for post-launch updates.

Core HUD & Live Events

Always-on information, without the clutter.

The HUD needed to communicate cash, zone safety, and time-sensitive events at a glance — and the "Part Storm" event escalates from a subtle warning state into a full red alert without ever blocking gameplay.

Loading Screen UI

Loading Screen

First-impression screen with the fusion machine motif, progress bar, and social links to carry brand recall into the community.

Main HUD

Main HUD — Safe Zone

Currency, zone status, and quick-access icons (inventory, fusion lab, book, settings) laid out for one-thumb mobile play.

Income and zone HUD variant

HUD — Passive Income State

A secondary HUD state surfacing per-second income and zone safety, reinforcing the idle-game loop at all times.

Incoming Part Storm warning state

Part Storm — Incoming State

An early-warning banner that builds anticipation before the event goes live, without interrupting play.

Active Part Storm event state

Part Storm — Active State

The escalated red alert state once the event is live, with a countdown and drop-rate multiplier front and center.

Fusion System

The core loop, made satisfying.

Fusing parts is the heart of the game, so this system got the most design attention — a stats-forward selection screen, a seven-phase reveal sequence storyboard, and a color-coded tier bar spanning nine rarities.

Fusion part selection screen

Fusion Screen

Part slots, live fusion stats (rarity boost, machine level, luck), and a tier-odds bar so players understand risk before committing.

Fusion reveal animation storyboard

Fusion Reveal Sequence

A 7-phase storyboard (shake → spin → converge → silhouette → suspense → reveal → actions) handed to developers frame-by-frame.

Rarity tier sweep bar

Rarity Sweep Bar

Nine tiers from Trashy to GLITCHED, each with its own color identity — used across every screen for instant rarity recognition.

Progression & Retention

Reasons to come back tomorrow.

Inventory management, a prestige/rebirth loop, and a 7-day reward streak — the systems that turn a one-session player into a daily one.

Inventory UI

Inventory

Raw Parts vs. Fused Creatures tabs, sort/filter controls, and a capacity bar to nudge upgrade purchases.

Rebirth prestige screen

Rebirth

A prestige screen with a clear cost, reward preview, and an honest warning about what resets versus what's kept forever.

Daily rewards popup

Daily Rewards

A 7-day streak tracker with milestone teasers (Day 30, Day 100) to encourage long-term retention.

Monetization

Selling convenience, not power.

A shop built around a hero "Mega Bundle" offer, with gamepasses and boosts organized into scannable tabs.

Shop UI with gamepasses

Shop

Best-value bundle pinned above the fold, with GamePasses and Boosts & Items split into separate tabs to reduce decision fatigue.

Social & PvP

Turning a raid into a hook.

Getting robbed by another player usually feels bad — this alert reframes it as urgency and gives players an immediate path back into the action.

PvP steal alert notification

Steal Alert

A high-contrast red banner naming the attacker and stolen item, paired with a one-tap Teleport button and a consolation item reveal.

Onboarding & Settings

The supporting cast.

Code redemption, settings, and patch notes — smaller screens that still needed to feel like part of the same product.

Settings panel UI

Settings

Visual/performance toggles, volume sliders, and quick-access buttons to the shop, rebirth, and Discord — all in one panel.

Code redemption UI

Code Redemption

A simple input + recently-redeemed log so players can confirm a code worked without leaving the screen.

Post-launch update patch notes popup

Post-Launch Update Popup

Patch notes with icon-led highlights and a redemption code baked in — turning changelog reading into a reward moment.

Design Approach

Every screen was built in Photoshop for layout, lighting, and mockup composition, with Illustrator handling icons, the rarity color system, and vector UI elements that needed to stay crisp at any size. Working across sixteen screens in five to seven days meant establishing the design system — color tokens, corner radii, typography scale, button states — on day one, then applying it consistently rather than reinventing layout decisions screen by screen.

The nine-tier rarity system (Trashy → Wonky → Decent → Fire → Godly → Mythic → Celestial → GLITCHED → ???) became the backbone tying every other screen together — the same colors show up in the fusion reveal, the inventory, and the steal alert, so players always know at a glance what they're looking at.

Have a game that needs this kind of system? Let's build it.