Websites
Cecyra Retail Market: Redesign eines Lebensmittelladens
Ein komplettes Redesign für einen Quartierladen auf den Philippinen, gestaltet wie ein Marktstand mit kräftigen Farbflächen und Preisschildern aus Papier. Die neue Startseite lädt ausserdem 1.18 MB statt 90.70 MB.
- Kontext
- Cecyra Retail Market, 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 Logo und Adresse auf blassem Grün wurde ein Plakat: hohe Blockschrift auf Marktgrün, eine Bayong-Tasche voller Lebensmittel auf Gelb und je ein Knopf zum Einkaufen und Anrufen.
Produktkatalog
Aus Reihen kleiner weisser Karten wurde eine Wand aus Farbflächen, mit Kacheln in verschiedenen Grössen, Preisschildern aus Papier und einem einheitlichen illustrierten Bildersatz.
Rechtliche Hinweise
Aus blassen Karten wurde ein dunkles Band in Pflaumenviolett mit goldenen Titeln und einem Link zu jedem vollständigen Text.
Auf dem Handy
Titel und beide Knöpfe stehen zuerst, in grossen, gut erreichbaren Flächen, direkt darunter folgen die Lebensmittel.
Überblick
Cecyra Retail Market ist ein Lebensmittelladen im Quartier in Las Piñas, der frische Produkte, Vorräte und Haushaltsartikel verkauft. Die Website soll sich anfühlen wie der Laden: schnell erfassbar, klar bei den Preisen und auf dem Handy einfach zu bedienen.
Das Problem
Die alte Startseite lud bei jedem Besuch 90.70 MB, davon 90.36 MB Bilder, was bei simulierten 10 Mbit/s 73.1 Sekunden dauerte. Die Produktfotos passten nicht zueinander, auf den Karten zu den Rechtstexten stand Platzhaltertext, und blassgrüner Text auf hellem Grund gab der Seite wenig Präsenz.
Die Lösung
Ein Neubau ohne Framework im Stil eines philippinischen Marktstands: satte Farbflächen, hohe Plakat-Titel und handgeschriebene Preisschilder. 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
- Zehn Produkte auf Farbflächen, jedes mit Preisschild und vergrösserbarem Bild
- Warenkorb («My bayong», nach der philippinischen geflochtenen Markttasche) mit Mengensteuerung bei jedem Produkt und in der Seitenleiste
- Bestellseite mit Prüfung der Felder, einschliesslich philippinischer Handynummern
- Wahl zwischen Lieferung und Abholung im Laden, mit den jeweils passenden Feldern
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Geschäft bestätigt vor der Zahlung
- Eigenes Titelbild für Handys; Bilder weiter unten laden erst beim Scrollen
- Seiten zu Datenschutz, Bedingungen und Rückgabe, verlinkt aus dem Bereich mit den Rechtstexten
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Produkte zeigen, ohne Lagerbestand zu behaupten
Die Bilder sind generierte Illustrationen mit bewusst neutraler Verpackung und keine Fotos der Ware im Laden. Die Website sagt das über dem Katalog und ergänzt, dass die Verpackung abweichen kann und die Bestellung zuerst bestätigt wird.
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 erst nach der Bestätigung durch den Laden bezahlt wird.
Ein lautes Design, das schnell bleibt
Vollfarbige Bildkacheln hätten das alte Gewichtsproblem leicht zurückbringen können. Der erste Bildschirm lädt nur, was er zeigt. Auf dem Handy startet die Startseite deshalb bei 0.47 MB und erreicht nach vollständigem Scrollen 1.18 MB.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 90.70 → 1.18 MB
- Beim Laden am Handy
- 90.69 → 0.47 MB
- Nach Scrollen der ganzen Seite
- 90.70 → 1.22 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 73.1 → 0.67 s
- Fremde Hosts auf der Startseite
- 3 → 0
- Produkte im Katalog
- 10
Ergebnisse
- Live unter cecyrashop.online.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.18 MB statt 90.70 MB, am Handy 0.47 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Die Website eines Lebensmittelladens soll sich wie ein belebter Laden anfühlen, nicht wie eine Broschüre.
- Ein einheitlicher Bildersatz schafft mehr Vertrauen als ein einzelnes gutes Foto.
- 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 mit denselben Einstellungen 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 neutraler Verpackung, worauf die Website hinweist. In den alten Screenshots sind der Name der Inhaberin oder des Inhabers und die Adresse abgedeckt.
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.