Jessira Glow Studio: Redesign eines Beauty-Salons

Jessira Glow Studio bietet in Pasay City Gesichtsbehandlungen, Körper- und Spa-Anwendungen sowie Haare, Wimpern und Nägel an. Die neue Website leiht sich den Gegenstand, den alle Salongäste kennen: den Schminkspiegel mit seinem Lämpchenkranz.

Die alte Startseite lud bei jedem Besuch 86.81 MB, was bei simulierten 10 Mbit/s 69.9 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, die Seite forderte Bilder an, die es nicht gab, Schriften und Icons kamen von drei externen Hosts, und sie machte Aussagen, die das Studio nicht belegen konnte.

Ein Neubau ohne Framework in tiefem Petrol und Limette aus dem Logo, dazu Lämpchengold, mit einer kontrastreichen Serifenschrift und einer klaren serifenlosen Schrift. Im ersten Bildschirm leuchten achtzehn warme, mit CSS gezeichnete Lämpchen nacheinander um einen runden Spiegel auf, in dem das Studiofoto erscheint. Jede Behandlungskarte hat ihren eigenen kleinen Lämpchenspiegel, und der «My visit»-Spiegel im Kopfbereich schaltet für jede gewählte Behandlung ein Lämpchen ein. Besucher wählen Behandlungen und einen Wunschtermin, das Team bestätigt, und bezahlt wird im Studio. 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, die Lämpchen-Animationen und den «My visit»-Spiegel entwickelt, den Buchungsablauf und seine Übersichtsseite neu aufgebaut, die Texte auf Aussagen geprüft und die alte und neue Version mit demselben Skript gemessen.

• Runder Schminkspiegel im ersten Bildschirm mit achtzehn CSS-Lämpchen, die nacheinander aufleuchten
• Ein Lämpchenspiegel auf jeder Behandlungskarte
• «My visit»-Spiegel im Kopfbereich, der pro gewählter Behandlung ein Lämpchen einschaltet
• Fünfzehn Behandlungen in den Gruppen Gesicht, Körper & Spa, Haare, Wimpern & Nägel sowie Pakete
• Terminanfrage mit Wunschtag und -zeit; das Team bestätigt, bezahlt wird im Studio
• Zwei unbestätigte Aussagen der alten Website entfernt: eine Zeile zur Mehrwertsteuer-Registrierung und eine Behauptung zu Zertifizierungen
• Terminanfrage als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt
• Prüfung der Felder auf der Buchungsseite, einschliesslich philippinischer Handynummern
• Die drei ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

86.81 → 0.68 MB

Beim Laden am Handy

86.81 → 0.58 MB

Nach Scrollen der ganzen Seite

86.81 → 0.88 MB

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

69.9 → 0.68 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Behandlungen auf der Website

15

• →Live unter jessirastudio.life.
• →Mit denselben Einstellungen gemessen: Die Startseite lädt am Desktop 0.68 MB statt 86.81 MB, am Handy 0.58 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 Dienstleistungsbetrieb braucht einen Buchungsablauf, keinen Shop-Checkout.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

Kunden-Website, mit Namen gezeigt. Nach dem Start wurden Bilder und Schriften verkleinert, ohne das Design zu ändern; die Werte der neuen Website sind an dieser verkleinerten Version gemessen, auf einem lokalen Server und mit denselben Einstellungen wie bei der alten Website. 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 Studios; auch die Kundinnen, Kunden und Fachkräfte darauf sind generiert und weder Personal noch Kundschaft des Studios, worauf die Website hinweist. Behandlungstexte und die drei Kundenzitate stammen von der alten Website. Im Screenshot der alten Startseite ist der Name der Gründerin oder des Gründers unkenntlich gemacht.