Naar hoofdinhoud

E-commerce design · 2026 · Wildkamp

Een merk van 50 jaar digital first, zonder nieuw platform

Design system, homepage, productoverzicht en productpagina voor een B2B-webshop, ontworpen voor het platform waar hij nu op draait.

E-commerce design · Design system · B2B · Figma · Intershop

Homepage van Wildkamp op een tablet: het categoriemenu, een hero over beregeningsplannen en de populaire categorieën, boven een gedimde collage van de nieuwe overzichts-, product- en contentpagina's
Homepage. Boven op de overzichts-, product- en contentpagina's die erna kwamen.
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

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.

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.

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.

Componenten van Wildkamp: productkaarten met variantkeuze, prijs en aantal, een tabel, een herobanner, categorielijsten en de mobiele header met zoekveld
Componenten. Productkaarten, een tabel, een banner, categorielijsten en de mobiele header.

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.

Homepage van Wildkamp met het categoriemenu, twee herobanners en de populaire categorieën, naast de categorietegels en een productkaart uit het design system
Homepage. Een witte pagina, een blauwe hero, compacte categorietegels.

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.

Een wand van contentpagina's van Wildkamp, gebouwd met de nieuwe blokken: banners, stappen, tijdlijnen, quotes, tabellen en formulieren
Contentblokken. Banners, stappen, tijdlijnen, quotes, tabellen en formulieren, samengezet tot pagina's.

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.

Tuinberegeningspagina in de nieuwe stijl: een zijbalk met vragen over tuinberegening, een foto van een sproeier op een gazon en een intro met een knop naar het beregeningsassortiment
Tuinberegening. Een bestaande pagina, opnieuw opgebouwd uit de nieuwe blokken.

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.

Overzicht Beregening: filters links met een prijsschuif en merkvinkjes, chips voor de actieve filters en productkaarten met kortingslabels, voorraadregels en een aantalveld, naast kaarten in lijstweergave
Productoverzicht. Losse kaarten, actieve filters als chips, aantal en in winkelwagen op de kaart.

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.

Intershop-vriendelijk overzicht: de actieve filters Merk: Grundfos en Toepassing: Tuin in de zijbalk onder Geselecteerd, boven de categoriefilters
Intershop-vriendelijke versie. Actieve filters in de zijbalk, waar het huidige platform ze zet.

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.

Productpagina van een K-Rain pop-up sproeier: een grote foto met thumbnails, de prijs, aantal en in winkelwagen, en één blok voor levering en voorraad in vier vestigingen, naast de productkaart, meldingen en het leveringsblok als componenten
Productpagina. Een grote foto, één blok voor levering en voorraad.

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.

Uitsnede van de productpagina: de prijs van € 27,89 inclusief btw met direct ernaast een knop om in te loggen voor je eigen prijs
Je eigen prijs. De login staat naast de prijs.

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.

Productpagina op een telefoon: levering en voorraad in vier vestigingen, productinformatie en de prijs met aantal en in winkelwagen vast onderaan
Productpagina op een telefoon. Aantal en in winkelwagen blijven onderaan.
Filters op een telefoon: een prijsschuif van € 25 tot € 250, Grundfos aangevinkt onder merk en een knop met Toon 18 producten
Filters op een telefoon. De knop telt de resultaten voordat je toepast.

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.

“Wij zeggen: GO!”
Bas Kuipers Digital lead, Wildkamp, per e-mail na de eerste ronde

Draait je B2B-webshop op een platform dat je nog niet kunt vervangen?

Maak een afspraak

Terug naar cases