Katrelle Nova Haven: Redesign eines Beauty-Salons

Katrelle Nova Haven bietet in Pinagbuhatan, Pasig City, Haar-, Nagel-, Haut- und Massagebehandlungen an, Hausbesuche auf Termin und ein kleines Sortiment an Kosmetik. Die Bienen im Logo gaben der neuen Website ihre Struktur: eine Honigwabe.

Die alte Startseite lud bei jedem Besuch 64.51 MB, was bei simulierten 10 Mbit/s 51.7 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, die gelbe Liste war auf Mint kaum lesbar, die Seite forderte Bilder an, die es nicht gab, und Schriften, Icons und eine Karte kamen von sechs externen Hosts. Ausserdem verortete der Text den Salon in Western Bicutan, Taguig statt in Pasig, versprach zertifizierte Fachleute und Sonderangebote, die der Salon nicht bestätigen konnte, und behauptete eine Mehrwertsteuer-Registrierung.

Ein Neubau ohne Framework in Mint und Butter aus dem Logo, mit einer runden Titelschrift und einer klaren serifenlosen Schrift. Die 15 Behandlungen und Produkte sitzen in echten Sechseckzellen, filterbar nach Haare, Nägel, Haut, Massage und Wellness sowie Kosmetik. Eine hinzugefügte Zelle leuchtet honiggelb, und eine gezeichnete Biene fliegt zum sechseckigen «My visit»-Zähler. Besucher schicken ihren Besuch mit Wunschtag und -zeit und bezahlen im Salon; die Kosmetikprodukte sind als «im Salon abholen und bezahlen» gekennzeichnet. 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.

Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, das Wabenraster und die Bienen-Animation entwickelt, den Ablauf als Besuchsanfrage neu gebaut, den Ort korrigiert, unbestätigte Aussagen und Angebote entfernt und die alte und neue Version mit demselben Skript gemessen.

• Behandlungen und Produkte in echten sechseckigen Wabenzellen, mit Filtern
• Hinzugefügte Zellen leuchten honiggelb, eine gezeichnete Biene fliegt zum Besuchszähler
• Sechseckiger «My visit»-Zähler im Kopfbereich
• Besuchsanfrage mit Wunschtag und -zeit, Bezahlung im Salon; Kosmetik wird ebenfalls dort abgeholt und bezahlt
• Ort überall ausserhalb der Originalzitate von Western Bicutan, Taguig zu Pinagbuhatan, Pasig korrigiert
• «Zertifizierte Fachleute», Sonderangebote, die der Salon nicht einlösen konnte, ein Superlativ und die Mehrwertsteuer-Angabe entfernt
• Anfrage als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt
• Prüfung der Felder auf der Anfrageseite, einschliesslich philippinischer Handynummern
• Die ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

64.51 → 0.69 MB

Beim Laden am Handy

64.04 → 0.52 MB

Nach Scrollen der ganzen Seite

64.64 → 0.86 MB

Vollständig geladen (simuliert, 10 Mbit/s)

51.7 → 0.60 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Behandlungen und Produkte

15

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

• Das beste Konzept funktioniert zugleich als Bedienoberfläche.
• Ein Detail aus dem Logo kann eine ganze Website tragen.
• Zuerst die Grundlagen prüfen: den Ort, die Angebote, die Aussagen.

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. Alle Bilder sind generierte Illustrationen eines erdachten Salons; auch die Personen darauf sind generiert und weder Personal noch Kundschaft des Salons, worauf die Website hinweist. Behandlungstexte, Preise und Kundenzitate stammen von der alten Website; die Zitate bleiben wörtlich, auch zwei Bildunterschriften, die den falschen Ort aus dem alten Text nennen.