HeadoutOct-Nov 2024

Map Design System

Overview

Why maps, of all things?

One map. Everything your ticket unlocks. Now you have a clear idea of where you’ll go and the fun stuff to do there.
That's what a Headout map is supposed to do — and the map design system is what makes it possible at scale.

Some awesome maps made so far

Problems

Why Map DS came into picture

Problem

Every map looked different, with no shared visual language across designers.

How I solved it

I created a 9-section system covering colour, illustration, icons, typography, legends, composition, texture, logos and handoff checklist.

Problem

Designers were spending 3–5 days building each map from scratch.

How I solved it

I introduced reusable components, a structured starting frame and a pre-handoff checklist, reducing production time to 1 day.

Problem

The growing map backlog made consistency and scalability increasingly difficult.

How I solved it

The system now supports 250+ maps across LFC, DEX, routes, areas, floor plans, theme parks, nature trails, etc.

The journey

Treasure hunt: Find the one palette that works
for all use cases.

It was all about trial and error — tried hundreds of combinations — before I could confidently engrave anything on stone.

Some other good decisions

Base palette with black and white (different opacities) layers added for terrain shades
Colour-coded amenity icons for at-a-glance wayfinding

Gathered every legend, marker, units — most
were unique styles.

Then I narrowed down

Two legend formats — horizontal and vertical, with only 2 kinds of markers.
The numbered markers and icon markers have easy to choose variants in size and content.
Different marker sizes ensure the balance in the maps stay based on density of markers

Tested every text treatment before arriving at
the final 4 text styles.

Can Grand Canyon solve its grand problem? nope but we did

Waterway-contrast issueThin waterways were clashing with labels. Curved text with a low-opacity stroke kept them legible without harsh contrast.
How Google Maps solved textI referenced Google Maps to develop text treatments with strokes and contrast that improved legibility without disrupting the visual language.

Pre-handoff checklist: most common map
crimes to avoid.

This section covers layer order, spacing, redundancy, legibility and marker numbering before every map shipped.

  • Reduced back-and-forth
  • Proper naming and arrangement rules for layers
  • No information redundancy

Impact

300+Maps built using DS
70+Maps personally designed
1 dayCurrent design time (down from 5)

I also wrote a blog about it on
the Headout studio, go read!

Read now
Headout Studio blog post about the map design system

Subproject: Dex maps

DEX - Headout’s AI tour guide - needed maps that
were accurate and easy to navigate.

They show users exactly where they are within a POI, checkpoint by checkpoint.

HO maps vs Dex maps

Headout mapsDex maps
PurposeAttract + orientNavigate in real time
ScaleEdge-to-edge webZoomed in mobile
ColourFull DS paletteWarm, tight zone
TypeRoute, area, floor planFloor plans only
DetailAttractionsNavigation paths

Navigation should be clear. But make it more detailed. No clutter tho.

There was no single reference for every room and floor, while adding more architectural detail meant cluttered navigation. So I made some rules -

Used famous, identifiable tile patterns
Different colours for different zones
Markers along corners and borders to give way to post product pathways

Impact

85+Individual map files live
1 dayCurrent design time/map
100%Smiles working with Dex prod team

Dex maps currently live (!!!)