NOEMA
A full product for an aesthetic-medicine clinic — brand, catalogue, commerce, booking, account.
- Type
- Multi-surface web product, 21 routes
- Role
- Product design, design system, frontend
- Year
- 2026
A clinic where doctors are paid a flat rate per consultation rather than a percentage of what they prescribe. That single fact drives the whole product: a contraindications section used as an argument for trust, published reviews that are not all five stars, and a refusal to run laser treatments in summer.
Aesthetic-medicine sites sell procedures. A patient who does not yet know what they need has nowhere to start, and no reason to believe the recommendation.
Three entry paths for three patient states — first-time, informed, returning — that all converge on booking. Imagery runs on a material system rather than stock: every visual is a deterministic gradient composition with grain, keyed to its subject, so the catalogue stays visually coherent as it grows.
- React 19
- TypeScript
- Vite
- Tailwind 4
- framer-motion
- zustand
- react-router
- 21 routes across brand, services, commerce, booking and account
- Living design-system page at /system with every component state
- Working cart, favourites, promo codes, gift cards and loyalty points
- Booking calendar with slots generated deterministically per specialist and date
- Global search on ⌘K
- Dark tone switched by a single data attribute — components never know the theme
An art direction that survives its own photography
Every image is a deterministic composition of gradients and grain in a palette assigned to its subject — skin macro, interior, equipment, botanicals; products are illustrated vessels. The layout is built so a real photograph drops into the same slot without touching a line of markup.
A calendar that behaves like a real one
Slots are generated deterministically from the date and the specialist, so the calendar shows the same availability across reloads instead of reshuffling on every mount.
Accessibility on custom controls
Focus trapping and focus return in modals and drawers, keyboard navigation through tabs, calendar and the before/after comparison, role="slider" on the custom range control, and scroll locking that compensates for the scrollbar width.