Jessara Vital Citadel: Redesign eines Ladens für den Alltagsbedarf

Jessara Vital Citadel verkauft in Pinagsama, Taguig City, Vorräte, frische Lebensmittel, Haushalts- und Pflegeprodukte. Die neue Website fühlt sich an wie der Gang in den Laden: Man folgt den Gangschildern.

Die alte Startseite lud bei jedem Besuch 67.35 MB, was bei simulierten 10 Mbit/s 54.3 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, das gelbe Zitat war kaum lesbar, und Schriften und Icons kamen von drei externen Hosts. Ausserdem nannte sie eine Registrierungsnummer, eine Steuerregion und einen eingetragenen Inhaber, die niemand bestätigt hatte, sowie «trusted»-Aussagen.

Ein Neubau ohne Framework in Hellblau, Dunkelblau und Weiss, mit einer weichen Serifenschrift und einer klaren serifenlosen Schrift. Hellblaue Gangschilder hängen an Seilen und schwingen herein, sobald ein Bereich ins Bild scrollt, von Gang 1 für Vorräte und Frisches an; über dem ersten Bildschirm hängt ein «Welcome»-Schild über einem Wegweiser. Die Produktkarten tragen Preisleisten wie am Regal, und ein gezeichneter Einkaufswagen aus dem Logo rollt über eine gestrichelte Bodenspur und zeigt, wie weit man auf der Seite ist. Weil der Laden noch nicht liefert, bestellt die Kundschaft online und holt im Laden ab, bezahlt wird an der Kasse; drei Bodenmarkierungen erklären den Ablauf. 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.

Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, die schwingenden Gangschilder und den Scroll-Einkaufswagen entwickelt, die Bestellseite für die Abholung neu aufgebaut, unbestätigte Registrierungsangaben entfernt und die alte und neue Version mit demselben Skript gemessen.

• Hängende Gangschilder, die beim Scrollen hereinschwingen
• «Welcome»-Schild über dem ersten Bildschirm und ein Wegweiser zu vier Bereichen
• Gezeichneter Einkaufswagen, der als Scrollanzeige über eine Bodenspur rollt
• Preisleisten wie am Regal auf jeder Produktkarte
• Bestellung zur Abholung mit drei Bodenmarkierungen zum Ablauf; Bezahlung an der Kasse
• Produktbilder mit erfundenen Markennamen, ohne echte Marken
• Unbestätigte Registrierungsnummer, Steuerregion, Inhaberangabe und «trusted»-Aussagen entfernt
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst
• Die beiden ursprünglichen Kundenzitate wörtlich übernommen

• HTML
• CSS
• JavaScript
• SVG
• WebP
• JSON-LD structured data

Gewicht der Startseite beim Laden

67.35 → 0.48 MB

Beim Laden am Handy

67.34 → 0.35 MB

Nach Scrollen der ganzen Seite

67.35 → 0.71 MB

Vollständig geladen (simuliert, 10 Mbit/s)

54.3 → 0.44 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter jessaravital.life.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.48 MB statt 67.35 MB, am Handy 0.35 MB.
• →Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.

• Das beste Konzept funktioniert zugleich als Bedienoberfläche.
• Den Bestellablauf danach bauen, wie der Laden die Ware wirklich übergibt.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

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 Produktbilder sind generierte Illustrationen mit erfundenen Markennamen und ohne Personen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Abholbedingungen und die beiden Kundenzitate stammen von der alten Website. Im Screenshot des neuen Handy-Menüs ist die Telefonnummer unkenntlich gemacht.