A B2B Shopify shop, designed for the buyer who reorders

Philip Wallage · Design System · 2025–2026

Wilweb homepage on a laptop and a phone: a search bar across the header, a hero about irrigation for a green lawn, two banners and category cards for irrigation, hoses, water pumps, rainwater drainage and rainwater management — Homepage. The Wilweb shop, designed before it opens.

UX/UI review, header and footer, Figma design system. Then the registration form, the cart, a quick order list and the emails.

Wilweb is Jarola Group’s B2B webshop on Shopify for plumbing and heating: around 20,000 products, from brands like Calpeda, Ebara and Viega. The buyer it is built for works from a list of article numbers and orders the same items again.

steps to a business account: 3
freight banner for the whole cart: 1
volume discount designs, for Wilweb to choose from: 2
everything with the technical partner: 26 Aug

The case in 26 seconds. Sound is off until you turn it on.

The brief

Jarola, the company behind Wilweb and Wildkamp, first brought me in for a UX/UI review of Wilweb. In May 2026 Jarola came back for Wildkamp. The same BTNG Design Subscription kept running for Wilweb alongside it: a registration form, the cart, email templates, a quick order list and a volume discount.

Every piece got a mobile design next to the desktop one.

“He understands our challenges, thinks along flexibly and at the same time challenges us to look further.”

Inez Oldeboer Jarola

Review, header and footer, design system

The review went through the shop. A mini styleguide sets type, colour, buttons and forms.

The mini styleguide. Colour, type, buttons and forms.

Wilweb styleguide, Base components, Buttons: yellow filled, white outlined and blue text buttons in four sizes, with hover, focus, disabled and Submitting states and icon-only versions — Buttons. Every size and state, down to disabled and submitting.

May 2026

The registration form

In May 2026 the first piece was one form for consumers and businesses, with business as the main case. Customers log in with a code by email, so there is no password field. For a business, the KVK API fills in the company details.

The approved version has 3 steps: business or consumer, then company name or KVK number with autocomplete, then name, phone and email. The phone number is required, because it goes on the packing slip for the freight driver.

Account aanmaken: tabs for Zakelijk and Particulier, the company found in the KVK register with its address, fields for first name, last name, phone and email, and a yellow button to create the account, next to the benefits of an account — Registration. Business or consumer first, then the KVK lookup.

May 2026

The cart

Every Wilweb product ships as freight or post. If 1 item in the cart is freight, the whole order goes by truck in 1 delivery within 2 working days.

The cart got a freight label with an info icon, a delivery time, and a warning on made-to-measure items, which can’t be returned. The carrier’s logo came out: on a national webshop, most customers don’t know it.

Winkelwagen: a banner at the top saying the order ships as freight in 2 working days because of one long pipe, cart lines with stock, made-to-measure and freight labels, and the order summary with a yellow button to continue — Cart. One banner when the order ships as freight.

Two phones: on the left the business registration with a field for company name or KVK number, on the right the cart with the freight banner at the top and a made-to-measure item marked as non-returnable — Registration and cart on a phone.

The emails

Wilweb only sells online, so the footer is short: unsubscribe and a few customer service links. In September came a Trustpilot review request, built inside the existing template so it could be rebuilt in Trustpilot’s own HTML editor.

August 2026

The quick order list

The quick order list was nearly built. The design was what held up go-live. It sits behind the login and stays lean: no photos, search at the top by article number or product name. Each line shows the list price struck through, the discount, the unit price and the line total.

Snel bestellen: a search field for article number or product name at the top, then one line per article with quantity, article number, unit price, a struck-through list price with 15% discount, and the line total — Quick order list. Search at the top, one line per article.

Two phones with the quick order list in two layouts: each line with quantity, unit price and total, the discount shown next to the price or above it — Two quick order layouts on a phone, for Wilweb to choose from.

August 2026

Volume discount on the product page

A talking piece, for management and the technical partner to see before anything got built. The buyer has to see at a glance which tier they are in. The example I was given sold boxes and pallets, so I set the tiers on the same single item.

Radio buttons next to a free quantity field give 2 ways to set the same number, so I advised one or the other. Wilweb’s project lead kept 2 designs: radio buttons at 5, 10 and 25 pieces, or a block that only shows your tier.

K-Rain pop-up sprinkler product page: the price, quantity and add to cart, and below them the volume tiers 3 to 5 pieces at 5% and 6 to 10 pieces at 10% discount, each with what you save — Volume discount. The tier you are in, shown with the quantity.

How the work ran

A review every 2 weeks. Wilweb’s project lead briefed each piece and judged what the build could take. Jarola’s designer judged the look. Before a piece closed, one explicit question: is this done for you?

In August everything had to be with the technical partner by the 26th. The quick order list went to Wilweb’s project lead on the 21st, and after the review on the 26th he could take both pieces forward.

What changed

There are no numbers to report: the Wilweb shop has not opened yet.

Jarola approved the registration form and the cart in Figma on 28 May 2026. The quick order list and the volume discount went to Wilweb’s team, its management and the technical partner on 26 August. 3 choices stay with Wilweb on purpose: which discount design, which quick order layout, and whether a buyer may order 6 when the tiers say 5 or 10.

Opening a B2B shop on Shopify?

Book a call

Back to cases