01 / GAMEPLAY
Physics-based combat
Launch characters through a physics-driven battle system and create satisfying enemy interactions.
GAME UI/UX REDESIGN · BY JOYONTO ROZARIO
PINOMINOS
A colorful mobile game interface designed around strategic gameplay, character interaction, and playful visual storytelling.
Designed by Joyonto Rozario · UI/UX Designer & Game UI Designer
DESIGN · PLAY · INTERACT
Small characters. Big battles.
01 — Project Overview
Designing a game experience that feels as playful as the gameplay.
PINOMINOS combines colorful characters, physics-based combat, strategic matching, progression, and a chaotic 3D world. The UI needed to make all of those systems understandable without losing the personality of the game.
02 / CHARACTERS
Distinct teams
Six recognizable characters create clear team identities and make selection feel meaningful.
03 / PROGRESSION
Strategy & growth
Players collect rewards, build their army, upgrade, and continue through increasingly challenging rounds.
Designer
Joyonto Rozario
UI/UX Designer · Game UI Designer
02 — The Challenge
Make a complex game feel instantly understandable.
The experience contains gameplay stats, lives, rounds, enemies, teams, characters, missions, rewards, purchases, settings, and progression. The design challenge was to organize those systems into a visual hierarchy that players could scan quickly during fast-paced gameplay.
- Reduce cognitive load during combat.
- Make characters and team identity immediately recognizable.
- Create consistent interaction patterns across the game.
- Balance playful visuals with readable information.
03 — PINOMINOS UI/UX Design Process
From structure to interaction, one layer at a time.
The project moved from information architecture and wireframes into a complete visual system, final screens, and an interactive prototype.
01
Discover
Understand game mechanics, characters, progression and monetization.
02
Structure
Map the major screens and navigation relationships.
03
Wireframe
Define hierarchy, placement, actions and feedback.
04
Visualize
Build characters, icons, typography and color language.
05
Prototype
Connect the core flow and micro-interactions in Figma.
06
Refine
Improve clarity, consistency and presentation quality.
04 — Wireframes
Structuring the game experience before adding visual polish.
Low-fidelity wireframes established the information hierarchy for the home screen, gameplay, profile, missions, shop, upgrades, and account areas.
Digital wireframes — navigation, screen hierarchy, gameplay information and commerce structure.
“First make the experience understandable. Then make it memorable.”Design principle used throughout the project
05 — PINOMINOS UI Assets & Visual Design
Building a visual language players can recognize at a glance.
The asset system connects characters, icons, typography and color into one playful visual identity.
Characters, game icons, typography and color palette.
06 — Visual System
Bright, bold, readable, and intentionally playful.
The visual system uses high-contrast team colors, expressive character artwork, bold display typography, rounded UI components, and clear action states.
- Blue: primary interface and navigation language.
- Red: combat, enemy and warning states.
- Green: positive actions and the green faction.
- Yellow: rewards, highlights and premium emphasis.
07 — Final PINOMINOS Game UI Screens
Bringing the PINOMINOS experience to life.
The final screens combine the established visual language, character system, gameplay mechanics and progression structure into a cohesive mobile game experience.
Final UI / Master Screens — gameplay, character selection, character introduction, results and shop.
SCREEN 01
Gameplay Interface
Score, lives, round indicator, enemy state and attack controls remain visible without overpowering the action.
SCREEN 02
Character Selection
Team cards and character choices create a clear decision point before combat.
SCREEN 03
Character Introduction
Character personality, role and team identity are introduced before the player enters the battle.
SCREEN 04
Round Results
Battle statistics, captured units, rewards and continuation actions are grouped into one results moment.
SCREEN 05
Shop & Monetization
Currency, packs, premium items and restore-purchase actions follow a consistent card-based system.
08 — Figma Interaction Prototype & Game UX
From screen to interactive experience.
The prototype connects gameplay, character selection, progression, monetization and settings into a seamless user journey.
Prototype flow — Home → Team → Character → Gameplay → Results → Shop → Next Round.
01
Home / Main Menu
Enter the game, review key status information, and start the journey.
02
Choose Team
Explore the factions and select the preferred team.
03
Select Character
Choose a character and understand their role before battle.
04
Gameplay / Attack
Match, aim, launch and receive visual feedback from the battle.
05
Round Results
Review performance, collect rewards and decide what happens next.
06
Shop / Upgrade
Use rewards to upgrade characters and access premium items.
07
Next Round
Continue the adventure and face the next challenge.
09 — Design Decisions
Why the interface works as one system.
01 / HIERARCHY
Gameplay first
Critical combat information stays close to the action while secondary systems remain accessible.
02 / CONSISTENCY
Reusable components
Cards, buttons, badges, colors and typography repeat across screens to reduce learning effort.
03 / FEEDBACK
Clear state changes
Warnings, rewards, selections and results use strong visual changes so actions feel responsive.
10 — Outcome
A complete game UI case study, from concept to prototype.
The project demonstrates a full UI/UX workflow for a mobile game: information architecture, wireframing, visual design, asset creation, final screens and interactive prototyping.
- Established a cohesive game visual language.
- Designed a connected player journey across core screens.
- Created a reusable UI asset and component direction.
- Translated game mechanics into clear interface patterns.
11 — Closing
Design. Play. Interact.
PINOMINOS was designed as a playful system where visual personality and usability work together — helping players understand the game while keeping every interaction energetic.
Back to top ↑