Avrelisse Crystal Harbor: Redesign eines Hautpflege-Shops

Avrelisse Crystal Harbor stellt in Las Piñas City Gesichts-, Körper- und Sonnenpflege sowie Seifen her. Hautpflege wählt man danach, wie sie sich anfühlt, also zeigt die neue Website jedes Produkt als seine Textur.

Die alte Startseite lud bei jedem Besuch 41.98 MB, was bei simulierten 10 Mbit/s 33.9 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, Icons und eine Karte kamen von sechs externen Hosts. Auch die Inhalte waren unfertig und riskant: eine Firmenchronik mit Platzhalter «20XX», eine unbestätigte Aussage zu Zulassung und Vorschriften, Vorlagen-Slogans unter den falschen Produkten, medizinische und aufhellende Versprechen und zusätzliche E-Mail-Adressen auf einer anderen Domain.

Ein Neubau ohne Framework in beigem Stein, Pflaume und sanftem Gold, mit einer breiten Titelschrift und einer klaren serifenlosen Schrift. Jede Produktkarte trägt einen mit CSS gezeichneten Abstrich ihrer Textur, Cremewirbel, glänzendes Gel, Öltropfen, Schaum, Körnchen, Nebeltupfen oder ein mattes Seifenstück, der sich beim Darüberfahren ausbreitet, und der erste Bildschirm beginnt mit fünf grossen Texturproben, die zu den Produkten führen. Chips mit den wichtigsten Inhaltsstoffen stammen aus den alten Produktnotizen, und ein Bereich zu Inhaltsstoffen und Sicherheit empfiehlt 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 Texturproben entwickelt, Warenkorb und Bestellseite neu aufgebaut, die Platzhalter-Chronik sowie unbestätigte und medizinische Aussagen entfernt und die alte und neue Version mit demselben Skript gemessen.

• Jedes Produkt mit einem CSS-Abstrich seiner Textur, der sich beim Darüberfahren ausbreitet
• Reihe von fünf grossen Texturproben im ersten Bildschirm, die zu den Produkten führen
• Chips mit den wichtigsten Inhaltsstoffen aus den alten Produktnotizen
• Bereich zu Inhaltsstoffen und Sicherheit mit einer Karte zum Verträglichkeitstest
• Platzhalter-Chronik «20XX», Zulassungsaussage, falsche Slogans sowie medizinische und aufhellende Versprechen entfernt oder abgeschwächt
• Eine Kontaktadresse statt zusätzlicher Adressen auf einer anderen Domain
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst alles
• Die ursprünglichen Kundenzitate wie auf der alten Website übernommen

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

Gewicht der Startseite beim Laden

41.98 → 0.40 MB

Beim Laden am Handy

41.98 → 0.33 MB

Nach Scrollen der ganzen Seite

42.86 → 0.61 MB

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

33.9 → 0.52 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter avrelissecrystal.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.40 MB statt 41.98 MB, am Handy 0.33 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.
• Vorlagenreste kosten Vertrauen; vor dem Start jede Zeile lesen.
• In der Hautpflege 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 der Marke und ohne Personen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte und Kundenzitate stammen von der alten Website; medizinische, aufhellende und Zulassungsaussagen wurden entfernt oder abgeschwächt, und diese Fallstudie macht keine Aussagen zur Wirkung der Produkte. In den Screenshots der alten Startseite ist die Steuernummer unkenntlich gemacht.