Skip to content
Work index02 / 11 Menu

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

  1. 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.

  2. 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.

  3. 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.

  4. 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
Next screen

Index

The main navigation modal and router for game modes, shops, and inventories.

Menu