Fuse a Brainrot — full game UI system.
A complete interface system for a Roblox fusion-idle game — from first launch to end-game monetization — designed end-to-end in Photoshop and Illustrator.
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
First-impression screen with the fusion machine motif, progress bar, and social links to carry brand recall into the community.
Main HUD — Safe Zone
Currency, zone status, and quick-access icons (inventory, fusion lab, book, settings) laid out for one-thumb mobile play.
HUD — Passive Income State
A secondary HUD state surfacing per-second income and zone safety, reinforcing the idle-game loop at all times.
Part Storm — Incoming State
An early-warning banner that builds anticipation before the event goes live, without interrupting play.
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 Screen
Part slots, live fusion stats (rarity boost, machine level, luck), and a tier-odds bar so players understand risk before committing.
Fusion Reveal Sequence
A 7-phase storyboard (shake → spin → converge → silhouette → suspense → reveal → actions) handed to developers frame-by-frame.
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
Raw Parts vs. Fused Creatures tabs, sort/filter controls, and a capacity bar to nudge upgrade purchases.
Rebirth
A prestige screen with a clear cost, reward preview, and an honest warning about what resets versus what's kept forever.
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
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.
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
Visual/performance toggles, volume sliders, and quick-access buttons to the shop, rebirth, and Discord — all in one panel.
Code Redemption
A simple input + recently-redeemed log so players can confirm a code worked without leaving the screen.
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.
Planning your own Roblox interface?
Use the Roblox UI designer hiring checklist to compare screen scope, source files and implementation responsibilities before you book.
Planning a similar project?
Explore the scope, process and starting prices: Roblox UI Design.