Websites
Joymera Retail Market: Redesign eines Quartiermarkts
Ein komplettes Redesign für einen Quartiermarkt auf den Philippinen, aufgebaut aus bemaltem Holz, gelben Tischen und dem Taschen-Maskottchen des Ladens. Die neue Startseite lädt ausserdem 1.44 MB statt 42.90 MB.
- Kontext
- Joymera Retail Market, ein Quartiermarkt in Bacoor, Cavite, 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 einem Logo auf einer abgerundeten Karte wurde eine ganze Marktszene: ein Schrifttitel auf blau bemalten Brettern, ein Tisch voller Lebensmittel und das Maskottchen des Ladens, das von der Theke winkt.
Produkte
Aus kleinen Karten mit Vorschaubildern wurde ein Regal: Jedes Produkt steht vor derselben blauen Wand auf demselben gelben Tisch, mit einem runden roten Preisaufkleber.
Rechtliche Hinweise
Aus blassen Karten wurde ein tiefrotes Band mit Schrifttiteln und einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Das Titelbild ist für den hohen Bildschirm neu aufgebaut: zuerst der Titel, dann zwei breite Knöpfe und darunter die Lebensmittel auf dem Tisch.
Überblick
Joymera Retail Market ist ein Quartiermarkt in Bacoor, der frische Produkte, Vorräte und Haushaltsartikel verkauft. Die neue Website hat dieselbe fröhliche Persönlichkeit wie das Maskottchen des Ladens und lässt sich auf dem Handy leicht durchstöbern.
Das Problem
Die alte Startseite lud bei jedem Besuch 42.90 MB, davon 42.54 MB Bilder, was bei simulierten 10 Mbit/s 34.6 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und der Auftritt liess dem starken Maskottchen wenig Raum.
Die Lösung
Ein Neubau ohne Framework, angesiedelt in einem bemalten Markt: blaue Bretter, gelbe Tische, tiefrote Schilder und philippinische Wörter wie sariwa und sulit im Text. Die Produkte sind in vier Gänge mit mitlaufenden Reitern gegliedert, und die Bilder sind komprimierte WebP-Dateien, die erst beim Scrollen laden.
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 Gängen, mit Reitern zum Wechseln
- Das Taschen-Maskottchen des Kunden zieht sich durch die Seite, vom Titelbild bis zum Warenkorb
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellseite im Stil eines handgeschriebenen Einkaufszettels auf Notizpapier
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Geschäft bestätigt vor der Zahlung
- Schriften werden mit der Website ausgeliefert, sodass die Startseite ohne Anfragen an Dritte auskommt
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Eine Welt für alle Produkte
Fünfzehn verschiedene Artikel mussten aussehen, als stünden sie im selben Regal. Jedes generierte Bild nutzt dieselbe blaue Wand, denselben gelben Tisch und dasselbe Licht, mit neutraler Verpackung. Die Website sagt, dass die Fotos Illustrationen sind und die Artikel vor der Zahlung bestätigt werden.
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.
Eine reiche Seite, die leicht bleibt
Ein randloses Titelbild und viele Produktbilder können schnell schwer werden. Ein eigenes Titelbild fürs Handy und Bilder, die erst beim Scrollen laden, halten die Startseite am Handy bei 0.93 MB beim Laden und 1.54 MB nach vollständigem Scrollen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 42.90 → 1.44 MB
- Beim Laden am Handy
- 42.89 → 0.93 MB
- Nach Scrollen der ganzen Seite
- 42.90 → 1.60 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 34.6 → 0.74 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Katalog
- 15
Ergebnisse
- Live unter joymeramarket.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.44 MB statt 42.90 MB, am Handy 0.93 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Wenn ein Kunde bereits ein starkes Maskottchen hat, gehört es ins Zentrum des Designs.
- Ein gemeinsamer Aufbau für alle Produktbilder lässt einen kleinen Laden aufgeräumt wirken.
- Ein wenig von der Sprache der Kundschaft sagt mehr als ein Slogan.
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, worauf die Website hinweist. Das Maskottchen stammt aus dem Logo des Kunden. Im Screenshot der alten Startseite ist der Name der Inhaberin oder des Inhabers 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.