Glyzora Infinite Crest: Redesign einer Boutique mit Massschneiderei

Glyzora Infinite Crest verkauft in San Pedro, Laguna, Konfektion, Büro- und Abendmode sowie Accessoires und bietet Mass- und Brautschneiderei an. Die neue Website baut auf dem Moment auf, in dem die Kundin die Schachtel öffnet.

Die alte Startseite lud bei jedem Besuch 88.33 MB, was bei simulierten 10 Mbit/s 71.1 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 versprach sie sicheres Online-Bestellen und Kartenzahlung über einen Link, den das Geschäft nicht hat, und «vertrauenswürdige» Angaben, die niemand bestätigt hatte.

Ein Neubau ohne Framework in Altrosa und Schwarz, mit einer schmalen Titelschrift, einer Schreibschrift und einer klaren serifenlosen Schrift. Im ersten Bildschirm hebt sich der Schachteldeckel, und das Seidenpapier öffnet sich zum Foto. Produktkarten sind Schachteldeckel mit schwarzer Schleife, die sich beim Darüberfahren heben, und beim Hinzufügen fällt eine kleine Schachtel mit Schleife auf den schachtelförmigen Warenkorb. Die Kollektionen lassen sich nach Konfektion, Büro, Abend, Saison, Accessoires und Massanfertigung filtern, und der Bereich Mass- und Brautmode erklärt den Ablauf auf Seidenpapier-Karten, die Pakete werden besprochen statt bepreist. An der Kasse wählt man Lieferung oder kostenlose Abholung in der Boutique und bezahlt bei Abholung, per GCash, Maya oder Bankeinzahlung. 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 Schachtel-Öffnung und die Warenkorb-Animation entwickelt, die Kasse mit Abholung neu aufgebaut, unbestätigte Zahlungs- und Vertrauensangaben entfernt und die alte und neue Version mit demselben Skript gemessen.

• Titelschachtel, deren Deckel sich hebt und deren Seidenpapier sich zum Foto öffnet
• Produktkarten als Schachteldeckel mit Schleife, die sich beim Darüberfahren heben
• Beim Hinzufügen fällt eine kleine Schachtel mit Schleife auf den schachtelförmigen Warenkorb
• Filter für Konfektion, Büro, Abend, Saison, Accessoires und Massanfertigung
• Bereich Mass- und Brautmode mit Ablaufkarten und Paketen, die besprochen statt bepreist werden
• Kasse mit Lieferung oder kostenloser Abholung; bei Abholung verschwindet das Adressfeld
• Unbestätigte Angaben zu Online-Zahlung, Karten und «vertrauenswürdig» entfernt
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Farbe, Grösse und Verfügbarkeit
• Die drei ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

88.33 → 0.60 MB

Beim Laden am Handy

88.32 → 0.46 MB

Nach Scrollen der ganzen Seite

88.33 → 0.77 MB

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

71.1 → 0.67 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Stücke im Shop

15

• →Live unter glyzorainfinite.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.60 MB statt 88.33 MB, am Handy 0.46 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.
• Geschäfte derselben Branche verdienen verschiedene Ideen.
• Nie eine Zahlungsart versprechen, die das Geschäft nicht anbietet.

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, jedes Stück in oder neben einer Schachtel mit dem Namen des Geschäfts, ohne andere Marken, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Pakete und die drei Kundenzitate stammen von der alten Website.