LaMarie Booking Widget UI/UX Refinements

A set of UI/UX improvements identified for the LaMarie Bookly booking widget during a team review of the staging site. These changes address usability issues with service navigation, staff selection, and visual consistency.

Context

During a live walkthrough of the Bookly widget on the LaMarie staging site, the team identified several friction points in the booking flow. Isahaque had implemented a category widget and a staff widget as candidate components. The review surfaced specific requirements around how services are presented and how staff are filtered.

Required Changes

1. "All Services" Link — Show Tile Grid, Not Single Page

Problem: The "All Services" link currently navigates directly to a single booking page, bypassing the service tile grid.

Requirement: Clicking "All Services" must display the full service tile grid so users can browse and select a service visually, consistent with the intended UX flow.

Note: The team also observed that loading all services in a list view caused slow load times on staging. Reverting to the tile grid is expected to improve performance as well.

2. Staff Filter — Show Only Relevant Staff

Problem: The staff selection widget displays all staff members regardless of which service has been selected. This is confusing — a user booking a "Vampire Facial," for example, should only see staff qualified to perform that service.

Requirement: The staff filter must be scoped to the selected service, showing only the staff members available for that specific booking.

Implementation note: Bookly may expose a filtered option for this; Isahaque to confirm and implement.

3. Staff Tile Styling — Consistency and Clean Appearance

Problem: Staff tiles have inconsistent name alignment (some left-aligned, some right-aligned) and display background images that create a cluttered appearance.

Requirements:
- Center staff names consistently across all tiles
- Remove background images from staff tiles; use a solid color (black preferred) for a cleaner look

Assignment

All booking widget UI/UX work is assigned to Isahaque Mahmud as part of the broader LaMarie front-end refinement pass.

^[2] — Split payment logic via functions.php
^[3] — Custom Square API integration for appointment sync
^[1]