Surfstock

Surfstock er et e-commerce-site udviklet til at sælge restlageret fra en tidligere dansk surfbutik. Kataloget indeholder specialiserede produkter inden for windsurfing, kitesurfing, SUP og beklædning med uens varianter, store rabatter, begrænset lager og forskellige leveringsregler afhængigt af produktets størrelse.

Jeg havde ansvaret for hele den tekniske levering, herunder applikationsarkitektur, implementering af produktkataloget, søgning og filtrering, Snipcart-integration, lagerhåndtering, deployment, vedligeholdelse og forbindelsen mellem storefront og checkout. Jeg samarbejdede med to UX-designere om det oprindelige design og usability testing.

Projektet kort fortalt

Surfstock omsatte et fysisk restlagerproblem til en online salgskanal. Virksomheden havde værdifulde produkter tilbage efter lukningen af en tidligere surfbutik, men lageret var for specialiseret og uensartet til at blive præsenteret effektivt gennem en simpel produktliste eller en generisk markedspladsside.

Det resulterende website organiserede lageret i velkendte surfkategorier, gjorde rabatter tydelige, lod besøgende søge og filtrere kataloget og understøttede køb gennem Snipcart. Mindre produkter kunne leveres, mens større produkter skulle afhentes gratis på Frederiksberg.

Sitet er stadig tilgængeligt som portfolio- og produktreference, men bliver ikke længere aktivt vedligeholdt, og købsmuligheden er deaktiveret.

Kontekst og mit ansvar

Jeg byggede Surfstock for en familiedrevet virksomhed og var ansvarlig for alle tekniske dele af løsningen. To UX-samarbejdspartnere bidrog til visuelt design, user flows og usability testing i den første udviklingsperiode. Jeg oversatte deres designarbejde og virksomhedens krav til den færdige produktionsapplikation.

Mine ansvarsområder omfattede valg af teknisk tilgang, modellering af produkter som content, implementering af den responsive storefront, forbindelse mellem produktdata og Snipcart, konfiguration af lageradfærd, søge- og filterinteraktioner, deployment til Netlify og vedligeholdelse af den live løsning.

Projektet krævede tæt kommunikation med personer, der kendte produkterne og de kommercielle begrænsninger, men ikke havde behov for at træffe framework-beslutninger. Jeg fokuserede derfor samtalerne på katalogstruktur, lager, levering, priser og kunderejse og omsatte derefter beslutningerne til teknisk adfærd.

Problemet

Et restlager er strukturelt anderledes end et normalt e-commerce-katalog. Mange produkter var ældre modeller, fandtes kun i én eller få varianter og ville ikke komme på lager igen. Produktdata var uens, og kategorierne spændte fra små accessories til store boards og sejl.

Det centrale brugerproblem var discovery. En kunde på jagt efter windsurfingudstyr skulle hurtigt kunne indsnævre et specialiseret katalog, mens en besøgende, der landede direkte fra Google på et konkret rabatprodukt, skulle have tilstrækkelig information og tillid til at gennemføre købet.

Fulfilment-modellen skabte en yderligere begrænsning. Små produkter kunne sendes, mens stort udstyr ikke kunne følge det samme leveringsflow og i stedet skulle afhentes på Frederiksberg. Websitet skulle kommunikere forskellen før checkout frem for at lade den opstå som en overraskelse efter købet.

Krav og begrænsninger

Løsningen skulle:

• Præsentere en stor mængde uens restlager tydeligt.
• Organisere produkter i specialiserede surfkategorier og underkategorier.
• Understøtte søgning og client-side filtering.
• Fremhæve oprindelige og reducerede priser.
• Håndtere produktvarianter og begrænset lager.
• Forhindre udsolgte produkter i at blive købt.
• Understøtte levering af mindre varer og afhentning af stort udstyr.
• Integrere en sikker checkout uden at bygge en komplet commerce-backend fra bunden.
• Være billig at hoste og enkel at vedligeholde.
• Have tilstrækkelig performance til, at produktsider kunne findes gennem søgemaskiner.

Virksomheden havde samtidig brug for en løsning, der kunne lanceres uden en lang implementeringsperiode. Fordi lageret var endeligt, skulle arkitekturen være proportionel: robust nok til reelle transaktioner, men uden infrastruktur designet til en konstant voksende retail-forretning.

Produkt- og UX-beslutninger

Katalogstrukturen fulgte surfmarkedets eget sprog: windsurfing, kitesurfing, SUP, beklædning og deres relevante underkategorier. Erfarne kunder kunne dermed navigere gennem velkendte produkttyper uden at lære en specialudviklet taxonomy.

Rabatter var centrale for value proposition, så produktkort og detaljesider viste både den oprindelige og den reducerede pris. Det kommunikerede straks, hvorfor shoppen eksisterede, og gjorde det lettere at sammenligne restlageret.

