Zum Inhalt springen
KIVA
← Alle Projekte

Websites

Angelisse Wellness Haven: Redesign eines Wellness-Zentrums

Ein komplettes Redesign für ein Wellness- und Massagezentrum auf den Philippinen, inspiriert von Hilot, der philippinischen Tradition der fürsorglichen Berührung: Salbei, Terrakotta und Knochenweiss, und ein Shop rund um eine gezeichnete Figur, deren Druckpunkte die Produkte nach Körperbereich filtern. Die neue Startseite lädt ausserdem 1.21 MB statt 50.34 MB.

Kontext
Angelisse Wellness Haven, ein Wellness- und Massagezentrum in Las Piñas City, Philippinen.
Meine Rolle
Design, Frontend-Entwicklung und Bildproduktion
Jahr
2026
Hilot: Serifen-Titel neben einer Hilot-Massageszene in einem Bogen.
Startseite am Handy: Titel, zwei Knöpfe und das Bogenbild auf dem Handy.

Mein Redesign: vorher und nachher

Die alte Website neben meinem Design, in derselben Bildschirmgrösse.

Startseite

Aus einer salbeigrünen Verlaufskarte mit Logo über einem kaputten Bild wurde ein ruhiger erster Bildschirm: ein grosser Serifen-Titel mit Terrakotta-Kursive neben einer Hilot-Massageszene in einem Bogen.

Nachher: StartseiteVorher: Startseite

Auf dem Handy

Das alte Handy-Layout war auf einem 390 px breiten Bildschirm 780 px breit. Jetzt passen Titel, zwei Knöpfe und das Bogenbild auf den Bildschirm.

Vorher
Vorher: Auf dem Handy
Nachher
Nachher: Auf dem Handy

Überblick

Angelisse Wellness Haven bietet in Las Piñas City Massagen, Hautpflege und Wellness-Programme an und verkauft Produkte für die Selbstpflege. Die neue Website nimmt ihre Idee von Hilot, der philippinischen Tradition der fürsorglichen Berührung: Man kauft danach ein, wo am Körper man sich etwas Gutes tun möchte.

Das Problem

Die alte Startseite lud bei jedem Besuch 50.34 MB, was bei simulierten 10 Mbit/s 40.6 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, die Seite forderte Bilder an, die es nicht gab, sodass Besucher kaputte Bildplatzhalter sahen, und Schriften und Icons kamen von drei externen Hosts.

Die Lösung

Ein Neubau ohne Framework in Salbei, Terrakotta und Knochenweiss, mit einer klassischen Serifenschrift und einer warmen serifenlosen Schrift. Der Shop baut auf einer gezeichneten Rückenfigur mit sieben sanft pulsierenden Druckpunkten auf; jeder ist ein echter Knopf, der die Produkte für diesen Körperbereich filtert. Formulierungen mit medizinischen Wirkversprechen wurden abgeschwächt, und Shop und FAQ sagen, dass die Produkte der Entspannung und der alltäglichen Pflege dienen und keine medizinische Behandlung ersetzen. Die Bilder sind komprimierte WebP-Dateien, die erst beim Scrollen laden, und die Schriften werden mit der Website ausgeliefert, sodass die Startseite ohne Anfragen an Dritte auskommt.

Screenshots

Aufgenommen an der echten, live geschalteten Website.

Mein Beitrag

Die neue Website gestaltet und gebaut, die Körperkarte gezeichnet, die Bilder erstellt und für das Web komprimiert, den Körperbereich-Filter entwickelt, Warenkorb und Bestellseite neu aufgebaut, die Texte auf Aussagen geprüft und die alte und neue Version mit demselben Skript gemessen.

Funktionen

  • Körperkarten-Shop: eine gezeichnete Figur mit sieben Druckpunkten, die die Produkte nach Körperbereich filtern
  • Jeder Druckpunkt ist ein echter Knopf, auch per Tastatur bedienbar
  • Hausetikett auf jedem Produkt aus dem eigenen Logo des Zentrums, ohne Marken Dritter
  • Hinweis in Shop und FAQ, dass die Produkte keine medizinische Behandlung ersetzen
  • Formulierungen mit medizinischen Wirkversprechen abgeschwächt
  • Die drei ursprünglichen Kundenzitate wörtlich übernommen, mit dem Hinweis, dass Erfahrungen unterschiedlich sind
  • Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
  • Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Verfügbarkeit, Lieferung und Summe
  • Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern

Technische Herausforderungen

Ein Konzept, das etwas tut

Die Körperkarte ist nicht nur eine Illustration. Ihre Druckpunkte sind der Filter des Shops, die Idee der fürsorglichen Berührung wird so zum Weg, auf dem Besucher Produkte finden.

Wellness ohne medizinische Versprechen

Wellness-Texte rutschen leicht in Gesundheitsversprechen ab. Aussagen, die eine Behandlung von Beschwerden versprachen, wurden abgeschwächt, und die Website verweist bei medizinischen Fragen auf den Arzt.

Verifizierter Stack

  • HTML
  • CSS
  • JavaScript
  • SVG
  • WebP
  • JSON-LD structured data

Fakten aus dem Code

Gewicht der Startseite beim Laden
50.34 → 1.21 MB
Beim Laden am Handy
50.32 → 0.88 MB
Nach Scrollen der ganzen Seite
50.34 → 1.97 MB
Vollständig geladen (simuliert, 10 Mbit/s)
40.6 → 0.70 s
Layoutbreite am Handy (390-px-Bildschirm)
780 → 390 px
Produkte im Shop
15

Ergebnisse

  • Live unter angelissehaven.life.
  • Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.21 MB statt 50.34 MB, am Handy 0.88 MB.
  • Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.

Erkenntnisse

  • Das beste Konzept funktioniert zugleich als Bedienoberfläche.
  • Im Wellness-Bereich schaffen vorsichtige Worte mehr Vertrauen als grosse Versprechen.
  • Wenn Bilder Illustrationen sind, gehört das auf die Seite.

Zu dieser Fallstudie

Kunden-Website, mit Namen gezeigt. Screenshots und Messwerte stammen aus einem Aufnahmeskript, das auf der alten und der neuen Website lief, auf einem lokalen Server. Der Wert bei 10 Mbit/s beruht auf einer simulierten Verbindung und nicht auf Daten echter Besucher. Die Produkt- und Szenenbilder sind generierte Illustrationen; auch die Personen darauf sind generiert und weder Personal noch Kundschaft des Zentrums. Die Produkte tragen ein Hausetikett aus dem eigenen Logo des Zentrums, ohne Marken Dritter, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Leistungsbeschreibungen und die drei Kundenzitate stammen von der alten Website; Formulierungen mit medizinischen Wirkversprechen wurden abgeschwächt, und diese Fallstudie macht keine medizinischen Aussagen.

Planen Sie eine neue Website, oder ist Ihre heutige zu langsam?

Beschreiben Sie Ihr Vorhaben in ein paar Sätzen. Innerhalb von zwei Arbeitstagen erhalten Sie Rückfragen, einen groben Lösungsansatz und eine Preisspanne in CHF.

Projekt anfragen →