LaMarie Beauty — Square Booking UX & Mobile Issues
Overview
During the October 2025 integration progress call, the La Marie Beauty team surfaced a live UX problem: clients were struggling to book appointments through the website, particularly on mobile. The Bookly widget was not loading reliably on phones, and the service list required excessive scrolling — with high-value injectable services falling at the bottom due to alphabetical ordering. The team agreed on a temporary redirect to the full Square booking page as a stopgap while the deeper Bookly integration is completed.
See the parent project context at [1].
The Problem
Mobile Loading Failure
The Bookly widget embedded on the website does not load completely on mobile devices without significant user effort:
- The widget appears to end before all services are rendered
- Users must hover or wait for an extended period before the full list appears
- Many users assume they have reached the bottom of the page and abandon the flow
"People on their mobile don't realize they have to scroll all the way to the bottom and it doesn't load properly. So on phone, it looks like it's the end and it kind of — you have to hover for a while before it fully loads."
— Roxana Lopez, La Marie Beauty
Service Visibility Gap
Because services are listed alphabetically, injectable services — among the most commonly booked — appear at the bottom of the list. Combined with the loading issue, this means the most in-demand services are effectively hidden from mobile users.
Website vs. Square Completeness
The website's service listing is also incomplete relative to what Square exposes directly. Not all services have been added to the website yet, meaning clients who navigate to the Square booking page directly have access to a broader, more accurate catalog.
Temporary Stopgap: Redirect "Book Now" to Square
The team agreed to redirect the "Book Now" button — including on the homepage — to the full Square booking page rather than the in-site Bookly widget. This provides:
- Immediate relief for clients struggling with the mobile experience
- Access to the complete service catalog (not just what's been added to the website)
- A stable booking path while the Bookly integration and new product page layouts are finalized
This is explicitly a temporary measure. The long-term goal remains a fully integrated Bookly widget that filters by service and handles variations through new product page layouts.
Root Causes
| Issue | Root Cause |
|---|---|
| Mobile widget not loading fully | Bookly widget render behavior on mobile; likely lazy-load or scroll-trigger issue |
| Injectable services hard to find | Alphabetical ordering puts them at the bottom of a long list |
| Incomplete service catalog on site | Not all services have been migrated from Square to the website yet |
| Variations not bookable via Bookly | Bookly cannot handle WooCommerce product variations natively; requires individual service pages or a custom selector |
Relationship to Broader Integration Blockers
The UX issue is downstream of two larger blockers being worked in parallel:
- Zapier–Square appointment creation — still failing; Chris needs Square team member access to simulate a real environment and debug. See [2].
- Product page layouts for variations — new page layouts with tabbed variation selectors are required before Bookly can be launched properly. Melissa is coordinating with the dev team; timeline TBD.
Until both are resolved, the Square redirect keeps the booking funnel functional.
Action Items from This Call
| Action | Owner | Status |
|---|---|---|
| Redirect "Book Now" button to full Square booking page | Asymmetric team | Agreed, pending implementation |
| Consult dev team on new product page layouts (tabs for variations) | Melissa Cusumano | In progress — update expected by following week |
| Add service IDs and variation IDs to shared spreadsheet | Katie Schueller | Pending |
| Add Chris as Square team member | Katie Schueller | Committed during call |
Generalizable Insight
When a new booking widget degrades the mobile experience compared to the prior flow, a temporary redirect to the legacy system preserves revenue while the integration is completed properly. Rushing a broken widget to production risks training clients to distrust the booking flow entirely.
This pattern applies to any booking or e-commerce integration where the in-progress solution is not yet stable: keep the working path alive, communicate the temporary nature internally, and set a clear trigger for cutover (in this case: new page layouts complete + Zapier sync verified).
Related
- [3]
- [2]
- [4]