Showroom12Web app — booking
Nextup
Soft paper, hard hold
Four screens between a phone at eleven at night and a chair at ten the next morning — with a hold that genuinely expires.
- Product
- Nextup — Booking, mobile first
- Tenant
- Running on Iron & Oak, Wynwood
- Sector
- Web app — booking
- Quoted as
- Web AppsFrom $5,000
It is a phone build, so the frame here is a phone. The steps slide, the availability loads, Saturday is full and offers Sunday instead, the hold counts down in the bar, and the confirmation draws its own tick. Every barber, price and opening on it is invented.
New tab — the frame above is already running it.
01 — The brief
Iron & Oak’s website takes bookings, and the moment the shop wanted the same thing on its own terms — its own brand out of the way, holds that expire, a Saturday that can be genuinely full — it stopped being a page and started being a product. This is the second half of that sentence, and the cheapest possible demonstration of what the extra money buys.
02 — The direction
Soft paper, hard hold
Three moves, in the order they were made. Everything after this page — the palette, the type, the sections — falls out of them.
- 01
Warm, because of when it is used
VenueOS is a tool somebody uses at work, so it is set in a face with no opinion on near-black. This is the opposite job: somebody deciding what to do with an hour of their Saturday, on a phone, probably in bed. Warm paper, a soft serif with a wonk axis, one deep pine — a place rather than a booking engine.
- 02
The hold is real
Choosing a time starts five minutes and the bar counts them down. Let it run out and the slot goes back on the board with an honest banner, rather than failing silently at submit the way most booking forms do. It is the most product-shaped decision in the build and it costs about forty lines.
- 03
The bad days are in the demo
Saturday is fully booked, and the empty state offers the next real chair instead of shrugging. Availability shows a skeleton while it loads, because slots come from a calendar. A demo that only shows the happy path teaches a client to expect software that cannot exist.
03 — Palette
The colors, and what each one is for.
Every value here is a real token in the build. A palette with a role written beside each color is a palette somebody can hand over — which is the difference between a design and a decoration.
Cream
The app ground. Warm paper
Card
Every option, and every field
Line
Borders and the progress track
Ink
Type
Mute
Descriptions, durations, small print
Pine
The brand, and everything chosen
Mint
The wash behind a choice. Never type
04 — Typography
Two faces, and the reason for both.
Display
Fraunces
Aa Bb Cc 0123
The quick brown fox jumps over the lazy dog — 1234567890
A soft serif with softness and wonk on their own axes, dialed up: it makes the questions the app asks — what are we doing today, who is cutting, when suits you — sound like a person asking them. Warmth is a feature in a consumer flow and a liability in a dashboard, which is exactly why the two products do not share a face.
Text
Plus Jakarta Sans
Aa Bb Cc 0123
The quick brown fox jumps over the lazy dog — 1234567890
A humanist geometric that stays exact at fourteen pixels on a phone held at arm’s length. It sets every price, every duration and every field label, and it never once tries to be the serif above it.
05 — What it does
The part a template cannot copy.
Four screens, and a bar that always knows the total
Service, chair, time, details. The bottom bar carries what has been chosen and what it costs from the first tap, so nobody reaches the end and finds a number they had not agreed to.
A hold that counts down
Five minutes from the moment a slot is chosen, shown in the bar. Expire it and the app says so plainly and puts you back on the time step, which is the honest behavior and almost nobody’s.
Full days that say they are full
Saturday goes about ten days out. The app says that, then offers the next real chair as a single button rather than making somebody tap through the week to find it.
A confirmation worth screenshotting
The one screen a customer shows somebody else: a check that draws itself, the booking as a ticket in the shop’s own green, and the address on it.
Next in the showroom
MERIDIANCold light, blued steel