LaMarie Service Variant Page Design Patterns

Design decisions and rationale for the LaMarie Beauty service variant page, established during the October 30, 2025 design review. These patterns address pricing presentation, content display structure, and mobile UX tradeoffs.

Related client: ^[1]
Source meeting: ^[2]

Pricing Section

Rename: "Estimated Investment"

The pricing section label was changed from "Price Range" to "Estimated Investment" to frame cost positively and reduce sticker shock. The rationale: LaMarie's service prices are on the higher end, and leading with a dollar figure risks losing users before they understand the value.

• Display the service-specific range (e.g., $600–$750) inside the accordion
• Packages/memberships accordion: build but hide until content exists
• Financing accordion: label as "Financing Options" and link directly to Cherry (currently the only financing partner)

Hide Pricing in Accordion

Pricing is intentionally placed behind a + accordion rather than displayed inline. The decision: users who care about price will seek it out; users who don't shouldn't be front-loaded with a number that might cause them to bounce before reading the value proposition.

"Someone would have to go looking for it, and I think we're okay with having someone go look for it." — Roxana Lopez

Content Display: Accordions vs. Open Sections

The Debate

A recurring tension on this project: Lisa (owner) wants key content sections — Ideal Candidate, Treatment Benefits, Patient Outcome Comments — displayed as permanently open sections, modeled on Glossier's product pages. The design team argues for accordions.

Lisa's position: Open sections surface emotional content immediately, helping users self-identify as candidates without having to click.

Team's position: Permanently open sections create excessive scroll depth, particularly on mobile, and the Glossier comparison is product-to-service — a category mismatch.

Arguments for Accordions

• Mobile real estate: Collapsed sections preserve screen space; mobile is the primary browsing context
• Attention span: Average user spends ~7 seconds on a webpage; headers guide scanning, clicks signal intent
• Scroll fatigue: Multiple open sections stack into a long page that users abandon before reaching the booking CTA
• Design consistency: Multiple default-open sections is not a standard web pattern; it creates visual noise

Resolution: Defer to Heat Map Data

Rather than resolving this by opinion, the team agreed to use existing analytics to inform the final decision. Melissa to confirm that Google Analytics and Microsoft Clarity (heat maps) are active on the site.

"I'd be curious what the heat maps say and the actual user behavior says... if Lisa wants it but it hurts customer traffic, she's building a business that is because of the customer." — Kim Gehrmann

Status: Unresolved pending data review. Implement accordion pattern as default; revisit after heat map analysis.

Lifestyle Section

• Replace video with user-generated client photos (9×16 format — selfie-style, post-treatment)
• Replace star ratings with patient outcome comments (short, qualitative testimonials)
• Content owner: Roxana — to be provided before rollout (estimated 24–48 hours to collect per service)

Visual Consistency Notes

Two issues flagged during review:

1. Accordion icon inconsistency: + icons appear in two different styles/alignments across the page (left-aligned under pricing vs. right-aligned in lower sections). All accordion icons should be unified.
2. Font sizing: Headings on the lower half of the page appear larger than the upper half. Reference: the Cleansing Complex product page is considered the visual benchmark — match its heading sizes and spacing throughout.

Scope Note

The service variant page was not part of the original Bookly project scope. It was added as a request mid-project and has grown in complexity. A follow-up conversation between Kim, Lisa, and Asymmetric is needed to clarify project boundaries and budget before further design work is scoped.

See: ^[3]

Open Action Items