Websites
Trixora Glow Center: Redesign eines Beautycenters
Ein komplettes Redesign für ein Beauty- und Wellnesscenter auf den Philippinen: eine ruhige Website in Rosé und Bordeaux mit Behandlungsmenü, Terminanfrage und einem kleinen Shop als Pflegeroutine in drei Schritten. Die neue Startseite lädt ausserdem 0.39 MB statt 17.83 MB.
- Kontext
- Trixora Glow Center, ein Beauty- und Wellnesscenter in Santiago, Agusan del Norte, Philippinen.
- Meine Rolle
- Design, Frontend-Entwicklung und Bildproduktion
- Jahr
- 2026
Mein Redesign: vorher und nachher
Die alte Website neben meinem Design, in derselben Bildschirmgrösse.
Startseite
Aus einer rosa Willkommenskarte mit Emoji-Notizen wurde ein ruhiger erster Bildschirm: ein grosser Serifen-Titel, eine Serumpipette über bewegtem Wasser und zwei klare Knöpfe für Termin und Shop.
Shop
Aus einem Raster kleiner Produktkarten wurde «A ritual for home»: die Routine in drei nummerierten Schritten, Cleanse, Treat und Glow, mit runden Produktbildern.
Rechtliche Hinweise
Aus hellen Karten wurde ein bordeauxfarbenes Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Titel, ein breiter Terminknopf und das Wasserbild passen auf den ersten Bildschirm, Termin und Warenkorb bleiben immer im Kopfbereich.
Überblick
Trixora Glow Center bietet in Santiago, Agusan del Norte, Gesichtsbehandlungen, Körperpflege, Grooming und Pakete an und verkauft eine kleine Pflegelinie. Die neue Website soll sich wie der Besuch selbst anfühlen: ruhig, weich und ohne Eile.
Das Problem
Die alte Startseite lud bei jedem Besuch 17.83 MB, davon 17.48 MB Bilder, was bei simulierten 10 Mbit/s 14.5 Sekunden dauerte. Schriften und Icons kamen von drei externen Hosts, und die rosa Kartenvorlage gab Behandlungen und Shop dasselbe Gewicht wie allem anderen.
Die Lösung
Ein Neubau ohne Framework in Rosé und Bordeaux mit einer Serifen-Titelschrift. Die Seite beginnt mit dem Behandlungsmenü und der Terminanfrage, danach folgen der Shop als Routine in drei Schritten, die Geschichte des Centers und die Besuchsinfos. 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 Bilder erstellt und für das Web komprimiert, Warenkorb, Terminformular und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Behandlungsmenü in vier Gruppen: Gesicht, Körperpflege und Spa, Beauty und Grooming sowie Spezialpakete
- Terminformular mit Behandlung und Wunschzeit, gesendet als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt
- Fünfzehn Produkte als Pflegeroutine für zu Hause in drei Schritten: Cleanse, Treat und Glow
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis im Shop, dass die Fotos Illustrationen sind und die Verpackung abweichen kann
- Schriften werden mit der Website ausgeliefert, die Startseite stellt keine Anfragen an Dritte
- Änderungen im Warenkorb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ BeautySalon
Technische Herausforderungen
Ruhig, aber trotzdem klar
Ein ruhiges Design kann den nächsten Schritt verstecken. Der Terminknopf bleibt auf jeder Bildschirmgrösse im Kopfbereich, und jeder Abschnitt endet mit genau einer klaren Aktion.
Zwei Formulare ohne Backend
Die Website ist statisch und kann deshalb selbst weder Termine buchen noch verkaufen. Terminformular und Bestellseite prüfen die Angaben und öffnen eine vollständige, vorausgefüllte E-Mail, die die Kundschaft abschickt. Beide erklären, dass das Team zuerst bestätigt.
Beautybilder, die nichts versprechen
Beautybilder suggerieren schnell Ergebnisse. Die Illustrationen zeigen Hände, Wasser und neutrale Verpackungen, und der Shop weist darauf hin, dass es Illustrationen sind. So schaffen die Bilder Stimmung, ohne etwas zu behaupten.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 17.83 → 0.39 MB
- Beim Laden am Handy
- 17.83 → 0.29 MB
- Nach Scrollen der ganzen Seite
- 17.83 → 0.67 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 14.5 → 0.44 s
- Drittanbieter-Hosts beim Laden
- 3 → 0
- Produkte im Shop
- 15
Ergebnisse
- Live unter trixorabeauty.life.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.39 MB statt 17.83 MB, am Handy 0.29 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Auch in einem ruhigen Design muss der Terminknopf auf jedem Bildschirm sichtbar sein.
- Ein Shop liest sich als Routine leichter als als Raster.
- 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 mit neutraler Verpackung, worauf die Website hinweist. Die Kundenzitate auf der Website stammen von der alten Website. Die Strassenadresse in den Screenshots der alten Startseite ist unkenntlich gemacht.
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.