SYSTEMS DESIGN · INFORMATION ARCHITECTURE · WAYFINDING · ACCESSIBILITY

One map, three layers, zero overload

An open-world island map had to hold everything at once: the player, other players, NPCs, missions, points of interest, stations, homes, properties, and stores. At full density it became a wall of overlapping markers. As sole designer, I rebuilt what the map shows and when, so players could always orient themselves and find their next destination without decoding a crowded screen.

Full island map at the farthest zoom

// The island at the farthest zoom — only the player, teleport point, and key destinations. Wayfinding first.

Sole Designer
Map & Navigation
Systems & IA
map_navigation.ui
3×
zoom layers, each revealing only what that distance needs
10+
marker types unified into one legible icon system
A11Y
color-independent icons, readable by shape even when clustered
01 — LAYERED BY ZOOM

Detail appears only as you look closer

I designed three zoom levels that reveal information progressively. The furthest layer shows only events, places, and key destinations for wayfinding. The middle layer adds NPCs and mission points. The closest layer surfaces resources, friends, and property markers.

Detail appears only as the player looks closer, so the map answers "where do I go" before it ever answers "what is everything here." The same screen serves orientation and detail without ever showing both at once.

// map_navigation.ui — progressive reveal by zoom level
Far · Wayfinding
Mid · + NPCs & Missions
Close · + Resources & Homes
Map at selected zoom level

// Far — the whole island. Only events, key destinations, and the teleport spawn point.

02 — THE ICON SYSTEM

A marker language, not just markers

I built a full marker language covering the player, other players, NPCs (with avatar), mission points, teleport, points of interest, puzzle games, stations, and location types — home, property, and store. Every marker type carries a distinct meaning at a glance.

I led the UI team to keep every icon legible by shape and silhouette rather than color, so the system stays readable and accessible even where markers cluster tightly. Color reinforces meaning; it never carries it alone.

Map point icon legend
// Point markers — player, tracked task tags, mission point, teleport, POI, puzzle games, station, other players, NPC.
Location icon legend
// Location markers — home, other properties, stores. Distinct by silhouette before color.
03 — INTERACTION STATES

One popup pattern, every marker

I designed the marker popups as a complete state set: track an NPC, teleport to a location, an untrack state, and a no-description fallback for markers that carry no copy.

Every marker type shares one consistent popup pattern, so interaction stays predictable no matter what the player taps. The action label changes with context — Track, Teleport, Untrack — but the structure never does.

Popup interaction states
// The full popup state set — NPC tracking, location tracking, no-description, and the untrack state.
NPC popup live on the map
// A popup in context — the same pattern rendered live over the map, anchored to its marker.
04 — OUTCOMES

Orientation before information

Three zoom layers replaced a single overloaded view — players orient before they parse detail

10+ marker types unified into one icon language, legible by shape even at full density

Color-independent icons keep the map accessible where markers cluster

One consistent popup pattern across every marker type — interaction stays predictable

← All work A room editor you build with your hands →