U Derma Med Spa & Laser - Case study

Overview

U Derma Medspa and Laser is a medical spa in Palm Harbor, Florida, offering injectables, lasers, body contouring, facials, medical weight loss and wellness treatments. Its website started as a WordPress build with Elementor Pro, and that design and those pages are still part of the live site.

The live site today combines a mirrored copy of the original Elementor pages with a large set of new pages generated with Astro, all served through Cloudflare. The new layer adds treatment guides, side-by-side treatment comparisons, pricing guides, packages, a glossary, pages by skin concern, location pages for more than 50 Florida cities, a treatment finder quiz and a library of 360 treatment and results videos.

The rebuild is aimed at both search engines and AI answer engines: schema.org markup on the generated pages, an llms.txt guide to the clinic, a robots.txt that explicitly welcomes AI crawlers, a video sitemap and an XML sitemap of more than 300 URLs. Booking stays one click away through a sticky appointment button and a consultation page.

What was built

A mirrored copy of the original Elementor pages with content-hashed asset files, served side by side with the new generated pages.

Treatment guides with FAQPage and MedicalProcedure markup, plus treatment comparisons, pricing guides, packages, a treatment glossary and prepare and aftercare pages.

Location pages for 52 Florida cities and 43 city-specific treatment pages, such as Botox or laser hair removal in a given city.

A video library of 360 treatment and results videos grouped by treatment, with VideoObject markup and links to the original Instagram posts and the clinic's YouTube channel.

Insight articles paired with self-hosted videos from the clinic's Instagram.

A treatment finder quiz and GA4 event tracking for phone clicks, booking clicks, form submissions and quiz use.

An llms.txt guide, an AI-crawler-friendly robots.txt, an XML sitemap and a video sitemap.

A fix for the mobile menu on the mirrored pages: a small script drives the theme's own CSS contract after automated Chromium and WebKit checks found the menu unresponsive.

Stack

Frontend

Astro: Generates the guide, comparison, location, video library, insight and quiz pages as static HTML
Schema.org JSON-LD: MedicalBusiness, MedicalProcedure, FAQPage, VideoObject and breadcrumb markup on generated pages
Vanilla JavaScript: Progressive-enhancement scripts for the mobile menu, homepage service cards and analytics events

AI

llms.txt: Plain-text map of treatments, guides and videos that helps LLMs and answer engines cite the clinic

Infrastructure & DevOps

Cloudflare: Serves the live site: mirrored pages, generated pages, media and sitemaps

Integrations & Payments

Google Analytics 4: Custom events for phone clicks, booking clicks, form submissions and the quiz
Instagram and YouTube: Source posts and outbound links for the treatment video library

CMS & Commerce

WordPress: Original content management system behind the clinic's first site
Elementor: Elementor Pro page layouts, navigation and toggles on the original pages, kept in the mirror

Tooling & QA

Cross-browser checks: Automated Chromium and WebKit checks that caught the broken mobile menu on mirrored pages

Engineering highlights

Mobile navigation on the mirrored pages was broken by a script-order error in the theme; rather than patching the theme, a small script toggles the one CSS class the theme already uses, verified in Chromium and WebKit.

Progressive enhancement by design: the homepage service cards collapse only after the script marks them collapsible, so if the script fails to load the full list stays visible.

Answer-engine readiness lives in the files crawlers read first: llms.txt, a robots.txt that names the major AI crawlers and allows them, and a dedicated video sitemap.