Een B2B-shop op Shopify, ontworpen voor de klant die nabestelt

Philip Wallage · Design system · 2025–2026

Homepage van Wilweb op een laptop en een telefoon: een zoekbalk over de header, een hero over beregening voor een groen gazon, twee banners en categoriekaarten voor beregening, slangen, waterpompen, hemelwaterafvoer en regenwaterbeheer — Homepage. De Wilweb-shop, ontworpen voordat hij opengaat.

UX/UI-review, header en footer, Figma design system. Daarna het registratieformulier, de winkelwagen, een snelbestellijst en de e-mails.

Wilweb is de B2B-webshop van Jarola Group op Shopify, voor sanitair en verwarming: zo’n 20.000 producten, van merken als Calpeda, Ebara en Viega. De shop is gebouwd voor de vaste zakelijke klant. Die bestelt vanaf een lijstje met artikelnummers en koopt steeds dezelfde artikelen opnieuw.

stappen naar een zakelijk account: 3
vrachtbanner voor de hele winkelwagen: 1
ontwerpen voor volumekorting, om uit te kiezen: 2
alles bij de technische partij: 26 aug

De case in 26 seconden. Het geluid staat uit tot je het aanzet.

De brief

Jarola, het bedrijf achter Wilweb en Wildkamp, haalde me eerst binnen voor een UX/UI-review van Wilweb. In mei 2026 kwam Jarola terug voor Wildkamp. Dezelfde BTNG Design Subscription liep ernaast door voor Wilweb: een registratieformulier, de winkelwagen, e-mailtemplates, een snelbestellijst en volumekorting.

Elk onderdeel kreeg naast de desktopversie een mobiel ontwerp.

Review, header en footer, design system

De review ging door de shop. Een mini-styleguide legt typografie, kleur, knoppen en formulieren vast.

Styleguide van Wilweb, Foundations, Colors: wit en zwart als basis, dan grijs, merkblauw, foutrood en succesgroen, elk in twaalf stappen met de hexwaarde en de WCAG-contrastscore — De mini-styleguide. Kleur, typografie, knoppen en formulieren.

Styleguide van Wilweb, Base components, Buttons: gele gevulde, witte omlijnde en blauwe tekstknoppen in vier formaten, met hover, focus, uitgeschakeld en Submitting, en versies met alleen een icoon — Knoppen. Elk formaat en elke staat, tot uitgeschakeld en verzenden.

Mei 2026

Het registratieformulier

In mei 2026 begon het met één formulier voor particulieren en bedrijven, met zakelijk als hoofdzaak. Klanten loggen in met een code per e-mail, dus er is geen wachtwoordveld. Voor een bedrijf vult de KVK-API de bedrijfsgegevens in.

De goedgekeurde versie heeft 3 stappen: particulier of zakelijk, dan bedrijfsnaam of KVK-nummer met autocomplete, dan naam, telefoon en e-mail. Het telefoonnummer is verplicht, want het staat op de pakbon voor de chauffeur.

Account aanmaken: tabs voor Zakelijk en Particulier, het bedrijf uit het KVK-register met zijn adres, velden voor voornaam, achternaam, telefoon en e-mail en een gele knop om het account aan te maken, naast de voordelen van een account — Registratie. Eerst particulier of zakelijk, dan het KVK-nummer.

Mei 2026

De winkelwagen

Elk Wilweb-product gaat als vracht of per post. Zit er 1 vrachtartikel in de winkelwagen, dan gaat de hele bestelling per vrachtwagen, in 1 levering binnen 2 werkdagen.

De winkelwagen kreeg een vrachtlabel met een info-icoon, een levertijd en een waarschuwing bij maatwerk, dat niet retour kan. Het logo van de vervoerder ging eruit: bij een landelijke webshop kennen de meeste klanten het niet.

Winkelwagen: bovenaan een banner dat de bestelling als vracht gaat met een levertijd van 2 werkdagen vanwege één lange buis, regels met labels voor voorraad, maatwerk en vracht, en de samenvatting met een gele knop om verder te bestellen — Winkelwagen. 1 banner als de bestelling als vracht gaat.

Twee telefoons: links de zakelijke registratie met een veld voor bedrijfsnaam of KVK-nummer, rechts de winkelwagen met de vrachtbanner bovenaan en een maatwerkartikel dat niet retour kan — Registratie en winkelwagen op een telefoon.

De e-mails

Wilweb verkoopt alleen online, dus de footer is kort: afmelden en een paar links naar de klantenservice. In september kwam er een reviewverzoek voor Trustpilot bij, gebouwd binnen de bestaande template, zodat het in de eigen HTML-editor van Trustpilot nagebouwd kon worden.

Augustus 2026

De snelbestellijst

De snelbestellijst was technisch zo goed als af. Het ontwerp hield de livegang tegen. De lijst zit achter de login en blijft kaal: geen foto’s, de zoekbalk bovenaan, zoeken op artikelnummer of productnaam. Elke regel toont de adviesprijs doorgestreept, de korting, de stuksprijs en het regeltotaal.

Snel bestellen: bovenaan een zoekveld voor artikelnummer of productnaam, daaronder één regel per artikel met aantal, artikelnummer, stuksprijs, een doorgestreepte adviesprijs met 15% korting en het regeltotaal — Snelbestellijst. Zoeken bovenaan, 1 regel per artikel.

Twee telefoons met de snelbestellijst in twee layouts: elke regel met aantal, stuksprijs en totaal, de korting naast de prijs of erboven — Twee layouts voor de snelbestellijst op een telefoon, om uit te kiezen.

Augustus 2026

Volumekorting op de productpagina

Een praatplaat, zodat de directie en de technische partij het konden zien voordat er iets gebouwd werd. De klant moet in één oogopslag zien in welke staffel hij zit. Het voorbeeld dat ik kreeg verkocht dozen en pallets, dus zette ik de staffels op hetzelfde losse product.

Radiobuttons naast een vrij aantalveld geven 2 manieren om hetzelfde getal in te stellen, dus adviseerde ik het een of het ander. De projectleider hield 2 ontwerpen: radiobuttons bij 5, 10 en 25 stuks, of een blok dat alleen je staffel laat zien.

Productpagina van een K-Rain pop-up nevelsproeier: de prijs, het aantal en de knop voor de winkelwagen, daaronder de staffels 3 tot 5 stuks met 5% en 6 tot 10 stuks met 10% korting, elk met wat je bespaart — Volumekorting. De staffel waarin je zit, bij het aantal.

Hoe het werk liep

Elke 2 weken een review. De projectleider van Wilweb briefte elk onderdeel en bewaakte wat de bouw aankon. De designer van Jarola beoordeelde hoe het eruitzag. Voordat een onderdeel dichtging, stelde ik nog 1 vraag: is dit voor jou echt af?

In augustus moest alles op de 26e bij de technische partij liggen. De snelbestellijst ging op de 21e naar de projectleider en na de review op de 26e kon hij met beide onderdelen verder.

Wat er veranderde

Er zijn geen cijfers te melden: de Wilweb-shop is nog niet open.

Jarola keurde het registratieformulier en de winkelwagen op 28 mei 2026 goed in Figma. De snelbestellijst en de volumekorting gingen op 26 augustus naar het team van Wilweb, de directie en de technische partij. 3 keuzes liggen bewust bij Wilweb: welk kortingsontwerp, welke layout voor de snelbestellijst en of een klant 6 stuks mag bestellen als de staffels 5 of 10 zeggen.

Open je binnenkort een B2B-shop op Shopify?

Maak een afspraak

Terug naar cases