Websites
Jedira Style Boutique: Redesign einer Boutique
Ein komplettes Redesign für eine Modeboutique auf den Philippinen, gebaut wie ein Stoffmusterbuch: Schwarz und Gold aus dem Logo auf Elfenbeinpapier, ein Fächer aus Musterstreifen im ersten Bildschirm, der zu Farbfiltern führt, und Produktkarten, die wie Stoffmuster mit Zackenkante zugeschnitten sind. Die neue Startseite lädt ausserdem 0.80 MB statt 65.44 MB.
- Kontext
- Jedira Style Boutique, eine Modeboutique in Talon Uno, Las Piñas 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 korallenfarbenen Verlaufskarte mit schwer lesbarem hellem Text wurde ein erster Bildschirm in Schwarz und Gold: ein grosser Serifen-Titel mit «your statement.» in Gold, daneben ein Fächer aus Musterstreifen an einer goldenen Niete.


Auf dem Handy
Das alte Handy-Layout war auf einem 390 px breiten Bildschirm 780 px breit, mit hellem Text auf einer Korallenkarte. Jetzt passen Titel, Knöpfe und Musterfächer auf den Bildschirm.


Überblick
Jedira Style Boutique verkauft in Talon Uno, Las Piñas City, Freizeitmode und auffällige Stücke für Frauen, Männer und Kinder. Die neue Website leiht sich das Werkzeug, mit dem jede Schneiderin und jeder Schneider Stoffe auswählt: das Musterbuch.
Das Problem
Die alte Startseite lud bei jedem Besuch 65.44 MB, was bei simulierten 10 Mbit/s 52.4 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, viel Text stand hell auf Koralle, die Seite forderte Bilder an, die es nicht gab, und lud Schriften, Icons und eine eingebettete Karte von sechs externen Hosts. Ausserdem behauptete sie eine Mehrwertsteuer-Registrierung, die niemand bestätigt hatte.
Die Lösung
Ein Neubau ohne Framework in Schwarz und Gold aus dem Logo auf Elfenbein- und Cremepapier, mit einer kontrastreichen Serifenschrift, einer breiten Titelschrift und einer klaren serifenlosen Schrift. Im ersten Bildschirm dreht sich ein Fächer aus Musterstreifen um eine goldene Niete, und jeder Streifen (Neutral, Blue, Jewel, Print) führt zu einem Farbfilter. Die Produktkarten sind Musterseiten mit Zackenkante, gestanztem Loch und goldener Indexnummer. Farbchips und Kategorie-Reiter filtern das Sortiment, mit laufender Anzeige der passenden Stücke. 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, Musterfächer sowie Farb- und Kategoriefilter entwickelt, Warenkorb und Bestellseite neu aufgebaut, die unbestätigte Steuerangabe entfernt und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Fächer aus Musterstreifen im ersten Bildschirm, jeder führt zu einem Farbfilter
- Produktkarten wie Stoffmuster zugeschnitten, mit Zackenkante, gestanztem Loch und goldener Indexnummer
- Farbchips und Kategorie-Reiter mit laufender Anzeige der Treffer, per Tastatur und Screenreader bedienbar
- Fünfzehn Stücke für Frauen, Männer, Kinder und Teens
- Etiketten und Anhänger aus dem eigenen Logo der Boutique, ohne Marken Dritter
- Unbestätigte Mehrwertsteuer-Angabe entfernt, nur noch die Steuernummer wird gezeigt
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Grösse, Verfügbarkeit und Lieferung
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Die drei ursprünglichen Kundenzitate wörtlich übernommen, auch auf Taglish
Technische Herausforderungen
Ein Konzept, das etwas tut
Der Musterfächer ist nicht nur Dekoration. Jeder Streifen ist ein Einstieg in den Farbfilter des Shops, die Farbwahl fühlt sich also an wie Blättern in Stoffmustern.
Gleiche Stadt, gleiches Sortiment, anderer Laden
Ein anderes Modegeschäft in derselben Stadt wurde im selben Zeitraum neu gestaltet. Damit jede Marke eigenständig bleibt, verzichtet diese ganz auf Bügel, Stangen und Skizzen und baut auf Stoffmustern, Schwarz und Gold auf.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 65.44 → 0.80 MB
- Beim Laden am Handy
- 65.00 → 0.59 MB
- Nach Scrollen der ganzen Seite
- 66.09 → 0.94 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 52.4 → 0.63 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Shop
- 15
Ergebnisse
- Live unter jediraboutique.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.80 MB statt 65.44 MB, am Handy 0.59 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.
Erkenntnisse
- Das beste Konzept funktioniert zugleich als Bedienoberfläche.
- Zwei Läden derselben Branche verdienen zwei verschiedene Ideen.
- 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 ohne Personen; die Kleider tragen Etiketten und Anhänger aus dem eigenen Logo der Boutique, ohne Marken Dritter, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Öffnungszeiten und die drei Kundenzitate stammen von der alten Website. Im Screenshot der alten Startseite ist der Name der Gründerin oder des Gründers unkenntlich gemacht.
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.