Jobira Apparel House: Redesign eines Modegeschäfts

Jobira Apparel House verkauft aus Talon Tres, Las Piñas, Freizeitmode, Büromode und auffällige Einzelstücke. Die neue Website erzählt, wie Kleider an die Stange kommen: von der Skizze zum fertigen Stück.

Die alte Startseite lud bei jedem Besuch 31.44 MB, fast nur grosse PNG-Bilder, was bei simulierten 10 Mbit/s 25.5 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit. Das Logo war das einzige Bild der Marke, und das Design wirkte wie eine beliebige Vorlage.

Ein Neubau ohne Framework in Tinte, warmem Papier und Flieder, mit einer Caslon-Titelschrift und einer Handschrift als Akzent. Im ersten Bildschirm zieht man einen Regler von einer Bleistiftskizze der Kleiderstange zum Foto derselben Stange. Jede Produktkarte beginnt als Skizze, wird beim Hineinscrollen zum Foto und zeigt beim Darüberfahren wieder die Skizze. Die Kleider tragen Etikett und Anhänger, die aus dem eigenen Logo gezeichnet sind. 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 Paare aus Skizze und Foto erstellt und für das Web komprimiert, den Skizzen-Regler und das Aufdecken der Karten entwickelt, Warenkorb und Bestellseite neu aufgebaut und die alte und neue Version gemessen.

• Schieberegler im ersten Bildschirm von der Bleistiftskizze der Kleiderstange zur echten Stange
• Produktkarten, die beim Hineinscrollen von der Skizze zum Foto wechseln und beim Darüberfahren wieder die Skizze zeigen
• Fünfzehn Produkte als Paare aus Skizze und Foto, in Kollektionen wie «For her»
• Etikett und Kraftpapier-Anhänger aus dem eigenen Logo, ohne Marken Dritter
• 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, Verfügbarkeit und Lieferung
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Hinweis im Shop, dass die Fotos Illustrationen sind und vom Stück abweichen können
• Keine erfundenen Bewertungen: Die alte Website hatte keine, also hat auch die neue keine

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

Gewicht der Startseite beim Laden

31.44 → 1.02 MB

Beim Laden am Handy

31.44 → 1.02 MB

Nach Scrollen der ganzen Seite

31.44 → 1.20 MB

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

25.5 → 0.83 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter jobirafashion.shop.
• →Die Startseite lädt 1.02 MB statt 31.44 MB und ist bei simulierten 10 Mbit/s in 0.83 s vollständig geladen.
• →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.
• Keine Bewertungen erfinden, um einen Abschnitt zu füllen.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

Kunden-Website, mit Namen gezeigt. Nach dem Start wurden die Bilder verkleinert, ohne das Design zu ändern; die Werte der neuen Website sind an dieser verkleinerten Version gemessen. Die Screenshots der neuen Website stammen aus einem Aufnahmeskript auf einem lokalen Server; die alte Website wurde separat auf einem lokalen Server mit denselben Einstellungen gemessen. Der Wert bei 10 Mbit/s beruht auf einer simulierten Verbindung und nicht auf Daten echter Besucher. Die Skizzen und Produktfotos sind generierte Illustrationen ohne Personen; Etikett und Anhänger an den Kleidern sind aus dem eigenen Logo des Geschäfts gezeichnet, ohne Marken Dritter, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte und Öffnungszeiten stammen von der alten Website. Die alte Website hatte keine Kundenbewertungen, und es wurden keine hinzugefügt. Im Screenshot der alten Startseite ist der Name der Gründerin oder des Gründers unkenntlich gemacht.