About project
Smuggling Zones2024Concept
A resource mode that quietly forces team variety.
Smuggling Zones is a resource mode for an RPG gacha mobile game: unlock zones, send a squad, collect rarity-graded loot to level heroes. I designed the whole flow, from grey wireframes to final screens in the game's skin. The result reads at a glance: which zones are ready, what each drops and how strong a squad the next tier needs.
- Role
- Game UX/UI Designer
- Client
- Unannounced RPG · gacha mobile game
- Platform
- Game · Mobile
- Tools
- Figma, Photoshop
Challenges
Everything in the mode is a number: a countdown on every zone, a strength value on every hero, four reward tiers with their thresholds and four rarities of loot. All of it has to read on a phone held sideways, in the seconds between fights, inside a gold and blackletter fantasy skin that is very good at hiding numbers.
- One landscape phone screen, 932 by 430, for zones, squads, tiers and rewards
- A hero works one zone at a time, so every squad sent in costs something somewhere else
- The reward tier is set by squad strength, and the player must see which tier they are heading for before committing
- The skin belongs to the game: gold on black, ornament everywhere, never on top of a value
Structure
Grey boxes before gold
Numbers are exactly what a fantasy skin can hide, so I laid every screen out grey first and only then dressed it. The layouts that came out of that pass are the ones the final screens still run on.
Look
Ornament on the frames, never over a value
The feature had to look like it had always been in the game, not like a mode bolted on, so the look came from the game: gold on black, ornament on frames and buttons, nothing on the numbers. Of ten display faces tried, two stayed: Tutbury for blackletter headings, Benguiat for everything read at speed.
Zones
One card, three states
Eight zones open as the player clears scenarios, three on screen at a time with a counter that says how far along that is. Each zone is one card, and the card carries its own state, so a player reads the whole screen without opening anything.
- Collect Reward when a run has finished, Reward Collected once it is taken
- A locked zone keeps its countdown on the card
- The zone page names what drops, graded ordinary, rare, mystic, legendary
Squads
The reward is set by who you send
Rewards come in four tiers, decided by the strength of the squad sent in. A hero works one zone at a time, so a squad strong enough for tier three here is a squad missing somewhere else. Farming several zones means building several teams, and the screens say that out loud instead of leaving it to be discovered.
- Four tiers, each with its strength range next to it: nought to ten thousand, ten to twenty, twenty to thirty, thirty thousand and up
- The roster filters by For You, Free, Busy, All, and a card already working says In Zone
- Moving a hero between zones is confirmed on a screen that shows the cost: a tier lost there, a tier gained here
Reward
At the payoff, the interface steps aside
The end of a run is the only place in the mode where the interface gets out of the way: the chest opens, the items come up one by one in their rarity colours, and a line at the bottom says a tap skips it all.
Results
The mode reads at a glance: which zones are ready to collect, what each one drops by rarity, and how strong a squad must be for the next reward tier.
Reflection
- The design problem was not the loot screen, it was the incentive: tiering rewards by strength varies how people play more than any tutorial.
- Greyboxing every screen first kept the fantasy skin honest. The structure had to hold before the gold went on.
- A clear rarity-colour system keeps a busy gacha screen readable. Players sort by colour before they read a word.