Yamira Retail Market: Redesign eines Quartiermarkts

Yamira Retail Market verkauft in BF Homes, Parañaque City, Lebensmittel, frische Produkte und Haushaltsartikel. Die neue Website leiht sich das Papier, das alle mit nach Hause nehmen: den Kassenbon.

Die alte Startseite lud bei jedem Besuch 36.80 MB, was bei simulierten 10 Mbit/s 29.7 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, die Hälfte des Haupttitels war dunkle Schrift auf dunklem Grund, und Schriften und Icons kamen von drei externen Hosts. In der Fusszeile standen ausserdem eine Zeile mit Suchbegriffen und eine unbestätigte Angabe zur Mehrwertsteuer.

Ein Neubau ohne Framework in Creme, Dunkelblau und Erdbeerrot, mit einer Slab-Serif und einer Schreibmaschinenschrift für den Bon. Die ganze Seite liest sich wie ein langer Kassenbon auf einer dunkelblauen Theke: Produkte sind Bonzeilen mit gepunkteten Linien bis zu Preisen mit zwei Nachkommastellen, Abschnitte sind durch Perforationen und Abrisslinien getrennt, und der Warenkorb druckt Zeile für Zeile, bevor er mit Zwischensumme, einem dekorativen Strichcode und einer Abrisskante endet. 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 Bon-Warenkorb und seine Druckanimation entwickelt, die Bestellseite für die Lieferung neu aufgebaut, Fusszeile und AGB bereinigt und die alte und neue Version mit demselben Skript gemessen.

• Die ganze Seite als ein langer Kassenbon, mit perforierten Abschnitten
• Produkte als Bonzeilen mit gepunkteten Linien bis zum Preis mit zwei Nachkommastellen
• Warenkorb, der Zeile für Zeile druckt und mit Zwischensumme, dekorativem Strichcode und Abrisskante endet
• Fünfzehn Produkte in Abteilungen wie frische Produkte, Eier und Poulet
• Produktbilder mit erfundenen Markennamen und Erdbeer-Preisklebern, ohne echte Marken
• Suchbegriff-Zeile und unbestätigte Mehrwertsteuer-Angabe aus der Fusszeile entfernt
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Verfügbarkeit, Liefergebühr und Summe
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Die drei ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

36.80 → 1.38 MB

Beim Laden am Handy

36.79 → 1.06 MB

Nach Scrollen der ganzen Seite

36.80 → 1.62 MB

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

29.7 → 0.77 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter yamiramarket.store.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.38 MB statt 36.80 MB, am Handy 1.06 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.
• Suchbegriff-Zeilen helfen niemandem, klarer Text schon.
• 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 erfundenen Markennamen und ohne Personen; nur die Papiertüte trägt das eigene Logo des Markts, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Öffnungszeiten und die drei Kundenzitate stammen von der alten Website. In den Screenshots sind Strassenadresse, Steuernummer und Telefonnummer im Bonkopf sowie der Name der Gründerin oder des Gründers auf der alten Startseite unkenntlich gemacht.