Skip to content
Marcos Bricches

Case study 03 · Booking app

Negativo

The booking app of an invented climbing gym in Rio, where every state of booking and paying works.

Role
Product, brand, design and front-end
Date
November 2026
Stack
React, TypeScript, TanStack Query, Tailwind CSS, Radix, MSW, Cloudflare Pages
Negativo, first screen of the live demo

The problem

A climber at a gym wants two answers at 17:20 on a Tuesday: what can I still book tonight, and is there room. Booking at a real gym is full of rules. A class has 10 spots and a waitlist. A ropes session needs a belay check first. A first visit needs a signed waiver. A cancel is free up to 12 hours before and costs the spot after that. Payment can be pass credits, Pix or a card that the bank declines or asks to verify.

Negativo answers the postings that ask for a product flow with every state designed, including loading, empty, failed, full, waitlisted, declined and expired. Each of those states can be opened and tried in the demo.

See it work

Three things to try:

  1. 01

    Open Movement Lab, which is full, and join the waitlist. Then go to Account, Demo, "A waitlist spot opens", and confirm the spot before the countdown runs out.

  2. 02

    Switch to the first visit in Account, Demo. Book Intro to Bouldering, sign the waiver, add FIRSTWALL and pay with Pix. The Pix screen has a button that plays the bank's part.

  3. 03

    Pay with the card ending 9995 and type 000000 as the bank's code, or pick the card ending 0002 and watch it get declined.

How it was made

Spec

The product, the booking and refund rules, and a name checked free on the web and at its address.

Brand

Three directions side by side, one kept and reworked twice.

Prototype

One flow with every state behind a link, each screen copying the composition of a real booking app.

Photos

Free photos checked for gym and sponsor branding. Two were retouched, one was cropped, and one was replaced because its sponsor banner could not be cleaned.

Build

The production stack with a mocked API, and the booking rules under unit tests.

Checks

Every state rendered at 1440 and 390 px with accessibility checks.

Scale

9

screens, plus a not-found page and an error page.

49

states checked at two widths, 98 renders, each with an accessibility check.

3

brand directions, 2 reworks of the one kept, and 5 schedule layouts, over 8 rounds of review.

21

mocked API endpoints, 4 demo cards and 7 demo scenarios.

35

icons and 7 illustrations drawn for the product.

48 min

from the start of the spec to the approved spec, then 1 h 29 min for the build.

What went wrong and what I changed

The first round of the brand had a worked colour system, a set of icons and an illustration of a climbing wall for every state. The gym and fitness apps I was copying from (Open, Equinox+, Tempo) show people on a wall, and my screens showed drawings of holds. I sent the round back for that reason.

I took the drawings out of every place where a photo can say the same thing. Sessions, coaches, the hall and the confirmation now use photos of climbers in warm light, cropped the way those apps crop them. The illustrations stay only where no photo can show the moment: a failed load, a waitlist place, a belay check you still need, a signed waiver.

Limits and next

  • Payments, Pix, 3-D Secure and the gym's data are mocked in the browser. Nothing is charged or sent, and there are no accounts.
  • The demo runs on one fixed evening, Tuesday 3 November 2026 from 17:20, so the windows and countdowns read the same on every visit.
  • The app is in English only.

Next case study · 04

Noonday

an operations dashboard for solar installers