Søgning og filtrering understøttede både kunder, der kendte det præcise produkt, og kunder, der kun kendte den kategori, de havde brug for. Fuse.js leverede fleksibel tekstsøgning, mens Filterizr understøttede interaktiv katalogfiltrering uden et server request for hvert valg.

Leveringsforskellen blev holdt synlig. Mindre varer kunne gå gennem et normalt leveringsflow, mens større produkter tydeligt var forbundet med gratis afhentning på Frederiksberg. Det sikrede, at den digitale checkout afspejlede lagerets fysiske begrænsninger.

Interfacet blev designet og testet sammen med de to UX-samarbejdspartnere. Min rolle var at sikre, at de foreslåede flows kunne implementeres realistisk inden for Snipcarts checkout-model, den statiske contentarkitektur og de tilgængelige produktdata.

Teknisk implementering

Surfstock er bygget med Astro, React og TypeScript. Astro leverer et hurtigt content-orienteret fundament, mens React bruges de steder, hvor storefronten kræver mere avanceret client-side interaktion.

Produktdata er gemt som Markdown. Tilgangen holdt kataloget tæt på codebasen, gjorde enkelte produkter lette at redigere og undgik et separat CMS til et begrænset restlager. Produktfilerne indeholder de oplysninger, der er nødvendige for at rendere kategorisider, detaljer, priser, varianter og commerce metadata.

Fuse.js driver tekstsøgningen, mens Filterizr håndterer client-side filtering. Sammen gør de det muligt at browse et forholdsvis bredt specialkatalog uden en større søgeservice eller custom backend.

Snipcart håndterer cart, checkout, transaction processing, produktvalidering og lagerantal. Ved at holde lageret i Snipcart kunne commerce-laget forhindre køb af udsolgte produkter, selv om det offentlige katalog blev genereret ud fra Markdown-content.

Netlify hoster og deployer applikationen. Arkitekturen holdt den operationelle kompleksitet lav og understøttede samtidig et reelt købsflow, stock control og product discovery.

Kommunikation og samarbejde

Den vigtigste kommunikationsopgave var at omsætte fysiske lagerregler til en digital kunderejse. Virksomheden beskrev produkterne gennem brands, størrelser, stand og mulighed for forsendelse. Jeg omsatte den viden til kategorier, felter, checkout metadata og synlig fulfilment-information.

Samarbejdet med UX-designerne krævede en anden form for oversættelse. Deres tests og interfaceforslag fokuserede på, hvad brugerne forstod, mens jeg vurderede, hvordan designet kunne implementeres i Astro og fungere sammen med Snipcarts begrænsninger.

Jeg skulle også forklare tekniske trade-offs til virksomheden uden at bede dem vælge mellem værktøjer, de ikke kendte. Valget af Markdown til produktdata blev eksempelvis forklaret som en beslutning om vedligeholdelse og scope: Det gjorde det endelige katalog håndterbart og sitet hurtigt uden udgifter og administration fra et større system.

Resultater og nuværende status

Surfstock skabte reelle kommercielle resultater. Før websitet var officielt lanceret, fandt en kunde det gennem Google, og de tidlige ordrer nåede cirka 10.000 DKK. Sitet fortsatte med at skabe salg efter lanceringen, hvilket viste, at kataloget, produktsiderne og checkout fungerede i en reel købssituation.

Det tidlige organiske salg validerede samtidig værdien af teknisk tilgængelige produktsider. Sitet var ikke udelukkende afhængigt af betalt promovering eller en eksisterende markedsplads for at nå kunder.

Restlagerprojektet er siden gået ud af aktiv drift. Websitet er stadig live, men bliver ikke længere vedligeholdt, og produkterne kan ikke længere købes. Jeg holder det tilgængeligt, fordi det dokumenterer det oprindelige katalog og demonstrerer en komplet e-commerce-implementering.

Læring og retrospektiv

Surfstock lærte mig, at commerce-projekter formes lige så meget af fulfilment- og lagerregler som af den synlige storefront. En flot produktside er ikke tilstrækkelig, hvis inventory, varianter, shipping og checkout ikke beskriver den samme virkelighed.

Projektet viste også værdien af at vælge arkitektur efter forretningens levetid. Et endeligt restlager havde ikke brug for en custom commerce-backend eller en kompleks redaktionel organisation. Astro, Markdown og Snipcart gav en passende balance mellem performance, maintainability og transaktionssupport.

Hvis jeg genopbyggede løsningen til en aktiv retailer, ville jeg vælge et mere skalerbart product-management workflow og formalisere inventory synchronisation. Til denne konkrete business case reducerede den lette contentarkitektur dog implementerings- og vedligeholdelsesomkostningerne og understøttede stadig reelt salg.

Hvad projektet viser

Surfstock viser, at jeg kan levere et kommercielt website fra produktdata til checkout. Projektet demonstrerer frontendudvikling, e-commerce-integration, søgning og filtrering, modellering af lager og fulfilment, deployment, samarbejde med UX-specialister og tydelig kommunikation med ikke-tekniske business stakeholders.