Websites
Jinkara Retail Outlet: Redesign eines Quartierladens
Ein komplettes Redesign für einen Quartierladen auf den Philippinen mit Streetwear-Haltung: Schwarz und Elektroblau, ein Titelbild, das sich beim Laden öffnet wie ein Reissverschluss, und Produkte als Drop. Die neue Startseite lädt ausserdem 0.69 MB statt 106.44 MB.
- Kontext
- Jinkara Retail Outlet, ein Quartierladen in Parañaque City, 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 hellblauen Willkommenskarte wurde ein schwarzes Plakat: «Everyday, unzipped.» in kräftiger Schrift neben einer Tasche, die sich über den Lebensmitteln öffnet, darunter ein Laufband in Elektroblau.
Produkte
Aus einem Raster heller Karten wurde «The drop»: Produkte auf Schwarz, präsentiert wie ein Streetwear-Release, mit Preis und Knopf zum Hinzufügen bei jedem Artikel.
Rechtliche Hinweise
Aus hellen Karten wurde ein schwarzes Band mit kräftigen Titeln und einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Titel und zwei breite Knöpfe stehen auf dem hohen Bildschirm zuerst, direkt darunter die geöffnete Tasche.
Überblick
Jinkara Retail Outlet ist ein Quartierladen in Parañaque City, der Alltagsartikel und Spezialitäten verkauft. Die neue Website gibt einer gewöhnlichen Besorgung Haltung und übernimmt den Look von Streetwear-Drops, damit sich der Einkauf zeitgemäss anfühlt.
Das Problem
Die alte Startseite lud bei jedem Besuch 106.44 MB, davon 106.06 MB Bilder, was bei simulierten 10 Mbit/s 85.8 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und die blasse Kartenvorlage gab dem Laden keine klare Identität.
Die Lösung
Ein Neubau ohne Framework rund um eine Idee: Alltägliches, ausgepackt. Das Titelbild öffnet sich beim Laden wie ein Reissverschluss, darunter läuft ein Band mit den Versprechen des Ladens, und der Katalog ist als Drop gestaltet. 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
- Titelbild, das sich beim Laden wie ein Reissverschluss öffnet, mit Unterstützung für reduzierte Bewegung
- Laufband mit den Versprechen des Ladens unter dem Titelbild
- Fünfzehn Produkte, gestaltet als Streetwear-Drop auf Schwarz
- Eigene Bereiche zu Lieferung und Geschichte mit nächtlichen Bildern
- 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
- Tastaturbedienung im Warenkorb und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Haltung, ohne den Laden zu verlieren
Ein Streetwear-Look kann leicht verdecken, was eigentlich verkauft wird. Jedes Produkt zeigt weiterhin Name, Preis, Bestand und einen Knopf zum Hinzufügen, und der erste Satz sagt klar, was der Laden verkauft und wo.
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 dunkle, bildstarke Seite, die leicht bleibt
Grosse Fotos auf Schwarz werden schnell schwer. Komprimierte Bilder, ein eigenes Titelbild fürs Handy und Bilder, die erst beim Scrollen laden, halten die Startseite am Handy bei 0.61 MB beim Laden und 0.98 MB nach vollständigem Scrollen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 106.44 → 0.69 MB
- Beim Laden am Handy
- 106.43 → 0.61 MB
- Nach Scrollen der ganzen Seite
- 106.44 → 1.00 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 85.8 → 0.50 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Katalog
- 15
Ergebnisse
- Live unter jinkarastore.site.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.69 MB statt 106.44 MB, am Handy 0.61 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Ein starkes Verb im Titel kann eine ganze visuelle Idee tragen.
- Ein Look aus einer anderen Branche kann einen alltäglichen Laden hervorheben.
- 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. Im Screenshot der alten Startseite ist der Name der Gründerin oder des Gründers 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.