Loadout & Stash
Extraction-shooter equip screen: body slots, grid containers, and a full stash on one page.
- Role
- UI design, systems layout
- Year
- 2025
- Type
- Menu
- Tools
- Figma, Roblox Studio
Overview
A three-column inventory screen that puts what you are wearing, what you are carrying, and what you own side by side, with no sub-menus in between.
The problem
Loot-and-extract inventories are dense by nature. Split them across tabs and players lose track of what is equipped while they are packing.
Process
- 01
Three columns, three questions
Left answers 'what am I wearing', middle 'what am I carrying', right 'what do I own' — drag targets stay visible from any column.
- 02
Silhouette as the map
Slot frames sit on a character silhouette so head, chest and back gear read positionally before the label is read.
- 03
Labelled slot chips and keybinds
Every slot carries a small caps tag, and weapon slots print their bind (1, 2, V) directly in the frame.
- 04
Hatched states for blocked slots
Diagonal hatching marks slots that are locked or blocked by current gear, so an empty square never reads as an available one.
Solution
A monochrome, high-contrast loadout page with a persistent tab rail, uniform grid cells across rig, backpack, container and stash, and three currency counters in the stash header.
One screen covers equip, pack and stash management, with the grid cell as a single reusable unit across every container.
Spec
- 8
- Body slots
- 4
- Container types
- 3
- Currencies tracked
Index
The main navigation modal and router for game modes, shops, and inventories.