---
title: La Marie Beauty — Service Page Design System
type: article
created: '2026-04-05'
updated: '2026-04-05'
source_docs:
- raw/2025-10-07-la-marie-beauty-project-call-92448022.md
tags:
- la-marie-beauty
- website
- service-pages
- content-strategy
- design-system
- glossier
layer: 2
client_source: null
industry_context: null
transferable: true
---

# La Marie Beauty — Service Page Design System

A Glossier-inspired layout system for La Marie Beauty's service pages, featuring variant selectors, expandable content sections, and a structured content spreadsheet. Prototyping begins with classic microneedling.

## Overview

La Marie Beauty's existing service pages lack consistency and depth. This design system establishes a repeatable page structure — modeled on Glossier's product pages — that accommodates service variants (e.g., face vs. face + neck, Botox areas), shared core content, and variant-specific details. The system is designed to scale across all services and feed future AI/chatbot integrations.

See also: [[clients/la-marie-beauty/_index]] | [[knowledge/website/lamarie-bookly-square-integration]]

---

## Page Layout Structure

### Top Section (Shared Across Variants)
- **Service name** + subtext / elevator sentence
- **Call to action** (Book Now button)
- **Variant selector** — small labeled boxes (e.g., "Face," "Neck," "Face + Neck + Décolleté") — keep labels to 1–2 words
- **Core service info** — content that does not change regardless of variant (key ingredients, general description)

### Bottom Section (Variant-Specific)
Expandable accordion/plus-sign sections that update based on selected variant:
- Key ingredients
- Before & after images (filtered to the applicable treatment area)
- Clinical studies (where applicable)
- Downtime
- Treatment frequency
- Benefits
- Pairs well with (complementary treatments)
- How to prep
- Post-treatment care
- Potential complications
- Timeline for results

> **Implementation note:** Variants are implemented as separate linked pages that reference each other at the top, not as true dynamic tab switching. The visual goal is seamless; the back-end reality is page-to-page navigation. Ensure transitions feel clean.

### Design Reference
Inspired by the Glossier Stretch Balm Concealer product page — variant selector at top, expandable info sections below, before/after imagery inline.

---

## Content Spreadsheet

Roxana is maintaining a master spreadsheet (shared via Canva/Google) that maps all service content fields. This is the single source of truth for populating service pages.

### Color-Coding System
| Color | Meaning |
|-------|---------|
| **Yellow** | Service has variants |
| **Gray** (proposed) | Field is identical across all variants — use "Same as [core]" notation |
| **Other** (TBD) | Not yet started / empty but required |

### Fields Tracked Per Service
**Core (shared) fields:**
- Service name
- Subtext / elevator sentence
- Key ingredients
- Benefits
- Pairs well with (complementary treatments)

**Variant-specific fields:**
- Before & after images (by area)
- Downtime
- Treatment frequency
- How to prep
- Post-treatment care
- Potential complications
- Timeline for results

**Display / UX fields:**
- Three-word descriptors (shown beneath service name on listing pages, per Glossier pattern)
- Variant label names (must be 1–2 words)

> **Future use:** This spreadsheet is explicitly intended to feed AI integrations and chatbot knowledge bases. Completeness and consistency now reduces rework later.

---

## Prototype Plan

**First service to prototype:** Classic Microneedling
- Chosen for relative simplicity (fewer variants than Botox/Tox)
- Ishak to build the prototype page
- Roxana to highlight which fields are shared vs. variant-specific in the spreadsheet for this service
- Use lorem ipsum for fields not yet populated (e.g., prep/post-treatment info)
- **Target review date:** Next Tuesday

**Why not Tox/Botox first?**
Botox has the most complex variant structure (consult, forehead, 11s, crow's feet, lips, face, neck) and before/after images that differ meaningfully by area. Better to validate the layout pattern on a simpler service first.

---

## Navigation Menu Considerations

The current nav structure feels redundant — subcategories like "Bio-stimulators" appear at the same level as parent categories like "Injectables," while other categories (e.g., Facials under Skincare) are only visible after clicking the parent.

**Proposed direction:**
- Top-level categories: Lifestyle, Skincare, Injectables, Wellness (approx. 4–5 items)
- Hover-activated submenus revealing subcategories (e.g., Injectables → Bio-stimulators, Dermal Fillers, Neuromodulators)
- Shop nav remains single-level (Cleansers, etc.)

This is lower priority than the service page prototype but should be addressed before the new pages go live.

---

## Adding New Service Pages (Process)

Once the classic microneedling template is approved:
1. Duplicate the template page in WordPress/staging
2. Update service name, content fields, and images
3. Assign to the correct category so it appears in navigation and listing pages
4. Link to the appropriate Square booking URL

> A training session for the La Marie team on adding/editing pages is planned once the template is stable.

---

## Related

- [[clients/la-marie-beauty/_index]]
- [[knowledge/website/lamarie-bookly-square-integration]]
- [[knowledge/website/lamarie-product-pages]]