Anelisse Radiant House: Redesign eines Ladens für den Alltagsbedarf

Anelisse Radiant House verkauft in San Dionisio, Parañaque, Vorräte, Hygieneartikel, Putzmittel und Babybedarf. Die neue Website beginnt dort, wo die meisten Einkäufe beginnen: beim Zettel am Kühlschrank.

Die alte Startseite lud bei jedem Besuch 59.26 MB, was bei simulierten 10 Mbit/s 47.4 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, der Text lief über ein grosses Wasserzeichen, und Schriften, Icons und eine Kartensuche ohne markierten Standort kamen von sechs externen Hosts. Ausserdem warb sie mit Wochenangeboten und einer «vertrauenswürdigen Marke», die der Laden nicht bestätigt hatte.

Ein Neubau ohne Framework in hellem Salbei, Koralle und Leuchtstift-Gelb, mit einer runden serifenlosen Schrift und einer Handschrift. Die Seite ist eine Kühlschranktür; der Shop ist ein linierter Notizblock mit dem Titel «Listahan ng bilihin», gehalten von Magneten in Form von Kreis, Haus und Funkeln aus dem Logo. Produktnamen sind handgeschriebene Listeneinträge, und beim Hinzufügen erscheinen ein korallenroter Haken und ein Leuchtstiftstrich. Der Warenkorb ist die vom Block abgerissene Liste. 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, den Notizblock-Shop und seine Haken-Animation entwickelt, Warenkorb und Bestellseite neu aufgebaut, unbestätigte Angebote und die leere Karte entfernt und die alte und neue Version mit demselben Skript gemessen.

• Shop als linierter Notizblock an einer Kühlschranktür, gehalten von Magneten aus dem Logo
• Handgeschriebene Produktnamen; beim Hinzufügen erscheinen ein korallenroter Haken und ein Leuchtstiftstrich
• Warenkorb als vom Block abgerissene Liste
• Fünfzehn Produkte in vier Gruppen, etwa Vorräte und Putzmittel
• Produktbilder mit erfundenen Markennamen, ohne echte Marken
• Wochenangebote, «vertrauenswürdige Marke», zusätzliche Registrierungsangaben und eine leere Karteneinbettung entfernt
• Bezahlung wie in den alten FAQ: GCash oder Überweisung bei Lieferung, bar im Laden; Lieferung am selben Tag für Bestellungen vor 13 Uhr beibehalten
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Bestand, Lieferung und Summe
• Die beiden ursprünglichen Kundenzitate wörtlich übernommen

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

Gewicht der Startseite beim Laden

59.26 → 0.57 MB

Beim Laden am Handy

58.78 → 0.41 MB

Nach Scrollen der ganzen Seite

59.47 → 0.76 MB

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

47.4 → 0.53 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter anelisseradiant.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.57 MB statt 59.26 MB, am Handy 0.41 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.
• Wenn sich zwei Seiten einer alten Website widersprechen, eine wählen und das offen sagen.
• 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 Produkt- und Szenenbilder sind generierte Illustrationen mit erfundenen Markennamen und ohne Personen, worauf der Shop hinweist; eine erfundene Hausnummer auf dem Ladenbild wurde entfernt. Produkttexte, Lieferbedingungen und die beiden Kundenzitate stammen von der alten Website. In den Screenshots der alten Startseite und im neuen Handy-Menü sind Strassenadresse, Telefonnummer und E-Mail unkenntlich gemacht.