︎
Mark
VISITOR MOBILE APP
A mobile app for shopping, dining, events and wayfinding on site. I defined the navigation, designed the paths for finding a place and booking a table, and built the design system behind the screens.
Saved screen
Explore screen
Map screen
01
PROBLEM
What visitors ask on site
Hudson Yards public square
Public Square on a Saturday afternoon, where most first visits begin.
28
Acres
4
Buildings
7
Retail levels
87
Shops and restaurants
THE FOUR QUESTIONS
“Where is it, and which level am I on?”
“Is it open, and is it worth the walk?”
“Can I still get a table tonight?”
“What is on tonight?”
02
USERS
Three arrivals, three clocks
The visitor
2–4h
FIRST TIME
Tickets for the Vessel
A table tonight
The nearest bathroom
“Just tell me the one thing to do next.”
The commuter
40m
WORKS NEARBY
What is open now
Walk time, not distance
How long the queue is
“I have until 1:15.”
The regular
monthly
LOCAL
What changed since last time
This month’s events
Member offers
“What is new this month?”
03
INFORMATION ARCHITECTURE
Five tabs, nothing in a drawer
Explore
Tonight
Featured
Member offers
See & Do
Directory
Filter sheet
Store detail
Dining detail
Categories
Map
Level switch
Amenities
Walk time
Place sheet
Events
Date ranges
Day list
Event detail
Add to calendar
Saved
Places
Events
Tickets
Empty state
04
WIREFRAMES
Structure before photography
Explore
Directory
Map
Detail
05
FLOW
The two paths that matter
FLOW A · FIND A STORE AND WALK TO IT
Directory
→
Filter
→
Store
→
Route
Browse
Narrow
Choose
Walk
FLOW B · BOOK DINNER TONIGHT
Explore
→
Dining detail
→
Saved
Tonight
Pick a time
Confirmed
06
DESIGN SYSTEM
Colour, type and components
PALETTE
#14263B
Action
#8A1538
Wine
#B08D57 / #8A6A2F
Brass and deep gold
#DDD6C7
Chosen
Open
Closing soon or few left
Closed or sold out
TYPE AND ICONS
Playfair Display
Place names and titles · 19 / 24 / 32 / 46
Archivo 400 · 500 · 600
All controls and meta · 11.5 to 17
Phosphor · fill weight marks the live stop
WHAT EACH COLOUR IS ALLOWED TO DO
Action
One filled shape a screen: buttons, switches, the live tab.
Wine
Direction only, once a screen: the pin, the route.
Brass and gold
What is mine or running out. Deep gold at glyph size.
Chosen
Everything selected takes the stone step. Fill, never navy.
CORE COMPONENTS
Chosen
Default
Filter pill · 100px
Primary action
One per screen
Place name
Category · Level
Open · closes 9 PM
Place row · 16px
Explore
Directory
Map
Tab bar
07
DECISIONS
What we chose
List first, map on demand
A map answers where, not what. Arrivals need a shortlist first.
Booking on the venue page
Dinner gets decided while reading the room, so the times sit there.
Status as a dot
Rows are read while walking. Open or closed is the whole decision.
Saved promoted to a tab
Tab weight follows repeat use. The feed was rarely opened twice.
08
SCREENS
Final screens
Explore
Explore
Directory
Directory
Map
Wayfinding
Store detail
Store
Dining detail
Dining
See and do
See & Do
Events
Events
Event detail
Event
Saved
Saved
Filter sheet
Filter sheet
Hudson Yards
Visitor mobile app
A mobile app for shopping, dining, events and wayfinding on site. I defined the navigation, designed the paths for finding a place and booking a table, and built the design system behind the screens.
Explore
Map
01
Problem
What visitors ask on site
Hudson Yards public square
Public Square on a Saturday afternoon, where most first visits begin.
28Acres
4Buildings
7Retail levels
87Shops and restaurants
The four questions
“Where is it, and which level am I on?”
“Is it open, and is it worth the walk?”
“Can I still get a table tonight?”
“What is on tonight?”
02
Users
Three arrivals, three clocks
The visitor
2–4h
First time
  • Tickets for the Vessel
  • A table tonight
  • The nearest bathroom
“Just tell me the one thing to do next.”
The commuter
40m
Works nearby
  • What is open now
  • Walk time, not distance
  • How long the queue is
“I have until 1:15.”
The regular
monthly
Local
  • What changed since last time
  • This month’s events
  • Member offers
“What is new this month?”
03
Information architecture
Five tabs, nothing in a drawer
Explore
Tonight
Featured
Member offers
See & Do
Directory
Filter sheet
Store detail
Dining detail
Categories
Map
Level switch
Amenities
Walk time
Place sheet
Events
Date ranges
Day list
Event detail
Add to calendar
Saved
Places
Events
Tickets
Empty state
04
Wireframes
Structure before photography
Explore
Directory
Map
Detail
05
Flow
The two paths that matter
Flow A · find a store and walk to it
Browse
Browse
→
Narrow
Narrow
→
Choose
Choose
→
Walk
Walk
Flow B · book dinner tonight
Tonight
Tonight
→
Pick a time
Pick a time
→
Confirmed
Confirmed
06
Design system
Colour, type and components
Palette
#14263B
Action
#8A1538
Wine
#B08D57 / #8A6A2F
Brass and gold
#DDD6C7
Chosen
Open
Closing soon
Closed
Type
Playfair Display
Place names and titles · 19 / 24 / 32 / 46
Archivo 400 · 500 · 600
All controls and meta · 11.5 to 17
What each colour is allowed to do
Action
One filled shape a screen: buttons, switches, the live tab.
Wine
Direction only, once a screen: the pin, the route.
Brass and gold
What is mine or running out. Deep gold at glyph size.
Chosen
Everything selected takes the stone step. Fill, never navy.
07
Decisions
What we chose
List first, map on demand
A map answers where, not what. Arrivals need a shortlist first.
Booking on the venue page
Dinner gets decided while reading the room, so the times sit there.
Status as a dot
Rows are read while walking. Open or closed is the whole decision.
Saved promoted to a tab
Tab weight follows repeat use. The feed was rarely opened twice.
08
Screens
Final screens
Explore
Explore
Directory
Directory
Wayfinding
Wayfinding
Store
Store
Dining
Dining
See & Do
See & Do
Events
Events
Event
Event
Saved
Saved
Filter sheet
Filter sheet