Mirivelle Golden Court: Redesign eines Dorfladens

Mirivelle Golden Court verkauft in Barangay Santol, Mataas na Kahoy, Batangas, Lebensmittel, Fertiggerichte, Schul- und Bürobedarf und Haushaltswaren. Die neue Website leiht sich einen vertrauten Gegenstand aus dem Dorfladen: das Samentütchen.

Die alte Startseite lud bei jedem Besuch 62.50 MB, was bei simulierten 10 Mbit/s 50.4 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, der gelbe Text war kaum lesbar, die Seite forderte Bilder an, die es nicht gab, und Schriften und Icons kamen von drei externen Hosts. Ausserdem passten die Angaben nicht zusammen: Die Steuernummer stand als Gewerbebewilligung da, die rechtlichen Seiten nannten eine andere Einheitsnummer, es gab zwei zusätzliche E-Mail-Adressen auf einer anderen Domain, der Name der Gründerin war falsch geschrieben, und Kartenzahlung wurde als «bald verfügbar» angekündigt.

Ein Neubau ohne Framework in tiefem Grün, Creme und Goldgelb, mit einer runden Slab-Serif und einer klaren serifenlosen Schrift. Jedes Produkt ist ein altes Samentütchen: eine gewellte Lasche «Packet No.», ein Blattrahmen aus dem Logo, ein Foto im Bogen, Nettogewicht oder Sorte nur aus dem Produktnamen, dann Preis und Knopf. Die Produkte stehen auf vier farbcodierten Regalen: Vorräte und Frisches, Fertiggerichte, Schule und Büro, Haushalt und Putzen. Beim Hinzufügen wird ein Produkt «gesät»: Die Lasche kippt, und am Warenkorb-Knopf spriesst ein Blatt, sodass der Knopf wie ein Keimling wächst. Die Taglish-Stimme des Ladens bleibt erhalten. 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 Samentütchen-Karten und den Keimling-Warenkorb entwickelt, Warenkorb und Bestellseite neu aufgebaut, Kontakt- und Rechtsangaben vereinheitlicht und die alte und neue Version mit demselben Skript gemessen.

• Jedes Produkt als altes Samentütchen mit Lasche, Blattrahmen und Foto im Bogen
• Vier farbcodierte Regale: Vorräte und Frisches, Fertiggerichte, Schule und Büro, Haushalt und Putzen
• Beim Hinzufügen spriesst ein Blatt am Warenkorb-Knopf, der so wie ein Keimling wächst
• Titel-Tütchen mit sich zeichnenden Ranken und einer Tabelle der Öffnungszeiten
• Produktbilder mit erfundenen Markennamen, ohne echte Marken
• Eine E-Mail, eine Adresse und die Steuernummer korrekt bezeichnet; der Name der Gründerin richtig geschrieben
• «Bald verfügbare» Kartenzahlung entfernt; Bezahlung wie in den alten FAQ
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Bestand, Lieferung und Summe
• Die Taglish-Stimme des Ladens und die drei ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

62.50 → 0.93 MB

Beim Laden am Handy

62.49 → 0.65 MB

Nach Scrollen der ganzen Seite

62.50 → 1.14 MB

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

50.4 → 0.77 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter mirivellegolden.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.93 MB statt 62.50 MB, am Handy 0.65 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.
• Kontaktangaben müssen auf jeder Seite dasselbe sagen.
• 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 mit erfundenen Markennamen und ohne Personen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Lieferbedingungen und die drei Kundenzitate stammen von der alten Website. In den Screenshots ist die Telefonnummer unkenntlich gemacht.