Classes · static mockups
High-fidelity, clickable mockups of the class-booking product for dance teachers and schools: the pitch page, the student web app and the organizer dashboard. Built from the festivals design system (Sage palette, Atkinson Hyperlegible Next, @festivals/ui tokens), light and dark, phone and desktop. Demo data is fiction: teacher Lena Bachata, Berlin, November 2026.
Prototype paths
- Student books with a friend: organizer page → Bachata Improvers → Book → details → check and pay → Mollie (simulated) → You’re booked → Show my QR.
- Student manages: My classes → booking → Cancel; pass → Request a refund; past class → Rate.
- Teacher at the door: Check-in → Scan → pick a result in the demo tabs → Check in → Undo.
- Teacher sets up: Setup checklist → Go live (missing step, then live with link and QR) → Schedule → class date → Edit or Cancel.
Pitch
Student web app (class-student-web)
D1Organizer pageWeek schedule at changing venues, passes, reviews, legal noticeCLS-100CLS-305D2Class pageDate, venue, two-click map, roles, cancellation rule, reviewsCLS-101CLS-304D3Book: how to paySingle class, buy a pass and use it, use my pass, bring a friend, rolesCLS-102CLS-120CLS-081D9Use my passSigned in by code; pass picker with classes leftCLS-110CLS-111D4Book: your detailsName, email, friend’s first name; no passwordCLS-102D5Book: check and payItems, total, contract line, cancellation rule, termsCLS-103CLS-104—Mollie checkout (stand-in)External page, simplified, to keep the prototype clickableD9Booked with a passConfirmation after booking with a passCLS-110D6You’re bookedConfirmation with QR and next stepsCLS-104CLS-260D6Payment didn’t go throughSpot released, try againCLS-105D7Buy a passPass choice and details in one stepCLS-109D7Pass: check and payValidity and withdrawal informationCLS-103CLS-109D7Pass readyPass purchase confirmationCLS-109D8Sign in to My classesEmail only; link and 6-digit codeCLS-150D8Check your email6-digit code entryCLS-150CLS-151D10My classesGrouped by organizer: upcoming, passes, past classes, QRCLS-153CLS-155D11QR full screenBlack on white in both themes, brightness hintCLS-154D12Booking and cancel (single class)Not refunded warning, cancel the friend onlyCLS-166CLS-124D12Booking and cancel (pass, moved class)Class back on the pass; free cancel after an organizer changeCLS-160CLS-241D13Pass detailClasses left, history, refund not eligibleCLS-171D13Pass refund requestUnused pass within 14 daysCLS-170D14Rate and reviewStars, text, rules, how we verifyCLS-300CLS-303CLS-306CLS-313D15Report a reviewReasons, explanation, optional emailCLS-309D*Student states21 errors, empty and edge statesCLS-010CLS-011CLS-082CLS-106…
Organizer dashboard (class-organizer-web)
O1Sign inInvite-only loginCLS-001O1First passwordReplace the invitation passwordCLS-001O2Setup checklist and go liveMissing steps explained; live link, copy, QRCLS-001CLS-008CLS-009O6OverviewTonight, needs attention, next classes, salesCLS-193O7ScheduleWeek list with venues and marks; class seriesCLS-050O8Class series formWeekday, venue, capacity, price with net estimate, rolesCLS-040CLS-045CLS-075CLS-080O9Class date and bookingsBooking list, edit this date, cancel with messageCLS-044CLS-046CLS-047CLS-190O14Check-inClass picker, Scan, list with searchCLS-200CLS-208O15Scanner and results10 results incl. pass without booking, class full, undoCLS-201CLS-210O13DancersSearch, passes, refund marksCLS-191O13Dancer detailClasses used, bookings, Mollie paymentsCLS-192O11PassesPass types, pause sales, form with net estimateCLS-070CLS-073CLS-075O16ReviewsReply, edit or delete reply, reportCLS-307CLS-309O3Your pageTeacher or school, slug, logo, contact linksCLS-002CLS-003O10VenuesPlaces search, delete refused when in useCLS-030CLS-031O12PoliciesCancellation window, booking horizon, free spotsCLS-012O4Business detailsEntity picker, legal notice previewCLS-004O5Payment accountMollie connected, fee in effect, refundsCLS-005CLS-095O*Organizer states12 errors, empty and edge statesCLS-003CLS-043CLS-046…