Een merk van 50 jaar digital first, zonder nieuw platform
Philip Wallage · E-commerce design · 2026
Design system, homepage, productoverzicht en productpagina voor een B2B-webshop, ontworpen voor het platform waar hij nu op draait.
Wildkamp levert al meer dan 50 jaar aan hoveniers, agrariërs en installateurs. Beregening, pompen, drainage, fittingen. De meeste klanten weten het artikelnummer al als ze binnenkomen. Voor hen is de webshop de plek waar ze bestellen.
- jaar Wildkamp, een merk dat offline groeide
- 50+
- blijft, de herbouw is 1 tot 2 jaar weg
- Intershop
- per week, als werksessie
- 1 call
- bannervarianten, bewust
- 2
Het merk is gemaakt voor een offline bedrijf en is nooit meegegroeid met de webshop. De shop draait op Intershop en een headless herbouw is nog een tot twee jaar weg. De opdracht: een digital-first huisstijl voor het platform dat Wildkamp nu heeft, vastgelegd in een design system.
De brief
Jarola, het bedrijf achter Wildkamp, kende me al. Ik had ontworpen voor Wilweb, hun nieuwere Shopify-shop, en omdat dat goed ging kwamen ze terug voor Wildkamp. Dezelfde BTNG Design Subscription liep ernaast door voor Wilweb: een registratieformulier, de winkelwagen, e-mailtemplates en een snelbestellijst.
De brief kwam neer op ontbrekende bouwstenen. Geen uitgebreid kleurenpalet. Geen typografische hiërarchie voor schermen. Geen set componenten, dus werd een knop gebruikt voor alles wat een knop nodig had. Fase 1 was oppoetsen binnen Intershop, begroot op twee maanden. Na de eerste ronde mailde de digital lead van Wildkamp “Wij zeggen: GO!” en werd het de volledige redesign.
Drie taken en één platform
De briefing gaf de site drie taken. Bestellen, voor de vakman die al weet wat hij nodig heeft. Zachte conversies, zoals beregeningsplannen en maatwerkoffertes, die andere afdelingen voeden en slecht te vinden waren. En informatie, in het kenniscentrum.
Elk scherm moest ook werken in Intershop zoals het nu is, of een versie krijgen die dat wel doet.
“Wij zeggen: GO!”
Vanaf juni
Het design system
Het design system staat in Wildkamps eigen Figma, verdeeld over een core-bestand en een deliverables-bestand. Wildkamp-blauw, geel voor de primaire actie en een witte pagina. Museo voor koppen en de productnaam, Inter voor de interface en elke prijs.
Groen markeert voorraad en levering en kreeg een eigen besluit. De eerste reeks werd fluorescerend in de lichtere stappen. Groen is geen merkkleur van Wildkamp, dus hield ik de basisstap en haalde ik de verzadiging uit alles wat lichter is.
Juni
De homepage
De oude homepage zette elke sectie in een eigen kader, op blauw. De nieuwe is wit, met blauw alleen voor de hero. De USP-balk staat op wit met één lijn eronder, op elke pagina, desktop en mobiel.
Op de banners van Wildkamp staan eigen medewerkers, hoofd bovenaan, dus de tekst staat op elke banner onder de foto. Populaire categorieën werden compacte tegels: zwarte titels, gewicht voor nadruk, de foto vult de tegel, en twee regels voor een beletselteken bij namen als “beregeningsbesturing en magneetkleppen”. Merken bleven buiten de populaire categorieën, zoals ik adviseerde, en kregen een eigen blok lager op de pagina.
September
Blokken voor de redactie
De meeste content- en merkpagina's van Wildkamp worden in het CMS in elkaar gezet door redacteuren. Zij kregen een bibliotheek: banners, stappen, een historietijdlijn, quotes, lijsten, een tabel, meldingen, een contactformulier, een compacte FAQ en één headercomponent met de opties in het CMS.
Banners kregen precies twee varianten: het blok links met de afgeronde hoek rechtsonder, of rechts met de hoek linksboven. De digital lead van Wildkamp hield het bij twee, omdat meer posities degene die de pagina opmaakt te veel keuze geven. De grote testimonial-carousel ging eruit, omdat KIYOH de reviews van Wildkamp al laat zien.
Eén echte pagina
Componenten op een bord laten niet zien of een pagina klopt. Dus bouwde ik één bestaande pagina na in de nieuwe stijl, tuinberegening, met een eigen videoplayer in plaats van een YouTube-embed.
Formulieren, veld voor veld
Het maatwerkformulier verloor zijn zijbalk, omdat het ene formulier niets met het andere te maken heeft. Daarna kreeg elk veld zijn eigen type. Een dropdown met één optie werd een uitgeschakeld veld, een met twee opties werd radioknoppen en een temperatuurbereik werd een getalveld met plus en min.
September
Het productoverzicht
Productkaarten in raster en lijst, met en zonder korting, elk met voorraad, aantal en in winkelwagen. Actieve filters staan als chips boven de resultaten, met een prijsschuif en een schakelaar met alleen iconen tussen raster en lijst.
Een Intershop-vriendelijke versie
De digital lead van Wildkamp vroeg om een tweede versie, dichter bij wat Intershop nu doet: de actieve filters in de linkerzijbalk, onder “Geselecteerd”. Beide gingen naar development.
Oktober
De productpagina
De productpagina zat niet in de oorspronkelijke brief, omdat er in Intershop bijna niets aan kon veranderen. Jarola vroeg toch om een voorstel.
Een grote productfoto en een rustigere hiërarchie. De productnaam in Museo, omdat die de paginatitel is, en de prijs in Inter. Levering en voorraad samen in één blok, met het aantal vestigingen dat het op voorraad heeft en gratis bezorging apart genoemd.
Elke korting bij Wildkamp zit achter de login. De ontwerper van Jarola zag dat “log in voor je eigen prijs” weggestopt zat onder de prijs, dus maakte ik het prominenter, direct ernaast.
Op je telefoon
Op mobiel blijven aantal en in winkelwagen vast onderaan de productpagina. Het filterscherm telt de resultaten op de knop, nog voordat je het sluit.
Hoe het werk liep
Eén call per week, op maandag, met de digital lead van Wildkamp en de ontwerper van Jarola. Het was een werksessie: besluiten vielen in de call en de varianten die verloren werden gearchiveerd, zodat niemand ze per ongeluk bouwt.
Tussen de calls stuurde ik opgenomen video-walkthroughs en voor een call een mail met de besluiten die ik van ze nodig had. Feedback kwam binnen als Figma-comments. Zij filterden alles voordat hun developer er user stories van maakte. Het productoverzicht en de productpagina gingen in oktober naar development.
Wat dit laat zien
Een redesign hoeft niet op een nieuw platform te wachten. Het meeste hiervan is ontworpen voor Intershop zoals het nu is, en waar dat een compromis vroeg, zoals bij de filters, kreeg development beide versies.
De keuzes staan in een design system, dus de headless herbouw kan beginnen met een huisstijl die voor schermen is gemaakt.