De afgelopen vier maanden hebben we een groot deel van de Culture Shock Club webshop opnieuw gebouwd. Dat leverde meer dan 500.000 gewijzigde regels op, verdeeld over toevoegingen, verwijderingen en refactors. Het resultaat: een snellere site, een duidelijkere winkelflow en handigere klantaccounts.
Belangrijkste feiten
- Vier maanden storefront-rebuild: meer dan 500,000 gewijzigde regels over toevoegingen, verwijderingen en refactors.
- Elk deel ging live zodra het klaar was, daarna verder bijschaven, geen enkele relaunch.
- Kernpagina's scoren 95 or higher in Lighthouse op mobiel en desktop.
- Focus: snellere first screen, duidelijkere homepage, quick add en search, productpagina's, doorzoekbare ordergeschiedenis.
We hebben niet alles bewaard voor één grote relaunch. Elk onderdeel ging live zodra het klaar was en daarna bleven we het verfijnen.
Een sneller eerste scherm
De vorige homepage laadde een productcarrousel voordat het eerste volledige beeld verscheen. Daardoor moesten productfoto's, varianten, prijzen, beschikbaarheid en carrouselcode meteen laden.
De nieuwe homepage laadt eerst de openingsafbeelding. Productrijen, aanbevelingen, analytics en toestemmingstools laden later of alleen als het nodig is.
We hebben ook het startwerk voor lettertypen, CSS en scripts verkleind. Bestanden worden beter gecachet en acties in de winkelwagen laden geen ongerelateerde paginagegevens meer opnieuw.
Belangrijke pagina's scoren nu 95 of hoger in onze Lighthouse-tests, op mobiel en desktop. Ze zijn ook sneller bruikbaar, blijven stabieler tijdens het navigeren en vragen minder rekenkracht van mobiele apparaten.
Een homepage met een duidelijkere opbouw
De vorige homepage leunde zwaar op één productfeed. In de nieuwe lay-out heeft elke sectie een eigen doel.
Nieuwe releases kunnen een compacte galerij gebruiken, grotere collecties een dichter raster. Producten die bovenaan al te zien zijn, komen verderop niet terug, zodat je minder herhaling ziet tijdens het scrollen.
De homepage kan nu een release introduceren, oudere producten uitlichten en bezoekers naar verschillende delen van het assortiment leiden, zonder dezelfde items te herhalen.
Snel toevoegen en zoeken zonder van pagina te wisselen
Een productoptie kiezen hoort niet te betekenen dat je de pagina moet verlaten.
Snel toevoegen opent nu als paneel onderin op mobiel en als breder paneel op desktop. Beide versies hebben ruimte voor productfoto's, varianten en maatinformatie.
Voorspellend zoeken toont resultaten terwijl je typt en houdt recente zoekopdrachten bij de hand. Uitgebreide resultaatkaarten laden alleen als het nodig is, zodat er minder werk is voordat je begint met zoeken.
Zo kun je producten vergelijken, een optie kiezen en die aan je winkelwagen toevoegen zonder de draad kwijt te raken.
Productpagina's rond de aankoopbeslissing
We hebben de productpagina's opnieuw ingedeeld rond de informatie die je nodig hebt om te kopen. Productmedia, de gekozen variant, prijs en koopknoppen staan bovenaan. Maten, verzending, verzorging en retourinformatie blijven dichtbij.
De mediagalerij ondersteunt nu foto's, video, externe video en 3D-media. Als je een kleur kiest, kan de galerij direct naar de bijbehorende foto springen.
Gerelateerde producten staan in een aparte sectie, ‘More to Explore’. Ze blijven bereikbaar zonder te concurreren met de belangrijkste productinformatie.
Een winkelwagen die direct reageert
De winkelwagen werd eerder traag of onbetrouwbaar als hij wijzigingen verwerkte. We hebben het bijwerken opnieuw gebouwd, zodat je direct feedback krijgt.
Aantallen aanpassen, items verwijderen, kortingscodes en prijsupdates verschijnen nu al terwijl de server het eindresultaat bevestigt. Daarna stemt de winkelwagen de getoonde aantallen en totalen af op het bevestigde antwoord.
Ook de voortgang van acties is duidelijker. De winkelwagen laat zien hoeveel je nog nodig hebt voor gratis verzending of een meerstuksdeal en bevestigt het zodra je die haalt.
De volledige winkelwagen en de uitschuifbare winkelwagen werken nu grotendeels hetzelfde. Daardoor zijn beide routes naar de checkout consistenter.
Handigere klantaccounts
De webshop blijft nu ook na het afrekenen handig.
Klantaccounts bevatten een doorzoekbare bestelgeschiedenis met productthumbnails, totalen, datums en verzendstatus. Op de pagina van een bestelling zie je details over verzending, terugbetaling en retour.
Bij bestellingen die daarvoor in aanmerking komen, kun je vanuit je account producten, aantallen en een retourreden kiezen en daarna een aanvraag indienen.
We hebben ook de land- en taalkiezer opnieuw gebouwd. Je kunt zoeken op landnaam, landcode, valuta of taal, met resultaten gegroepeerd per regio. Als je van markt wisselt, blijf je op dezelfde pagina en worden taal en prijzen bijgewerkt.
Waarom we het Energy Edition noemen
Elk onderdeel van deze release draait om tempo. De homepage doet minder werk voordat hij voor het eerst verschijnt. Browsen vraagt minder paginawissels. De winkelwagen reageert direct en klantaccounts regelen meer na het afrekenen.
Geen enkele functie bepaalt deze update in z'n eentje. Het is het totaalresultaat van het opnieuw bouwen van de delen van de webshop die het meest gebruikt worden.
We zijn nog niet klaar. Laat het ons weten als iets traag voelt, onduidelijk is of in de weg zit.
