Websites
Wynelle Daily Grocery: Redesign eines Lebensmittelladens
Ein komplettes Redesign für einen Quartierladen auf den Philippinen, rund um eine alte Küchenwaage: Obst und Gemüse auf grünem Email, kräftige schmale Titel und eine funktionierende Skala, deren Zeiger der Warenkorbsumme folgt. Die neue Startseite lädt ausserdem 0.77 MB statt 30.12 MB.
- Kontext
- Wynelle Daily Grocery, ein Quartierladen in Lipa City, Batangas, 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 grünen Verlaufskarte mit Logo wurde eine warme Küchenszene: ein kräftiger schmaler Titel neben Tomaten, Mangos und Auberginen auf einer grünen Emailwaage.
Rechtliche Hinweise
Aus hellen Karten wurde ein hellgrünes Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Das alte Handy-Layout war auf einem 390 px breiten Bildschirm 780 px breit. Jetzt passen Titel, zwei Knöpfe und die Waage auf den Bildschirm, der Warenkorb bleibt immer im Kopfbereich.
Überblick
Wynelle Daily Grocery verkauft in Lipa City, Batangas, frische Produkte, Vorräte und Haushaltsartikel. Die neue Website nimmt ihre Idee vom vertrautesten Gegenstand auf jedem Markt: der Waage.
Das Problem
Die alte Startseite lud bei jedem Besuch 30.12 MB, davon 29.75 MB Bilder, was bei simulierten 10 Mbit/s 24.4 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, Schriften und Icons kamen von drei externen Hosts, und die Produktfotos zeigten Marken Dritter.
Die Lösung
Ein Neubau ohne Framework in Salbeigrün, Creme und Dunkelgrün mit einer kräftigen, schmalen Titelschrift. Jedes Produkt steht auf derselben Emailwaage, eine funktionierende Skala im Shop bewegt ihren Zeiger mit der Warenkorbsumme, und die Bestellübersicht heisst «On the scale». 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, die Warenkorb-Skala entwickelt, Warenkorb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Eine funktionierende Skala im Shop: Ihr Zeiger folgt der Warenkorbsumme
- Zehn Produkte, jedes auf derselben alten Waage fotografiert
- Produkt-Stillleben mit neutraler Verpackung statt Fotos mit Fremdmarken
- Bestellübersicht mit dem Titel «On the scale»
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- 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
- Hinweis im Shop, dass die Fotos Illustrationen sind und von der Lieferung abweichen können
- Änderungen im Warenkorb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Ein Konzept, das etwas tut
Die Waage ist nicht nur Dekoration. Die Skala im Shop ist echte Bedienoberfläche: Sobald Produkte in den Warenkorb kommen, bewegt sich der Zeiger mit der Summe, das Konzept ist also zugleich Rückmeldung.
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.
Eigene Bilder statt Fremdmarken
Die alten Produktfotos zeigten Verpackungen anderer Marken. Die neuen Stillleben verwenden neutrale Verpackungen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. So suggeriert die Seite keine Produkte mehr, über die das Geschäft nicht verfügt.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 30.12 → 0.77 MB
- Beim Laden am Handy
- 30.12 → 0.65 MB
- Nach Scrollen der ganzen Seite
- 30.12 → 1.32 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 24.4 → 0.60 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Shop
- 10
Ergebnisse
- Live unter wynellefresh.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.77 MB statt 30.12 MB, am Handy 0.65 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Das beste Konzept funktioniert zugleich als Bedienoberfläche.
- Ein wiederholter Gegenstand lässt ein kleines Sortiment einheitlich wirken.
- 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 und ohne Personen, und die alte Waage ist ein visuelles Konzept; die Website weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Angebote und Kundenzitate auf der Website stammen von der alten Website. In den Screenshots der alten Startseite sind eine genaue Adresse und ein Personenname unkenntlich gemacht; das alte Produktraster wird nicht gezeigt, weil es Marken Dritter abbildete.
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.