Kyrelle Grocery Center: Redesign eines Lebensmittelladens

Kyrelle Grocery Center verkauft in Kawit, Cavite, Obst, Gemüse, Fleisch, Reis, Konserven und philippinische Spezialitäten. Die neue Website sieht aus wie der Laden selbst: ein Stand aus beschrifteten Kiefernkisten, und sie behält die eigene Tagalog-Stimme des Ladens.

Die alte Startseite lud bei jedem Besuch 47.27 MB, was bei simulierten 10 Mbit/s 38.1 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und Schriften und Icons kamen von drei externen Hosts. Ausserdem zeigte sie einen Zertifikatsblock, in dem die Registrierungsnummer in Wahrheit die Steuernummer und die Mehrwertsteuernummer in Wahrheit die Telefonnummer war, und sie versprach Wochenangebote, ein Treueprogramm und Kartenzahlung, die es nicht gibt.

Ein Neubau ohne Framework in Türkis, Grün und Dunkelblau aus dem Logo plus Kiefer, mit einer Schablonen-Titelschrift und einer lebendigen serifenlosen Schrift. Die Titel sind echter Text, der mit einem SVG-Filter wie gesprüht aussieht. Der Shop ist eine Wand aus Kiefernkisten unter fünf dunkelblauen Schildern, von Prutas bis Inumin; jede Kistenkarte hat ein angeklemmtes Preisschild aus Kraftpapier, und beim Hinzufügen fällt eine Kiste auf den Korb-Knopf. Ein Lieferstreifen erklärt Gebiet, Mindestbestellwert von ₱500 und Gebühr von ₱50, und der Warenkorb zeigt, wie viel noch fehlt. 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 fallende Kiste und den Hinweis zum Mindestbestellwert entwickelt, Warenkorb und Bestellseite neu aufgebaut, falsche und unbestätigte Aussagen entfernt und die alte und neue Version mit demselben Skript gemessen.

• Titel in Türkis auf eine Kiefernbretterwand gesprüht, als echter, markierbarer Text
• Shop als Wand aus Kiefernkisten unter fünf dunkelblauen Schildern: Prutas; Karne, Isda & Itlog; Pantry; Merienda; Inumin
• Eine Kiste, die beim Hinzufügen auf den Korb-Knopf fällt
• Lieferstreifen mit Gebiet, Mindestbestellwert ₱500 und Gebühr ₱50, dazu ein Hinweis im Warenkorb, wie viel noch fehlt
• Produktbilder mit erfundenen Markennamen, ohne echte Marken
• Falsche Zertifikatsnummern, eine unbestätigte Hygiene-Aussage sowie Angebote, Treueprogramm und Kartenzahlung, die es nicht gibt, entfernt
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Bestellung und Lieferung
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Die Tagalog-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

47.27 → 1.27 MB

Beim Laden am Handy

47.26 → 1.01 MB

Nach Scrollen der ganzen Seite

47.27 → 1.61 MB

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

38.1 → 0.83 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter kyrellefresh.shop.
• →Mit denselben Einstellungen gemessen: Die Startseite lädt am Desktop 1.27 MB statt 47.27 MB, am Handy 1.01 MB.
• →Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.

• Ein Konzept, das wie der echte Ort aussieht, schafft Vertrauen.
• Jede Nummer prüfen, die eine Website als Nachweis zeigt.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

Kunden-Website, mit Namen gezeigt. Nach dem Start wurden Bilder und Schriften verkleinert, ohne das Design zu ändern; die Werte der neuen Website sind an dieser verkleinerten Version gemessen, auf einem lokalen Server und mit denselben Einstellungen wie bei der alten Website. 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; die Kisten tragen den Namen des Ladens, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Öffnungszeiten und die drei Kundenzitate stammen von der alten Website.