Websites
Jamirel Family Grocery: Redesign einer Boutique
Ein komplettes Redesign für eine Damenmode-Boutique auf den Philippinen, gestaltet als alter Familienladen: mintgrüne Regale, Kleider als Ware des Tages und eine Bestellübersicht im Stil eines Kassenbons. Die neue Startseite lädt ausserdem 0.88 MB statt 78.94 MB.
- Kontext
- Jamirel Family Grocery, eine Boutique für Damenmode und Accessoires 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 pfirsichfarbenen Willkommenskarte wurde ein Ladenschaufenster: ein kräftiger Titel auf Tagalog, «Bawat damit may kwento» (jedes Kleid hat eine Geschichte), auf tiefem Grün über einer Reihe mintgrüner Regale mit einem ausgestellten Kleid.
Shop
Aus einem Raster kleiner Produktkarten wurde «Today's stock»: Kleider in grünen Regalschränken, gruppiert nach Anlass, Alltag und dem letzten Schliff.
Rechtliche Hinweise
Aus hellen Karten wurde ein grünes Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Titel, zwei breite Knöpfe und die Regalszene passen auf den ersten Bildschirm, der Korb bleibt immer im Kopfbereich.
Überblick
Jamirel Family Grocery ist eine Boutique für Damenmode und Accessoires in Parañaque City. Der Name klingt nach Lebensmittelladen, und die neue Website greift das auf: ein freundlicher alter Familienladen, in dem die Kleider die Ware des Tages sind.
Das Problem
Die alte Startseite lud bei jedem Besuch 78.94 MB, davon 78.60 MB Bilder, was bei simulierten 10 Mbit/s 63.6 Sekunden dauerte. Schriften und Icons kamen von drei externen Hosts, und die Kartenvorlage nutzte den Charakter nicht, der schon im Namen des Ladens steckt.
Die Lösung
Ein Neubau ohne Framework in tiefem Grün, Mint und Creme mit einer kräftigen Titelschrift und Details im Schreibmaschinenstil. Die Produkte stehen in Regalschränken in drei Gruppen, die Kundenzitate kommen von Stammkundschaft, die FAQ werden zu Fragen an der Theke, und die Bestellübersicht erscheint als Kassenbon. 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, Korb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Fünfzehn Produkte in drei Regalen: für besondere Anlässe, für jeden Tag und für den letzten Schliff
- Produktbilder in mintgrünen Regalschränken, wie Ware in einem Familienladen
- Korb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellübersicht im Stil eines gedruckten Kassenbons
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Grösse, Farbe und Verfügbarkeit
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis im Shop, dass die Fotos Illustrationen sind und vom Teil abweichen können
- Änderungen im Korb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Ein Lebensmittelname für eine Boutique
Der Name sagt Lebensmittelladen, verkauft werden aber Kleider. Statt das zu verstecken, macht das Design es zum Konzept: ein alter Familienladen, in dessen Regalen Kleider stehen, sodass Name und Sortiment zusammenpassen.
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 Grösse und Verfügbarkeit bestätigt.
Illustrationen ohne Gesichter
Die Bilder sind generiert und sollen deshalb nicht wie echte Kundschaft oder echtes Personal wirken. Models sind ohne Gesicht abgebildet, Kleider stehen auf Ständern, und der Shop weist darauf hin, dass es Illustrationen sind.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 78.94 → 0.88 MB
- Beim Laden am Handy
- 78.94 → 0.69 MB
- Nach Scrollen der ganzen Seite
- 78.94 → 1.08 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 63.6 → 0.62 s
- Drittanbieter-Hosts beim Laden
- 3 → 0
- Produkte im Shop
- 15
Ergebnisse
- Live unter jamirelfamily.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.88 MB statt 78.94 MB, am Handy 0.69 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Ein Name, der scheinbar nicht zum Produkt passt, kann zum Konzept werden.
- Ware nach Anlass zu gruppieren ist leichter zu durchstöbern als ein langes Raster.
- 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, Models sind ohne Gesicht abgebildet, worauf die Website hinweist. Die Kundenzitate auf der Website stammen von der alten Website.
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.