LinehavenStudio
Start a project

01 — Appointment website · Concept

Ferris Street Barbers

Helps a neighborhood barbershop fill its chairs: customers see prices, pick a service, a barber and a time, and book in under a minute.

Open the live demo

Scan to try it on your phone

Business
Barbershop (fictional)
Project
Appointment website
Status
Concept · live demo
Built with
Astro, TypeScript, CSS

(01)

The brief

Ferris Street Barbers is a fictional four-chair barbershop. Most new customers find a shop like this on Instagram or a map app, on their phone, often while deciding where to go that same day.

Bookings that arrive through direct messages and phone calls get missed when every chair is busy. The brief: make services and prices obvious, show who cuts what, and let someone book a slot without an account or a phone call.

  • Goal 01 Start booking from the first screen on a phone
  • Goal 02 Show price and duration for every service
  • Goal 03 Help customers choose a barber by style
  • Goal 04 Keep the flow to four short steps

(02)

Design decisions

  1. 01

    Book is always one tap away

    A booking bar stays at the bottom of the screen on phones, and every service in the price list has its own Book link that preselects it. Someone who already knows they want a skin fade skips a step.

  2. 02

    Prices and durations up front

    The price list reads like the board on the wall: service, minutes, price. Customers decide on cost and time first, so the list comes before the gallery instead of after it.

  3. 03

    Barbers shown through their work

    Each profile leads with the kind of cut that barber is known for rather than a posed headshot. It answers the question customers actually ask: who should I book for this?

  4. 04

    Bold type, warm texture

    Condensed, heavy headlines and a warm neutral palette with one brick-red action color. A light film grain over the photography keeps the site from feeling like a template.

Ferris Street Barbers: a key screen on a laptop

(03)

The customer journey

The main journey is booking from a phone. Each step shows one decision and keeps the summary visible.

  1. Ferris Street Barbers homepage on a phone with the headline and Book a cut button

    Step 1

    Land and see the offer

    The first screen names the shop, today’s hours and a Book button. The price list starts right below.

  2. Booking step one on a phone: a list of services with durations and prices

    Step 2

    Pick a service

    Every service shows its duration and price. Tapping one moves straight to the barber choice.

  3. Booking step two on a phone: barber options with their specialties

    Step 3

    Choose a barber

    Pick a barber by specialty, or choose the first available chair.

  4. Booking step three on a phone: day selector and available time slots

    Step 4

    Pick a time

    Days scroll horizontally and sample times appear as large, tappable slots.

  5. Demo booking confirmation on a phone explaining that no appointment was made

    Step 5

    Confirm

    A clear review screen, then an explicit demo confirmation. No details are collected and no appointment is made.

(04)

How it’s built

  • Static pages with one small TypeScript module for the booking flow; no framework runtime.
  • Booking state stays in the browser tab. No names, phone numbers or emails are collected.
  • Choices are native radio inputs, so the flow works with a keyboard and screen reader; focus moves to each new step.
  • Photography is served as AVIF and WebP at sizes matched to the screen.
Open the live demo Start a project like this