Kunde
WunderDerm · Augsburg, Deutschland
Branche
Beauty & Wellness · lokale Dienstleistungen
Leistungsumfang
Markenrefresh → UX/UI → Next.js + Sanity → SEO-Migration
Eine bekannte Marke brauchte ein neues digitales Kapitel
WunderDerm verfügte bereits über einen funktionierenden Auftritt, lokale Bekanntheit und eine wiedererkennbare Identität. Der Relaunch sollte diese Substanz nicht ersetzen, sondern die frühere Beauty-Labor-Anmutung in die klarere Positionierung „Laser + Hautkonzepte“ überführen.
Gleichzeitig war die WordPress-Struktur über Jahre seitenweise gewachsen. Leistungen, Körperzonen, Preise, Technologieerklärungen und Buchungswege brauchten eine gemeinsame Informationsarchitektur, die ausdrucksstark bleibt und praktische Antworten schnell zugänglich macht.
Eigenständiger Markencharakter statt austauschbarer Beauty-Vorlage
Die expressive Wortmarke blieb erhalten, während Hierarchie, Farbwelt und Typografie neu geordnet wurden. Tiefblau schafft Ruhe und Vertrauen; Braun, Pink und Off-White bilden ein flexibles System für Navigation, Servicekarten und Conversion-Module.
- Überarbeitete Logo-Lockups mit „Laser + Hautkonzepte“
- Wiederverwendbare Typografie-, Farb-, Spacing- und Komponentenregeln
- Warme, selbstbewusste und bewegte Bildsprache
- Desktop und Mobile von Beginn an gemeinsam gestaltet
Komplexe Leistungen als verständliche Produktwege
Besucherinnen und Besucher kommen mit einer Körperzone, einem Budget oder einer Technologiefrage. Daraus entstanden verknüpfte Oberflächen: Zonenübersichten, strukturierte Karten, Paket- und Preismodule, kontextuelle Erklärungen und klare Übergänge zur Buchung.
Interaktiver Zonen-Explorer
Eine responsive Körperkarte wechselt zwischen Frauen- und Männeransicht, ordnet Regionen und zeigt passende Zonen, ohne eine lange Preisliste durchsuchen zu müssen. Dasselbe Informationsmodell trägt fokussierte Landingpages und mobile Karten.
WunderQuiz als geführte Orientierung
Der kurze WunderQuiz übersetzt technische Unterschiede in einen verständlichen Auswahlweg. Er ordnet Präferenzen und führt zu relevanten Informationen und Preisen — ohne Diagnose oder professionelle Beratung zu ersetzen.
Eine zweite Servicewelt im selben Designsystem
Während Laser-Haarentfernung stark strukturierte Zonen- und Preislogik benötigt, funktioniert die Microneedling-Seite redaktioneller: Produktbilder, eine ruhige Erklärung, Ablauf, Vorbereitung und Nachsorge. Typografie, Navigation, Spacing und Conversion-Komponenten bleiben dennoch konsistent.
Vom vollständigen Figma-Layout zu ausgearbeiteten Seitenmodulen
Desktop und Mobile wurden parallel komponiert. Die ausgewählten Screens zeigen den Weg vom angebotsorientierten Hero über Erklärung und Prozess bis zur fotografischen Story — als eigene Tonalität innerhalb derselben Marke.
Vom Designsystem zur wartbaren Plattform
Der neue Auftritt wurde als Next.js-Anwendung statt als weiteres Page-Builder-Theme umgesetzt. Der App Router, React und TypeScript bilden die Frontend-Basis; Sanity stellt strukturierte redaktionelle Kontrolle für Inhalte bereit, die ohne Code-Release gepflegt werden sollen.
CMS-Verantwortung
Strukturierte Modelle für Seiten, Leistungen, Artikel, FAQs und wiederverwendbare Module.
SEO-Migration
Metadaten, strukturierte Daten, Sitemap und explizite Redirects für frühere WordPress-URLs.
Responsives System
Gemeinsame Tokens und Komponenten für Homepage, Service-Seiten, Navigation und Conversion.
Produktionssicherheit
Linting, Typprüfung, Tests und Browser-Checks unterstützen Übergabe und Weiterentwicklung.
Ergebnis
WunderDerm verfügt heute über ein zusammenhängendes digitales System für Marke, Leistungsfindung, Preise, Orientierung, Buchungswege und CMS-Betrieb. Der Auftritt bleibt erkennbar WunderDerm — wirkt aber klarer, aktueller und deutlich leichter erweiterbar.
Diese Case Study dokumentiert Marken-, Design- und Softwarearbeit. Sie trifft keine Aussagen über klinische Wirksamkeit oder individuelle Behandlungsergebnisse.
Eine etablierte Marke modernisieren, ohne ihre Identität zu verlieren
Wir verbinden Strategie, responsives Design, CMS, Migration und technische Umsetzung zu einem wartbaren digitalen Auftritt.
Weitere Ansichten aus dem Designsystem
