Websites
Gracira Daily Avenue: Redesign eines Supermarkts
Ein komplettes Redesign für einen Quartier-Supermarkt auf den Philippinen, gestaltet als Tageszeitung mit datiertem Zeitungskopf, Marktbericht und Leserbriefen aus der Nachbarschaft. Die neue Startseite lädt ausserdem 1.10 MB statt 73.42 MB.
- Kontext
- Gracira Daily Avenue, ein Quartier-Supermarkt in Las Piñas, Philippinen.
- Meine Rolle
- Design, Frontend-Entwicklung und Bildproduktion
- Jahr
- 2026
Mein Redesign: vorher und nachher
Die alte Website neben meinem Design, in derselben Bildschirmgrösse.
Startseite
Aus einer türkisen Willkommenskarte wurde eine Titelseite: ein Zeitungskopf mit dem heutigen Datum, ein schmaler Titel, eine Pyramide aus Lebensmitteln auf kariertem Boden und eine Seitenspalte wie eine Zeitungsnotiz.
Produkte
Aus Reihen kleiner Karten wurde der «Market report»: gestrichelt umrandete Ausschnitte auf Türkis, jeder mit grossem rotem Preis, Bestand und Knopf zum Hinzufügen.
Rechtliche Hinweise
Aus hellen Karten wurden Spalten auf Zeitungspapier, getrennt durch feine Linien, mit einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Der Zeitungskopf wird kleiner, darauf folgen Titel und zwei breite Knöpfe, wie auf der Titelseite einer Taschenausgabe.
Überblick
Gracira Daily Avenue ist ein Quartier-Supermarkt in Las Piñas. Der Name enthielt die Idee bereits: Die neue Website liest sich wie eine lokale Tageszeitung, mit den Angeboten des Tages als Nachrichten.
Das Problem
Die alte Startseite lud bei jedem Besuch 73.42 MB, davon 73.05 MB Bilder, was bei simulierten 10 Mbit/s 59.2 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und die Kartenvorlage nutzte den Charakter nicht, der schon im Namen des Ladens steckt.
Die Lösung
Ein Neubau ohne Framework im Layout einer Zeitung: ein Zeitungskopf mit dem heutigen Datum, schmale Titel, ein Marktbericht als Katalog, Leserbriefe aus der Nachbarschaft und Notizen als FAQ. 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.
Screenshots
Aufgenommen an der echten, live geschalteten Website.
Mein Beitrag
Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, Einkaufsliste und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Zeitungskopf, der bei jedem Besuch das aktuelle Datum zeigt
- Fünfzehn Produkte in einem «Market report» aus gestrichelt umrandeten Ausschnitten
- Warenkorb als «My shopping list», mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bereiche mit Zeitungsnamen: Leserbriefe aus der Nachbarschaft, Notizen und eine Seitenspalte für telefonische Bestellungen
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Artikel und Lieferung
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Bildunterschrift beim Titelbild, die klarstellt, dass es eine Illustration und kein Foto des Ladens ist
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Eine Zeitung, die trotzdem ein Laden ist
Die Zeitungsmetapher sollte das Einkaufen erleichtern und nicht bremsen. Jeder Ausschnitt im Marktbericht zeigt Preis, Bestand und Knopf immer an derselben Stelle, sodass sich der Katalog so leicht überfliegen lässt wie ein normales Raster.
Bestellen ohne Backend
Die Website ist statisch und kann deshalb selbst keine Bestellung auslösen. Die Bestellseite prüft die Angaben und öffnet eine vollständige, vorausgefüllte E-Mail, die die Kundschaft abschickt. Sie erklärt auch, dass das Team zuerst bestätigt.
Ein dichtes Layout, das leicht bleibt
Zeitungslayouts sind dicht und bildreich. Komprimierte Bilder, ein eigenes Titelbild fürs Handy und Bilder, die erst beim Scrollen laden, halten die Startseite am Handy bei 0.68 MB beim Laden und 1.18 MB nach vollständigem Scrollen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 73.42 → 1.10 MB
- Beim Laden am Handy
- 73.42 → 0.68 MB
- Nach Scrollen der ganzen Seite
- 73.42 → 1.26 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 59.2 → 0.69 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Katalog
- 15
Ergebnisse
- Live unter graciradaily.shop.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.10 MB statt 73.42 MB, am Handy 0.68 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Manchmal steckt die Designidee schon im Namen des Kunden.
- Den Warenkorb passend zum Konzept umzubenennen ist ein kleines Detail, das auffällt.
- Wenn Bilder Illustrationen sind, gehört das auf die Seite.
Zu dieser Fallstudie
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, worauf die Website hinweist. Die Kundenzitate auf der Website stammen von der alten Website.
Planen Sie eine neue Website, oder ist Ihre heutige zu langsam?
Beschreiben Sie Ihr Vorhaben in ein paar Sätzen. Innerhalb von zwei Arbeitstagen erhalten Sie Rückfragen, einen groben Lösungsansatz und eine Preisspanne in CHF.