Michaelle Retail Mart: Redesign eines Quartierladens

Michaelle Retail Mart verkauft in Imus City, Cavite, frische Produkte, Vorräte, Snacks und Haushaltsartikel. Die neue Website leiht sich die Tasche, die alle auf philippinischen Märkten kennen: den geflochtenen Bayong.

Die alte Startseite lud bei jedem Besuch 46.63 MB, davon 46.26 MB Bilder, was bei simulierten 10 Mbit/s 37.6 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, Schriften kamen von Google, und die Karten mit den rechtlichen Hinweisen zeigten noch Platzhaltertext.

Ein Neubau ohne Framework in Dunkelblau, Creme und Banig-Beige, mit Flechtmuster und runder, gut lesbarer Schrift. Das Warenkorb-Symbol im Kopfbereich ist ein kleiner Bayong, der sich mit jedem Artikel füllt, der Warenkorb heisst «My bayong», und der Hauptknopf lautet «Fill your bayong». Bestellt wird zur Abholung im Laden, mit Wunschzeit für die Abholung und Bezahlung bei Abholung. 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 sich füllenden Bayong-Warenkorb entwickelt, Warenkorb und Bestellseite für die Abholung neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.

• Bayong-Symbol im Kopfbereich, das sich füllt, sobald Artikel in den Warenkorb kommen
• Warenkorb mit dem Titel «My bayong», Bestellübersicht mit dem Titel «Your bayong»
• Fünfzehn Produkte in Bereichen wie «Fresh», alle auf derselben Banig-Matte
• Produktbilder mit neutraler Verpackung, ohne Marken
• Bestellung zur Abholung: Wunschtag und -zeit, Bezahlung bei Abholung bar, per GCash, Maya oder QR Ph
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Bestellung und Abholzeit
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Hinweis im Shop, dass die Fotos Illustrationen sind und vom Produkt abweichen können
• Die beiden ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

46.63 → 1.32 MB

Beim Laden am Handy

46.63 → 1.09 MB

Nach Scrollen der ganzen Seite

46.63 → 1.54 MB

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

37.6 → 0.90 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter michaellemart.store.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.32 MB statt 46.63 MB, am Handy 1.09 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.
• Erst fragen, wie der Laden die Ware wirklich übergibt, dann den Bestellablauf gestalten.
• 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 Produkt- und Szenenbilder sind generierte Illustrationen mit neutraler Verpackung, ohne Marken und ohne Personen; der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Öffnungszeiten und die beiden Kundenzitate auf der Website stammen von der alten Website. Im Screenshot der alten Startseite ist der Name des Gründers unkenntlich gemacht.