wiki/knowledge/woocommerce/bookly-ui-customization-lamarie.md · 484 words · 2025-11-11

La Marie Beauty — Bookly UI/UX Customization

Overview

During the November 2025 project sync, the team reviewed the current state of the Bookly scheduling UI on the La Marie Beauty staging site and identified several visual inconsistencies that needed to be resolved to align with the brand guide. Ishak had already made one significant fix; remaining polish tasks were assigned to Chris.

This article captures the specific UI decisions made and the rationale behind them, as a reference for similar Bookly implementations.


Changes Made / In Progress

1. Service Tile Backgrounds — Fixed to Solid Black

Problem: Service tiles in the Bookly booking flow were pulling in staff photos as background images, resulting in inconsistent and unintended visuals (e.g., a staff member's face appearing behind a service tile).

Fix: Ishak disabled the staff photo pull and set all service tile backgrounds to a consistent solid black.

Outcome: The booking UI now presents a uniform, on-brand appearance regardless of which staff member is associated with a service.

"He made them all black... instead of some of them showing a person behind here. So that's gone now, which is good."
— Melissa Cusumano


2. Staff Last Names — Removal for Cleaner Display

Problem: Staff names were displaying with full last names inside the Bookly UI, which felt inconsistent with the brand's aesthetic and created visual clutter, particularly on mobile.

Fix: Chris will update the Bookly settings to remove last names, displaying only first names.

Owner: Chris Østergaard
Location: Bookly admin settings (no custom code required)


3. Staff Filtering per Service

Goal: Ensure that only the staff members who are actually available for a given service are shown in the booking flow — not all staff across all services.

Status: In progress / to be verified by Chris during the Bookly settings review.

Context: On mobile, users see a condensed view and need to be able to quickly select an available provider without being shown irrelevant staff options.


Design Alignment Notes


Action Items

Owner Task
Chris Remove staff last names from Bookly UI via settings
Chris Verify staff filtering is scoped correctly per service
Chris Review mobile rendering of Bookly UI (font size, tile layout)

Sources

  1. Index
  2. Bookly Square Architecture Lamarie
  3. Payment Tokenization Woocommerce Square