---
title: LaMarie Booking Widget UI/UX Refinements
type: article
created: '2026-04-05'
updated: '2026-04-05'
source_docs:
- raw/2025-11-06-lmb-touch-base-99674004.md
tags:
- lamarie
- bookly
- ui-ux
- wordpress
- booking-widget
layer: 2
client_source: null
industry_context: null
transferable: true
---

# 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.

See also: [[wiki/clients/lamarie/_index]] | [[wiki/knowledge/wordpress/lamarie-checkout-split-payments]]

---

## 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.

---

## Related

- [[wiki/knowledge/wordpress/lamarie-checkout-split-payments]] — Split payment logic via `functions.php`
- [[wiki/knowledge/wordpress/bookly-square-api-bridge]] — Custom Square API integration for appointment sync
- [[wiki/clients/lamarie/_index]]