La Marie Beauty — Service Page Variants & Content Strategy
Overview
During the October 7 working session, the La Marie Beauty and Asymmetric teams aligned on a new service page architecture inspired by Glossier's product pages. The design introduces service variants (e.g., treatment area or intensity options) as selectable tabs or linked pages, with expandable content sections below that change based on the selected variant. Classic microneedling was chosen as the first prototype, targeting a review-ready build by the following Tuesday.
This article captures the variant structure, content section schema, and the color-coded spreadsheet system developed to manage core vs. variant-specific content.
Design Reference
The layout is modeled on Glossier's product detail pages (specifically the Stretch Balm Concealer as a reference). Key structural elements:
- Variant selector — small labeled boxes at the top of the page (e.g., "Face," "Neck," "Crow's Feet"). Names should be kept to one or two words to fit cleanly.
- Shared upper block — service name, subtext/elevator sentence, call-to-action, and any information common to all variants.
- Expandable lower sections (accordions) — content that may be shared or variant-specific, revealed via "+" toggles. Sections include:
- Key ingredients / active compounds
- Clinical studies
- Before & after photos (filtered to the selected area)
- Downtime
- Treatment frequency
- Benefits
- Complementary / pairs-well-with treatments
- (Planned) How to prep, post-treatment care, potential complications, timeline for results
Variants that require a meaningfully different "Book Now" destination (e.g., different Bookly service IDs) will be implemented as separate pages linked to each other at the top, rather than true in-page tab switching — a constraint of the current Bookly/WooCommerce setup.
Note: Add-ons (e.g., Luxe Enhancement for ABB Facials) are treated differently from variants — they layer onto a base service rather than replacing it, and are simpler to implement.
Variant Examples by Service
| Service | Variants |
|---|---|
| Botox / Neuromodulators | Consult, Forehead, 11s, Crow's Feet, Lips, Face & Neck |
| Dermal Fillers | Face, Neck, Face & Neck, Face & Neck & Décolleté |
| Classic Microneedling | (prototype — variants TBD) |
| Tooth Gems | 1–2 gems, 3+ gems |
| Brow Lamination | With tint, Without tint |
| ABB Facials | Base service + optional Luxe Enhancement add-on |
Services without variants still use the same page template; the variant selector simply does not appear.
Content Spreadsheet Schema
Roxana is maintaining a master spreadsheet (shared via Canva/Google Sheets) that maps all service content. The spreadsheet uses a color-coding system to distinguish content types:
| Color | Meaning |
|---|---|
| Yellow | Service has variants |
| Gray / "Core Service" | Field value is identical across all variants — populate once, reference with "Same as [core]" in variant columns |
| Blank / not-started color | Field is required but not yet populated |
Current Spreadsheet Fields
- Service name
- Subtext / elevator sentence
- Call to action
- Three-word descriptors (for display under service name, similar to product tag words)
- Key ingredients / active compounds
- Downtime
- Treatment frequency / how often to book
- Benefits
- Pairs well with (complementary treatments)
- Before & after image references
Planned Additional Fields (awaiting Lisa's input)
- How to prep for treatment
- Post-treatment care
- Potential complications
- Timeline for results
Decision: All fields should be finalized before populating the spreadsheet at scale, to avoid rework. Ishak can use lorem ipsum placeholders for layout development in the interim.
Prototype Plan
- Service chosen: Classic Microneedling
- Owner: Ishak (Asymmetric dev)
- Input: Canva wireframe from Nikki + color-coded spreadsheet from Roxana
- Target: Working prototype ready for La Marie review by next Tuesday
- Melissa's role: Brief Ishak on the Canva, answer questions, coordinate feedback loop
Once the microneedling prototype is approved, the same template will be duplicated for all other services. La Marie team members (Roxana, Katie) can duplicate pages and update content fields themselves after a training session — the main complexity is ensuring correct category assignment so pages surface in the right navigation buckets.
Navigation Considerations
The current nav structure surfaces some redundancy (e.g., "Biostimulators" visible alongside "Injectables" at the same level). The desired structure uses four or five top-level categories (Lifestyle, Skincare, Injectables, Wellness, Shop) with hover-activated submenus revealing subcategories (e.g., Injectables → Biostimulators, Dermal Fillers, Neuromodulators).
Several service pages do not yet exist (no photos at time of build), so those services are absent from the nav and all-services listing entirely. Roxana has been directing clients to book directly via Square in the interim.
Navigation refinement is lower priority than the service page prototype but should be addressed once the new layout is validated.
Future Potential
Roxana noted that the structured content spreadsheet has value well beyond the website build:
- Front desk reference — a single source of truth for staff answering client questions
- AI / chatbot integration — structured fields map cleanly to knowledge base formats
- Filtering — once variant data exists per service, implementing browse/filter UI becomes significantly easier (the data is already segmented)
Related
- [1]
- [2]
- [3]