Skip to content

Case study · Lovable challenge

BuildingSTILL.

—
STILL is a fictional one-chair hair studio in Zürich Kreis 4. The brief: Mara can't answer booking messages while she is cutting hair, evening times are popular, and every cancellation leaves a gap someone has to fill by hand. This is the full walkthrough — from the hero to the owner workspace, and the automations that run behind both.

Before

Every message was a pause in someone's haircut. Every cancellation, an hour lost unless Mara found a replacement between clients.

The site, feature by feature

01

The hero — a studio that knows the time

The page opens on a single arched portrait of the studio, framed by oversized editorial type: “STILL. / Good hair.” Line-art scissors, a comb and sectioning marks drift gently around the typography as you scroll — the only decoration, drawn in the same ink as the text.

The greeting is aware of Zürich time: morning, afternoon and evening each get their own line. Under the portrait sits a live chair status — “the chair is free” or “in the chair until 14:15” — read from real bookings, refreshed every couple of minutes. When the chair is occupied, the empty-studio photograph cross-fades into one of Mara mid-cut, and the caption changes to “In the chair now”.

02

One continuous journey, not sections

Scrolling the homepage is a single editorial narrative: arrival, consultation, the cut, the three services, shape, precision, finish, the mirror, the result. Chapters trade light paper for deep ink and back, so the dark moments feel like deliberate interruptions.

The floating navbar is a precision instrument, not a menu: it carries the STILL wordmark, a chapter counter (01 / Cut, 02 / Consultation …) with a hairline progress rule, and the booking action. It slides away as you scroll down and returns the moment you scroll up. Moving between pages plays a scissor-cut transition — the screen parts like paper — and a faint film grain sits over everything.

03

Services — three, fixed, honest

The services page lists exactly what Mara does: Maintenance (45 min, CHF 85), Signature cut (60 min, CHF 115) and Restyle (75 min, CHF 145). Each row shows duration, price, what's included — consultation, wash and finish are inside the time, never extra — and its own editorial photograph.

Every row carries a direct “Book” action that opens the booking flow with that service already chosen. Prices and durations live in one shared catalogue, so the site, the booking engine and the receipts can never disagree.

04

Booking — under a minute, no account

Booking is a calm three-step editorial flow: choose a service, choose a time, leave your details. The date strip scrolls inside the page (never stretching it), the time grid opens on the next available day, and picking a time moves you forward automatically.

Times are real: the server checks opening hours, the lunch pause, the 15-minute grid, a two-hour minimum notice and a 30-day horizon before offering anything. Clicking a time places a five-minute hold on the chair while you fill in your name — so two people can never grab the same slot. Payment happens at the studio; nothing is charged online.

05

The receipt — cut from the page

Confirming a booking plays the site's signature moment: the confirmation receipt is scissor-cut from the page along a perforated line and settles into place. It carries the service, time, price and a booking reference (ST-…).

From the receipt, clients can add the appointment to their calendar — a downloadable .ics file with a reminder two hours before, or a one-tap Google Calendar link — and jump straight to managing the booking.

06

Self-service — change or cancel alone

Every booking can be managed without messaging Mara. The manage page opens with the email and booking reference from the confirmation — no link to lose, no account to create. Wrong details get a neutral “couldn't find an appointment” that reveals nothing.

Up to two hours before the appointment, clients can move to any other open time or cancel outright. Inside two hours, a change becomes a request Mara sees in her workspace. Customers can also set a quiet preference — quiet please, or happy to chat — so the chair feels right before they sit in it.

07

The waitlist — cancellations refill themselves

When a day is full, the empty state offers the waitlist instead of a dead end. A request carries preferred days, time windows and how much notice the person needs.

When a matching time frees up — say Jonas cancels his Signature cut — the chair is free immediately, the matching request is invited automatically, and claiming it rebooks the time with no owner step. The activity trail records it as “Opening recovered”.

08

The owner workspace — a quiet appointment book

