Bookly Custom Booking Flow — Cart-Before-Dates Pattern

Overview

A recurring client expectation in service-based booking sites is a cart-before-dates flow: users browse and add multiple services to a cart before being prompted to select dates, times, or staff. This mirrors the dopamine-driven shopping experience of product e-commerce sites like Glossier.

Bookly's default UX does not support this pattern. Out of the box, clicking "Book Now" on any service immediately triggers a modal that forces date/time selection before the user can continue browsing. This is a known source of scope misalignment when clients reference product e-commerce as their UX inspiration.

The Pattern: Cart-Before-Dates

How It Works (Desired Flow)

1. User browses the /services page and sees service tiles.
2. User clicks "Add to Booking" (or equivalent CTA) on a service.
3. A side drawer opens and the service is added — no date/time prompt yet.
4. User continues browsing, adding more services. The cart accumulates.
5. Crucially, the running total may be hidden or deferred, allowing users to build a large cart without anchoring on price.
6. When the user is ready, they click Checkout, and only then are prompted to select dates, times, and staff for each service.
7. Payment and contact info are collected at the end of the checkout flow.

Why Clients Want This

• Dopamine loop: Rapid add-to-cart interactions trigger reward responses before the friction of scheduling.
• Price anchoring avoidance: Hiding the running total until checkout reduces cart abandonment from sticker shock.
• Multi-service upsell: Users are more likely to book multiple services when they aren't interrupted mid-browse.

This pattern has measurable business value for service businesses with high-margin multi-service bookings (e.g., med spas, nail salons, beauty studios).

A real-world example of this pattern applied to services (not just products) exists at nail/beauty salon booking sites using platforms like Fresha.

Bookly's Default Behavior (The Conflict)

Bookly's standard booking widget launches a modal immediately on "Book Now" that walks the user through:

1. Date selection
2. Time selection
3. Staff selection
4. Contact info
5. Payment

This is a per-service, sequential modal flow — the opposite of the cart-before-dates pattern. There is no native "add to cart" step that defers scheduling.

What Bookly Does Support

• A side drawer/cart UI can be present on the page (Bookly does have cart/multi-service booking in some configurations).
• The Bookly Cart add-on allows multiple services to be booked in one session, but the date/time selection still occurs per-service before items are "added."
• Tile/card styling of service listings is customizable via CSS and template overrides.

What Requires Custom Development

• Deferring date/time selection until after all services are in the cart.
• Hiding the price total until checkout.
• Replacing the modal trigger with a side-drawer "add" interaction that does not immediately prompt for scheduling.

Open question (as of 2025-12-02): Whether Bookly's architecture allows the date-selection step to be moved to the end of the flow, or whether this requires replacing Bookly's booking logic entirely with custom code. This requires investigation of Bookly's hooks, filters, and JavaScript event model.

Design Ambiguity Risk

This misalignment commonly originates from mobile-only wireframes that don't explicitly show the booking interaction sequence. A side drawer in a Miro mockup can be interpreted as either:

• (A) A scheduling modal that opens inline, or
• (B) A persistent cart drawer that accumulates services before checkout.

Mitigation: When reviewing booking flow designs, explicitly confirm with the client:

• "When a user clicks Book Now, what happens next — do they select a date immediately, or does the service go into a cart first?"
• Ensure desktop wireframes exist alongside mobile, as interaction patterns often differ.
• Reference a live example (e.g., Fresha, Glossier) to align on the mental model before any development begins.

Platform Fit Considerations

If Bookly's hooks do not support deferring date selection, the platform may be the wrong tool for clients requiring this UX pattern. A custom WooCommerce-based booking flow or a platform like Fresha/Acuity with API access may be more appropriate.

Related Client Context

This pattern was surfaced during the ^[1] Bookly integration. Lisa Frommelt (client) expected a Glossier-style cart experience based on Miro designs that were mobile-only and did not explicitly show the booking interaction sequence. The Bookly implementation delivered a standard modal flow, creating a significant scope misalignment.

See: ^[2] for full context.

Action Items (as of 2025-12-02)

• [ ] Kimberly Gehrmann — Research Bookly documentation and hooks to determine if cart-before-dates flow is achievable without replacing the platform.
• [ ] Kimberly Gehrmann — Schedule 1-on-1 with Melissa Cusumano to align on scope boundaries before next client-facing meeting.
• [ ] Melissa Cusumano — Send Kimberly the initial Loom walkthrough video from project kickoff for context on original scope decisions.