Jenlisse Glow Sanctuary: Redesign eines Kosmetik-Shops

Jenlisse Glow Sanctuary verkauft aus Bacoor City, Cavite, Hautpflege, Lippen- und Gesichts-Make-up, Augenprodukte und Beauty-Werkzeuge, mit Lieferung im ganzen Land. Sein Logo ist ein Schminktäschchen, also ist die neue Website eines.

Die alte Startseite lud bei jedem Besuch 40.32 MB, was bei simulierten 10 Mbit/s 32.6 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, die Seite forderte Bilder an, die es nicht gab, und Schriften und Icons kamen von drei externen Hosts. Ausserdem warb sie mit «locally trusted» und «only the finest ingredients» und beantwortete die Frage nach empfindlicher Haut mit einem schlichten «Absolutely».

Ein Neubau ohne Framework in Zartrosa, Schwarz und Roségold, mit einer gravierten Serifenschrift, einer Schreibschrift als Akzent und einer klaren serifenlosen Schrift. Im ersten Bildschirm öffnet sich ein mit CSS gezeichneter, gesteppter Beutel beim Laden und zeigt das Foto. Die Produkte stecken in gesteppten Fächern mit eigenen Reissverschluss-Laschen, ein schwarzes Reissverschluss-Band trägt die fünf Kategorien, und der Warenkorb ist ein Mini-Beutel, der sich wölbt, wenn er sich füllt. Die Antwort zu empfindlicher Haut empfiehlt nun einen Verträglichkeitstest. 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 Reissverschluss-Animation und den Beutel-Warenkorb entwickelt, Warenkorb und Bestellseite neu aufgebaut, unbestätigte Aussagen und Hautversprechen abgeschwächt und die alte und neue Version mit demselben Skript gemessen.

• Titel-Beutel, dessen roségoldener Reissverschluss sich öffnet und das Foto zeigt
• Produkte in gesteppten Fächern mit Reissverschluss-Laschen, in fünf Kategorien
• Mini-Beutel als Warenkorb, der sich mit jedem Artikel wölbt
• Produktbilder mit Etiketten aus dem Namen des Shops, ohne andere Marken
• Aussagen zu «trusted» und «finest ingredients» entfernt; Antwort zu empfindlicher Haut durch den Rat zum Verträglichkeitstest ersetzt
• 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
• Die drei ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

40.32 → 0.59 MB

Beim Laden am Handy

40.31 → 0.44 MB

Nach Scrollen der ganzen Seite

40.32 → 0.70 MB

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

32.6 → 0.56 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter jenlisseglow.life.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.59 MB statt 40.32 MB, am Handy 0.44 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.
• Im Beauty-Bereich schaffen vorsichtige Worte mehr Vertrauen als grosse Versprechen.

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 Produktbilder sind generierte Illustrationen mit Etiketten aus dem Namen des Shops und ohne Personen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte und die drei Kundenzitate stammen von der alten Website; Aussagen zur Hautverträglichkeit wurden abgeschwächt. Im Screenshot des neuen Handy-Menüs ist die Telefonnummer unkenntlich gemacht.