Drinkstuff · UX Design · Product page
The Product Buy Box
Redesigning Drinkstuff's product buy box so trade and home customers can choose a pack or a full case, see the real price per glass, and know exactly what's in stock – with one clear call to action.
- Role
- UX & product design
- Company
- Drinkstuff.com
- Focus
- Product page buy box
- Customers
- Trade & home
The context
Before the likes of AI, I worked at Drinkstuff, an online retailer of glassware, barware and catering equipment. I designed the site's header, footer and general content, and paid particular attention to the most important part of any product page: the buy box.
Drinkstuff likes to sell glassware by the case. To let home customers buy trade-quality glassware in smaller amounts, the company splits cases down into packs of six. But it's the case that brings in trade customers – bars, restaurants, hotels and caterers – and with them, repeat business. That's worth far more than a one-off home order.
So the buy box had a lot to do in a small space: sell the pack, upsell the case, show trade pricing and be honest about stock – for each option.
What the buy box had to do
Make the case the obvious choice
Show the upsell and the saving clearly, so buying a case feels like the smart move and not a hidden option.
Show the price per glass
Pack and case prices are hard to compare. A price per glass makes the case discount easy to see.
Speak trade: inc / ex VAT
Most trade customers think ex VAT, so the site shows prices ex VAT by default. A toggle in the header switches to inc VAT for home customers.
Be honest about stock
The pack and the case could each have a different stock status. The customer needs to see the status of the option they picked.
Never lose demand
If it's out of stock, collect an email and send a back-in-stock alert automatically, instead of showing a dead end.
One clear action
Pick an option, hit the button, done. No guessing which of several “Buy” buttons does what.
Five stock statuses, one button
Each pack size had its own stock status. Instead of showing every status at once, the selected option decides how the buy box behaves.
Try it yourself
A working rebuild of the pattern. Pick a stock scenario, switch between inc and ex VAT, and choose an option to see how the buy box changes. Turn on notes to see why each part is there.
Illustrative prices – for demo only.
Glassware · SKU 13005
Cabernet Tulipe Wine Glasses 8.8oz / 250ml
per glass
- VAT toggle. Prices are ex VAT by default, because that’s how trade customers think. The header toggle switches every price on the site to inc VAT, up until checkout, which is always inc VAT.
- Selectable option cards. Radio-style cards replace two rows of buy buttons. You can always see what's selected, and each card shows its own price per glass and stock status.
- One price, for what you picked. Only the selected option's price is shown, so there's less to read.
- Price per glass. The easiest way to compare a pack with a case.
- The upsell. When a pack is selected, a one-tap nudge shows what you'd save with a case. When the case is selected, the saving is confirmed.
- Stock in context. Delivery messages change with the stock status of the selected option.
- One button that changes. Add to basket, Direct Delivery, Back Order, Pre-order now, or a disabled Out of stock – the same button, never two.
- Back-in-stock alerts. Out-of-stock, back-order and pre-order options offer an automatic email alert, so Drinkstuff doesn't lose the customer.
How I got here
The buy box went through a lot of versions. Each one fixed something and taught me something.
- Then
Drop-downs
Years ago, pack sizes lived in a drop-down. It was tidy, but it hid the case, the price per glass and the saving. The upsell was invisible unless you went looking for it.
- Next
Every option on show
Next, both options were shown at once, each on its own row with its own quantity and Buy button. The case was finally visible, but now there were two calls to action and a lot of information packed into a small space.
- My design
Select, then buy
Radio-style toggles between the pack of six and the case. The selection controls what the buy box shows, so I could show less, more clearly, with one button that changes with the stock status.
The hard bit
One in stock, one out of stock
The trickiest case was a mixed one: the pack is in stock but the case isn't, or the other way round. I went through a lot of versions to get it right. These were the rules I ended up with:
- Never disable the option itself. An out-of-stock case can still be selected, so the customer can see its price and sign up for an alert.
- Each card shows its own status, so you can see the difference before you choose.
- The button follows the selection: Add to basket, Direct Delivery, Back Order, Pre-order now or Out of stock, with the alert form shown only when it's useful.
- Don't default to something you can't buy. Start on an option that's available.
Looking back
The live buy box has changed since I designed it, which is normal for a product page that keeps being worked on. If I picked it up again today, I would:
- Tighten it up. Bring price, options and the button closer together so they read as one unit.
- Get the whole decision above the fold on desktop. The fold is a contested idea, but on a page this commercial, the option, price and button should all be visible together without scrolling.
- Test the default. A/B test starting trade visitors on the case, and measure the effect on case share and repeat orders.