Gesundheits-App
Produkt-UX
FallstudienFallstudienvorlage · Lips by Lara
Lips by LaraBeauty · Website
Leistungen
Tools
Technologie-Stack
Beauty · Website
Lips by Lara
Eine Website für Laras ästhetische Praxis, die ein ausdrucksstarkes visuelles Design, eine animierte Figur und einen Behandlungskonfigurator vereint. Besucher können Bereiche erkunden, Preise offen einsehen und einen Plan zusammenstellen, den sie mit Lara besprechen.
Der Praxis ein vollständiges Online-Erlebnis geben
Lara beantwortete in Direktnachrichten immer wieder dieselben Fragen und wollte, dass Preise ohne gesonderte Anfrage verfügbar sind. Wir haben eine Website entwickelt, die ihre Praxis vorstellt, eine ausführliche Behandlungsliste zugänglich macht und diesen wiederkehrenden Antworten ein dauerhaftes Zuhause gibt.
Unser Beitrag
Wir haben Inhalte und Website-Struktur konzipiert, die visuelle Sprache gestaltet, die KI-generierte Figur und ihre Animation erstellt und die responsive Website samt Checkout entwickelt. Die Arbeit verband Art Direction, Animation und die Mechanik der Behandlungsauswahl.
Wir haben die Behandlungsliste nach Bereichen geordnet und Figur, Karten und Plan als ein Erlebnis gestaltet. Parallel dazu haben wir eigene Seiten für Preise, Vorbereitung, Nachsorge und FAQ entwickelt, auf die Lara direkt verlinken kann.
Die visuelle Richtung
Wir haben die visuelle Richtung auf ausdrucksstarke Serifentypografie, einen zarten Rosé-Grund und burgunderfarbene Akzente aufgebaut. Ein großes Porträt verankert die Eröffnungskomposition, umgeben von viel Raum und sorgfältig platzierten Behandlungskarten. Der Konfigurator gehört von Anfang an zu dieser Komposition: Seine Panels, Preise und Bedienelemente nutzen dieselbe visuelle Sprache und tragen den Charakter der Website in die praktischen Teile des Erlebnisses.
01 / Figur und Bewegung
Eine Figur für eine bewegte Oberfläche erschaffen.
Die Figur zu erschaffen bedeutete, sowohl ihr Aussehen als auch ihre Bewegung zu entwickeln. Wir haben das Modell und die Animation generiert, stimmige Sequenzen ausgewählt und eine lange Schleife erstellt, damit sich eine kurze Geste nicht alle paar Sekunden wiederholt.
Auch die Bewegung musste zur Oberfläche passen. Die Übergänge wurden um ausgewählte Punkte in der Schleife herum aufgebaut, und die Behandlungskarten folgen ihren Bereichen, während sie sich bewegt. Dieser kurze Ausschnitt zeigt Figur und Karten zusammen in der fertigen Szene.
02 / Behandlungskonfigurator
Bereich, Auswahl und Preis in einem Plan halten.
Laras Preisliste enthielt mehr als 40 Positionen, geordnet nach Behandlungsart. Wir haben sie nach Bereichen neu gruppiert, sodass man beim Erkunden eines Teils von Gesicht oder Körper die passenden Optionen und Preise zusammen sieht.
Beim Wechsel des Bereichs werden Szene und Behandlungsliste aktualisiert, während bisherige Auswahlen erhalten bleiben. Das Hinzufügen einer Behandlung verknüpft ihre Karte, den Auswahlstatus, die Artikelanzahl und die Gesamtsumme. Im Eröffnungsbild bleiben zwei Gesichtsbehandlungen ausgewählt, wenn eine Halsbehandlung hinzukommt; alle drei erscheinen zusammen im Warenkorb.
Wir haben den Checkout mit Laras eigenem Stripe-Konto verbunden und den nächsten Schritt ausdrücklich benannt: Der Plan eröffnet ein Gespräch, und die Zahlung reserviert keinen Termin und ersetzt nicht Laras Beurteilung.
03 / Inhalte und Orientierung
Wiederkehrenden Fragen eine Antwort geben, die Lara senden kann.
Wir haben veröffentlichte Fragen auf Websites anderer Injektionsspezialisten ausgewertet und mit einem strukturierten Briefing Laras eigene Antworten gesammelt. Daraus entstanden durchsuchbare FAQ mit 50 Fragen zu fünf Themen sowie Hinweise zur Vorbereitung und Nachsorge.
Jede Antwort hat einen eigenen Link. Lara kann die passende Erklärung per Nachricht senden, und Besucher können darauf zurückkommen, ohne einen alten Chatverlauf durchsuchen zu müssen. Die Referenzseiten nutzen dieselbe visuelle Sprache wie die Startseite.
Das Ergebnis
Eine vollständige Website, von der visuellen Richtung bis zum Checkout.
Die veröffentlichte Website kombiniert ein individuelles visuelles Design, eine generierte Figurenanimation, einen vernetzten Behandlungskonfigurator, praktische Hinweise und Stripe-Checkout, mit Layouts für Desktop, Tablet und Smartphone.
