Websites
Serenique Interior Haven: Redesign eines Möbelgeschäfts
Ein komplettes Redesign für ein Möbelgeschäft auf den Philippinen, inspiriert von handgemalten philippinischen Ladenschildern. Die neue Startseite lädt ausserdem 1.23 MB statt 47.49 MB.
- Kontext
- Serenique Interior Haven, ein Geschäft für Wohnmöbel und Einrichtungsberatung mit Showroom in Cavite 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 einem blassen, textlastigen ersten Bildschirm wurde eine handgemalte Ladentafel: goldener Titel auf Emailgrün, zwei gleichwertige Knöpfe für Einkauf und Beratung und ein warmes Raumbild.
Produktkarte
Aus kleinen, zentrierten Vorschaubildern wurden grosse gerahmte Tafeln mit Raumbild, kräftigem Preisschild und klarem Knopf. Die neuen Bilder passen ausserdem zu jedem Produktnamen.
Rechtliche Hinweise
Aus drei schlichten Karten wurde ein ruhiges Band in Grün und Gold, mit einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Das Handy-Layout ist für die Bedienung mit einem Daumen gemacht: grosser Titel, zwei breite Knöpfe und direkt darunter das Raumbild.
Überblick
Serenique Interior Haven verkauft Möbel und Dekoration und bietet in seinem Showroom in Cavite City kostenlose Einrichtungsberatung an. Die Website muss zwei Arten von Besuchern gleich gut bedienen: Menschen, die ein bestimmtes Stück kaufen möchten, und solche, die Hilfe bei der Gestaltung eines Raums suchen.
Das Problem
Die alte Startseite lud bei jedem Besuch 47.49 MB, davon 47.12 MB Bilder, was bei simulierten 10 Mbit/s 38.3 Sekunden dauerte. Vier der sieben Produkte zeigten ein Bild von etwas anderem, auf den Karten zu den Rechtstexten stand Platzhaltertext, der Link zur Rückgabe war wegen eines Tippfehlers im Dateinamen tot, und das Handy-Layout war doppelt so breit wie der Bildschirm.
Die Lösung
Ein Neubau ohne Framework, dessen Identität von handgemalten philippinischen Ladenschildern inspiriert ist: Tafeln in Emailgrün, Gold und Ochsenblutrot statt der üblichen cremefarbenen Möbelvorlage. Die Preise stehen gross bei jedem Stück, Einkauf und Beratung erhalten auf dem ersten Bildschirm gleich viel Platz, 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, den Bestellablauf neu geschrieben und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Sieben Produkte mit passendem Raumbild und einem Knopf «Look closer», der zur Materialansicht wechselt
- Warenkorb mit Mengensteuerung, der auf dem Handy innerhalb des Bildschirms bleibt und seinen Inhalt zwischen den Seiten behält
- Bestellseite mit Prüfung jedes Felds, einschliesslich philippinischer Handynummern
- Bestellung als vorausgefüllte E-Mail, die Zahlung wird erst nach der Bestätigung durch das Geschäft vereinbart
- Eigenes Titelbild für Handys; Bilder weiter unten laden erst beim Scrollen
- Schriften werden mit der Website ausgeliefert, sodass die Startseite ohne Anfragen an Dritte auskommt
- Seiten zu Datenschutz, Bedingungen und Rückgabe, alle erreichbar und korrekt verlinkt
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ FurnitureStore
Technische Herausforderungen
Ehrlich mit den Bildern umgehen
Das Geschäft hat keine Fotos von Showroom oder Lagerbestand, deshalb sind die neuen Bilder generierte Illustrationen. Die Website sagt das direkt über den Produkten und verspricht, das genaue Produkt und die Farbe vor der Zahlung zu bestätigen.
Ein echter Bestellablauf ohne Backend
Die Website ist statisch, auf einem Server wird also nichts gespeichert. Die Bestellseite prüft die Angaben, erstellt daraus eine vollständige Bestellung als vorausgefüllte E-Mail und erklärt den nächsten Schritt: Zuerst bestätigt das Team, danach folgt die Zahlung.
Fair vergleichen
Ein Skript nahm beide Versionen mit demselben Browser, denselben Bildschirmgrössen und denselben Schritten auf und protokolliert seine Ergebnisse selbst. Lokale Ladezeiten spiegeln vor allem den Testrechner wider, deshalb stützt sich der Vergleich auf die übertragene Datenmenge und eine simulierte Verbindung.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 47.49 → 1.23 MB
- Nach Scrollen der ganzen Seite
- 47.49 → 2.04 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 38.3 → 0.65 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Fehlgeschlagene Anfragen der Startseite
- 1 → 0
- Produkte mit passendem Bild
- 3 → 7 von 7
Ergebnisse
- Live unter sereniquehaven.site.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.23 MB statt 47.49 MB, am Handy 0.90 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Jedes Produktbild mit seinem Namen abgleichen. Die Kundschaft tut es auch.
- Das Bildgewicht ist bei der Website eines kleinen Geschäfts meist der schnellste Hebel für mehr Tempo.
- Wenn Bilder Illustrationen sind, gehört das auf die Seite.
Zu dieser Fallstudie
Kunden-Website, mit Namen gezeigt. Die Messwerte stammen aus einem Aufnahmeskript, das mit identischen Einstellungen 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 Raumbilder sind generierte Illustrationen, worauf die Live-Website hinweist. Im Screenshot der alten Startseite ist die Steuernummer 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.