Mara signs in with one tap (this is a demo) and lands on Today: the chair's day as a simple timeline, not a dashboard. No sidebar, no cards, no charts — her day, her week, the waitlist and an activity trail.

Standard bookings and valid changes need nothing from her. She sees late-change requests, blocks time off when she needs to, and can move an appointment herself when the phone does ring. The workspace is designed around how one chair actually works.

09

Automations — the busywork runs itself

Every message the studio owes a client — the confirmation, a moved or cancelled appointment, a waitlist invitation — is written to a queue at the same moment the change happens, then sent by a background job that runs every five minutes, even with every browser closed.

Reminders go out 24 hours and 2 hours before each appointment, and are skipped if the booking has since moved or been cancelled. Failed sends are retried automatically after 1, 5 and 15 minutes; if every retry fails, the message lands under Mara's “Needs attention” — the only moment she touches any of it.

Each booking in her workspace carries its message history: queued, accepted by the email service or failed. Real delivery begins once the sender domain's DNS is verified; until then every message is honestly marked “waiting for sender domain” rather than pretending to be sent.

10

Demo mode — the whole studio, safely

A per-tab demo mode lets anyone explore the full experience — booking, managing, the waitlist, the owner workspace — against an in-memory studio, clearly labelled as preview data. Nothing in demo touches the live tables, and closing the tab forgets it.

What changes, in four lines

  1. 01Book in under a minuteThree fixed services, fixed prices, real open times shown straight away. No account, no payment online.
  2. 02Change or cancel aloneEmail plus booking reference opens the appointment. Move or cancel up to two hours before; inside two hours it becomes a request Mara sees.
  3. 03Wait for a better timeA waitlist request with days, time windows and notice. When a matching time frees up, the person is invited automatically.
  4. 04Mara keeps cuttingHer day, week, waitlist and an activity trail. Standard bookings and valid changes need no action from her.
  5. 05The busywork runs itselfConfirmations, moved and cancelled notices, 24-hour and 2-hour reminders and waitlist follow-ups are queued and sent automatically, with retries on failure.

Recovery, in sequence

  1. Step 1

    Jonas cancels his Signature cut from his link.

  2. Step 2

    The time is free on the chair immediately.

  3. Step 3

    Ana's matching waitlist request is invited.

  4. Step 4

    Ana confirms; the activity trail records “Opening recovered”.

Evidence · checked September 2026

  • Real, stored bookingsVerifiedBookings were made end to end, opened from self-service and removed again. Stored in the database, not the browser.
  • No double bookingVerifiedOne-chair rule enforced by the database itself: holds, bookings and blocks can never overlap, including cleanup time.
  • Confirm twice, book onceVerifiedRepeating a confirmation returns the same booking instead of creating a second one.
  • Opening hours, lunch, 2-hour notice, 30-day horizonVerifiedChecked on the server for every hold and change, not only hidden in the page.
  • Private, neutral self-serviceVerifiedEmail + reference opens the appointment; wrong details reveal nothing. Legacy link tokens are stored only as hashes.
  • Waitlist recoveryVerified in demoCancelling a Signature cut invites the matching waitlist request; claiming it rebooks the time with no owner step.
  • Live chair statusVerifiedThe homepage hero reads real bookings to show whether the chair is free, and swaps imagery when it's occupied.
  • Messages & remindersQueuedConfirmations, change notices, reminders and waitlist follow-ups are queued in the database and sent by a background job with automatic retries; the demo shows them in a labelled simulated inbox. Real delivery starts once the sender domain is verified.

Known limits and honesty notes

  • — One chair and three fixed services by design.
  • — No two-way calendar sync, no online payments or deposits.
  • — Real message delivery waits on sender-domain verification; until then messages are queued and marked as waiting, never shown as sent.
  • — No usability study was run; no conversion or time-saving figures are claimed.
  • — The studio, Mara, customers and address are fictional. Photography is AI-generated concept imagery.