Gym Class Booking UI: The Schedule, Done Right

A gym or studio class-booking app is a schedule with a booking button, and members use it in seconds between other things. The short answer: build it from a free VP0 design with a horizontal date picker, a clear day view of classes (time, instructor, spots left), and a fast book, waitlist, and cancel flow, with honest capacity and easy cancellation. Get the schedule and the one-tap booking right and the rest follows. Fitness is a big market, the health-club industry is worth more than $96 billion globally, and a smooth booking app is now table stakes.

The schedule is the app

Members think in days and times, so the schedule is the heart. A horizontal date strip lets them swipe across the week and tap a day. The day view lists classes with the essentials: time, class name, instructor, and, critically, spots remaining, an honest, live count, not a guess. Booking should be a single confident tap, with a clear confirmation. When a class is full, a waitlist with a clear position and an automatic promote-when-a-spot-opens is what members expect. And cancelling must be easy and clear about any cancellation window. Apple’s Human Interface Guidelines on lists and pickers keep it native.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick calendar, list, and booking designs, copy their links, and have Cursor or Claude Code rebuild them in SwiftUI or React Native. Build the date strip and day view so a member can find and book a class in seconds, show live spots-remaining and a clear waitlist with position, and make booking, joining the waitlist, and cancelling obvious. Send reminders before class and handle the cancellation window transparently. If you charge (per class or membership), route it through a certified payment provider, never raw cards. For a one-to-one scheduling cousin, see tutor booking app UI Figma, and to map the flow first, see free user flow examples.

Class booking building blocks

Each part speeds the booking or sets expectations.

Part	Job	Get it right
Date strip	Pick a day	Swipe the week, tap a day
Class list	See the day	Time, instructor, spots left
Spots remaining	Honest capacity	Live count, never a guess
Book or waitlist	Reserve a spot	One tap, clear waitlist position
Cancel	Free up the spot	Easy, clear cancellation window

Common mistakes

The first mistake is a confusing schedule that hides the day or the times. The second is fake or stale capacity, showing spots that are gone. The third is a clumsy waitlist with no clear position or auto-promotion. The fourth is hard-to-find or punitive cancellation, which frustrates members and holds spots hostage. The fifth is building your own payments instead of using a certified provider. The schedule and a frictionless booking are the whole experience.

A worked example

Say you build a studio app. Your VP0-built date strip lets a member swipe to Thursday; the day view shows a 6pm class with the instructor and “3 spots left” (live). One tap books it with a confirmation, or, if full, joins a waitlist showing “you are 2nd” with auto-promotion when a spot opens. A reminder arrives before class, and cancelling is one tap with the cancellation window clearly stated. Payment, if any, runs through a certified provider. For a self-hosted chat cousin, see Mattermost chat app UI clone mobile, and for a focus-first minimalist app next, see black and white dumbphone launcher UI clone.

Key takeaways

• A class-booking app is a schedule with a one-tap booking; make both excellent.
• Build the date strip, day view, and booking flow from a free VP0 design.
• Show live, honest spots-remaining and a clear waitlist with position and auto-promotion.
• Make cancelling easy and the cancellation window transparent.
• Route any payment through a certified provider, never raw cards.

Frequently asked questions

How do I build a gym class booking app UI? Build a horizontal date strip, a day view with class times, instructors, and live spots-remaining, and a one-tap book, waitlist, and cancel flow from a free VP0 design.

How should waitlists work? Show the member’s position clearly and automatically promote them when a spot opens, with a notification, so a full class still gives them a real, transparent chance to get in.

Why show live spots-remaining? Because members decide based on availability. A live, honest count prevents the frustration of booking a class that is actually full, and builds trust in the schedule.

How do I handle class payments? Route per-class or membership payments through a certified payment provider so you never handle raw card data, and make any cancellation window and fees clear up front.