Websites
Divinel Grocery Haven: Redesign eines Lebensmittelladens
Ein komplettes Redesign für einen Quartierladen auf den Philippinen, das durch einen ganzen Tag führt, vom Frühstück bei Sonnenaufgang bis zum Abendessen in der Nacht. Die neue Startseite lädt ausserdem 0.78 MB statt 147.33 MB.
- Kontext
- Divinel Grocery Haven, ein Lebensmittelladen im Quartier 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 violetten Verlaufskarte wurde ein Sonnenaufgang: «Good morning, Las Piñas.» in kräftiger Schrift über einem orangen Himmel, mit einer reifen Mango im Morgenlicht.
Produkte
Aus einem langen Kartenraster wurde ein Tag in vier Kapiteln: Frühstück um 8 Uhr, Mittagessen um 12 Uhr, Merienda um 15 Uhr und Abendessen um 19 Uhr, jedes mit eigenem Himmel und eigenen Produkten.
Rechtliche Hinweise
Aus weissen Karten wurde ein tiefviolettes Band mit kräftigen Titeln und einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Der Sonnenaufgang bleibt auch auf dem hohen Bildschirm das Erste, mit Titel, zwei breiten Knöpfen und der Mango darunter.
Überblick
Divinel Grocery Haven ist ein Lebensmittelladen im Quartier in Las Piñas. Die neue Website erzählt das Sortiment als Geschichte, die jeder philippinische Haushalt kennt: was man für Almusal, Tanghalian, Merienda und das Abendessen einkauft.
Das Problem
Die alte Startseite lud bei jedem Besuch 147.33 MB, davon 146.98 MB Bilder, was bei simulierten 10 Mbit/s 118.7 Sekunden dauerte. Die Produkte standen in einem langen Raster, ohne Bezug dazu, wann oder wofür man sie braucht.
Die Lösung
Ein Neubau ohne Framework, aufgebaut als ein Tag im Laden. Beim Scrollen wandert der Himmel vom Sonnenaufgang in die Nacht, und eine kleine Uhr in der Kopfzeile folgt der Tageszeit. 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, Warenkorb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Fünfzehn Produkte in vier Tageszeit-Kapiteln: Almusal, Tanghalian, Merienda und Gabi
- Himmelsfarben, die beim Scrollen vom Sonnenaufgang in die Nacht wechseln
- Uhr in der Kopfzeile, die die Zeit des sichtbaren Kapitels zeigt
- Sprunglinks zu jedem Kapitel und ein eigener Bereich für Grossbestellungen
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Geschäft bestätigt zuerst Artikel und Lieferung
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Eine Geschichte, die trotzdem verkauft
Die Idee eines Tagesablaufs sollte ein Laden bleiben und keine Diashow werden. Jedes Kapitel beginnt mit einer kurzen Zeile zum Moment und führt direkt zu Produkten mit Preis und Knopf zum Hinzufügen.
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.
Von der schwersten Seite auf 0.78 MB
Mit 147.33 MB war die alte Startseite die schwerste in dieser Reihe von Redesigns. Komprimierte Bilder, ein eigenes Titelbild fürs Handy und Bilder, die erst beim Scrollen laden, bringen die Startseite auf 0.78 MB beim Laden, am Handy auf 0.68 MB.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 147.33 → 0.78 MB
- Beim Laden am Handy
- 147.32 → 0.68 MB
- Nach Scrollen der ganzen Seite
- 147.33 → 1.26 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 118.7 → 0.56 s
- Fremde Hosts auf der Startseite
- 3 → 0
- Produkte im Katalog
- 15
Ergebnisse
- Live unter divinelfresh.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.78 MB statt 147.33 MB, am Handy 0.68 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Ein vertrauter Tagesrhythmus kann einen Katalog besser ordnen als Kategorien.
- Kleine Details wie eine Uhr in der Kopfzeile machen ein Konzept lebendig.
- 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. Produktnamen, Preise und Beschreibungen stammen vom Geschäft selbst.
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.