Flows

Booking Flow

Date, time, and resource selection flows for appointments, reservations, and service bookings. Design for minimal friction and clear confirmation.

#booking#reservation#appointment#calendar#scheduling#time slot#availability

What is it?

A booking flow is the sequence of screens and interactions through which a user selects a date, time, and/or resource for a service — a restaurant reservation, hotel room, appointment, event ticket, or meeting slot. The flow must surface availability clearly, handle selection smoothly, and confirm the booking unambiguously.

Why it matters

Booking flows have a specific failure mode: users who encounter friction at any step (unclear availability, multi-step date selection, confusing confirmation) will call instead or go to a competitor. Every redirect to a third-party booking site loses 30%+ of bookings (OpenTable data). The booking moment is the highest-intent moment in hospitality and service UX.

Best Practices

Show availability inline on the date selector — don't make users select a date, then discover it's unavailable.
Calendar UI: highlight available dates, grey out unavailable ones, mark "fully booked" dates distinctly.
Time slots: display as a grid or list, not a dropdown — easier to scan.
Party size selector before date/time — availability depends on party size in many contexts.
Embed the booking widget on the homepage or primary page — every redirect loses users.
Show confirmation inline: "Your booking for Saturday June 14 at 7pm for 2 guests is confirmed."
Email confirmation with add-to-calendar link (Google Calendar, Apple Calendar, Outlook).
Allow rescheduling and cancellation via email link — reduces support load.
For appointment booking, show provider bio and photo — trust matters for personal services.
Integrate with Google Calendar for real-time availability in service businesses.

Common Mistakes

Date selection before availability information — users pick a date, then discover it's fully booked.
Calendar with no visual distinction between available and unavailable dates.
Time slot dropdowns — grid layout is significantly more scannable.
No embedded booking — redirect to a third-party site (loses 30%+ of bookings).
No rescheduling or cancellation from the confirmation email.
No add-to-calendar link in confirmation.
Requiring account creation before allowing booking.

Checklist

Availability shown on calendar before date selection (greyed out unavailable)

Time slots displayed as grid, not dropdown

Party size / service type selected before date (affects availability)

Booking widget embedded on homepage (no redirect)

Confirmation shown inline immediately after booking

Email confirmation includes add-to-calendar link

Reschedule/cancel available from confirmation email

Guest booking available (no account required)

Booking confirmation includes all relevant details (who, what, when, where, cost)

Research & Theory

OpenTable Data on Direct Booking

OpenTable data shows that every redirect step between intent and booking completion reduces conversion by 25–35%. Embedded booking widgets dramatically outperform click-to-third-party flows.

Why it's relevant

Embed the booking experience. Never redirect users to a separate booking site if you can avoid it.

Real-World Examples

Calendly

Timezone-aware, self-serve appointment booking. Availability calendar is clear and visual. Confirmation screen with add-to-calendar. Rescheduling from email. The benchmark for appointment booking.

OpenTable

Party size → date → time. Availability shown before date selection. Instant confirmation. Pre-filled with returning user details. Calendar integration.

Airbnb

Interactive calendar with price variation by date. Real-time availability. Confirmation within the product. Pre-filled user details. Instant Book vs. Request to Book clearly distinguished.