Stevianne Style Wardrobe: Redesign eines Kleidergeschäfts

Stevianne Style Wardrobe verkauft in Muntinlupa City Alltagskleidung für Frauen, Männer und Kinder. Die neue Website greift das Aussehen eines alten Computer-Desktops auf und macht den Laden zu etwas, mit dem man spielen kann.

Die alte Startseite lud bei jedem Besuch 17.21 MB, davon 16.84 MB Bilder, was bei simulierten 10 Mbit/s 14.0 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, Schriften und Icons kamen von drei externen Hosts, und die Produktfotos trugen Wasserzeichen.

Ein Neubau ohne Framework in Kaugummirosa, Limettengrün und Pflaume mit einer kräftigen, gerundeten Titelschrift und Fensterbeschriftungen in Monospace. Die zehn Produkte stehen in drei Gruppen (Oberteile, Unterteile, Kleider), jedes Kleidungsstück vor demselben Rosa im selben Massstab, und ein Mix-and-match-Fenster kombiniert Ober- und Unterteil, zeigt die Outfit-Summe und legt beides in den Warenkorb. 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, den Outfit-Baukasten entwickelt, Warenkorb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.

• Mix-and-match-Baukasten: Pfeile wechseln Ober- und Unterteil, die Summe passt sich an, ein Knopf legt beides in den Warenkorb
• Zehn Produkte in drei Gruppen: Oberteile, Unterteile und Kleider
• Jedes Kleidungsstück vor demselben rosa Hintergrund im selben Massstab
• Fenster mit Titelleisten und Bedienelementen als Layoutsystem
• Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Grösse, Farbe und Verfügbarkeit
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Hinweis im Shop, dass die Fotos Illustrationen sind und vom Teil abweichen können
• Änderungen in Warenkorb und Outfit werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ ClothingStore

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

Gewicht der Startseite beim Laden

17.21 → 0.37 MB

Beim Laden am Handy

17.20 → 0.32 MB

Nach Scrollen der ganzen Seite

17.21 → 0.43 MB

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

14.0 → 0.53 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

10

• →Live unter steviannewardrobe.shop.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.37 MB statt 17.21 MB, am Handy 0.32 MB.
• →Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.

• Ein verspieltes Konzept wirkt am besten, wenn es auch beim Entscheiden hilft.
• Ein Hintergrund und ein Massstab lassen ein kleines Sortiment kuratiert wirken.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

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 ohne Personen, und der Retro-Computer-Look ist ein visuelles Konzept; die Website weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte und Kundenzitate auf der Website stammen von der alten Website. Das alte Produktraster wird nicht gezeigt, weil es Personen, Wasserzeichen und ein fremdes Logo abbildete.