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.
The layout is modeled on Glossier's product detail pages (specifically the Stretch Balm Concealer as a reference). Key structural elements:
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.
| 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.
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 |
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.
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.
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.
Roxana noted that the structured content spreadsheet has value well beyond the website build: