UX case study · B2B application

Streamlining restocking decisions

Coolblue is a leading electronics retailer in the Netherlands and Belgium. Its buyers spent 30 to 45 minutes deciding whether to restock a single product. I designed the tool that cut that to 1 to 3 minutes.

Decision time before Decision time after
A clock-face ring chart: the full circle represents one hour, and the ring fills from the top, clockwise, through the 45-minute mark. 0153045
A clock-face ring chart: the full circle represents one hour, and the ring fills from the top, clockwise, through the 3-minute mark. 0153045

30 – 45min

1 – 3min

Product availability

+36%

Measured over 6 months

Client
Role UX Designer
Team 1 UX designer, 1 front-end, 3 back-end, 1 product owner
Timeline April 2014 to September 2016
Platform Windows desktop application
The final restocking decision screen: one clear decision at a time
The new process: one screen, one product, one decision. The old one took eight screens.

Problem

Why this project?

To restock one product, a buyer had to collect 17 data points, many of them hard to find in the old system. They worked the order out in their own spreadsheet, checked a shared wiki for the rules, and typed it back in. Each decision took 30 to 45 minutes.

So many products were restocked late, and many others were overstocked, which wasted warehouse space. Our business analysts saw slow restocking as a brake on revenue: every product that sold out was a sale lost to a competitor.

The people doing this were Coolblue's 19 buyers, each with a desktop PC, a mouse and a gamepad.

A sold-out product notice in Coolblue's store
A sold-out notice frustrates the shopper and costs the brand.
Deep dive

Why a shopper would notice

Journey map

If you have bought something at Coolblue, you have walked this journey: choosing, ordering, delivery and after. Without good restocking it breaks in two places. The product is not in stock, or the warehouse cannot take more of it because it is full of something that sells more slowly.

Eight screens for one decision

I mapped every step a buyer took in the old system to decide whether to restock one product. Open any screen to see it full size.

Goals

Desired outcome

Increase the frequency
Ensure products are replenished more frequently.
Reduce overstocking
Minimise excess inventory to optimise warehouse space.
Automate easy decisions
Streamline the process for routine restocking tasks.

In brainstorms led by the product owner, we saw that many restocking decisions could be made by the system itself. So we built a learning system: an algorithm that restocks a product without asking the buyer at all. It learns from thousands of past decisions, from trends and sales, and from Coolblue's contracts with its suppliers.

Coolblue will always need chargers and cables, for example. The system knows how many, from whom and at what price, so no buyer has to decide that again.

That leaves buyers the decisions that need a person, like buying black, red and green barbecues in winter to sell next summer. That takes talks with manufacturers, price negotiation and signed deals: buyer work, not data entry.

It also takes the load off a buyer's memory. People move on, get sick and forget, and stock should not depend on that.

Process

How it was made

01

Working as a buyer

I started by interviewing and watching people across Coolblue, to learn its logistics, its promises to customers and how restocking really worked.

Then I role-played as a buyer and placed orders with the existing tools. Every decision came down to three questions.

  • Should I restock now?

    The software flagged products running low and showed the buyer the data behind them.

  • If yes, how much should I restock?

    The right amount depended on warehouse space and the supplier's stock, which were often hard to see. Some suppliers shared live stock levels and some did not, and contracts and delivery times differed per supplier.

  • Can I restock from my selected supplier?

    This depends on the points above: contracts, delivery time, stock transparency.

The team also visited the warehouses twice, to see their limits and the tools on the floor.

Deep dive

Photos from the warehouse visits

Ten photos
02

One decision at a time

I drew the first wireframes. The CEO wanted a tool so simple you could run it with an Xbox gamepad. I took that as a figure of speech. It wasn't: gamepad support was a real requirement. I made sure the tool still worked well with a keyboard and mouse.

Early concept (pre-feedback). This early concept was done to place the ideas of the ideation sessions.
Late concept with feedback. After gathering feedback from stakeholders and key users, I refined the concept through sketching and prototyping until I was satisfied with the high-fidelity design.

The system picked the products that needed restocking. For each one, the buyer answered the three questions: restock or not, how much, and from which supplier (one supplier at first). Then the next product appeared, until the day's list was done. The old process took eight screens; the new one took one.

Deep dive

Two more screens: the day's tasks and settings

Two screens
Section of the application enabling users to create new buyer accounts and assign them to appropriate teams.
Tasks to resolve today. A clear overview of daily restocking tasks, keeping the team relying on these decisions on schedule.
03

Tested with buyers all the way

We tested at every stage. Buyers clicked through an InVision prototype from a shared link, and I wrote up their feedback for the team.

Conclusion

Results

1 – 3min

Per restocking decision, down from 30 to 45 minutes (self-reported).

50 – 60min/day

Saved by each buyer, every day. Restocking used to take about an hour of a buyer's day; now it took a few minutes, and they got on with the rest of their work.

+36%

Product availability across the whole portfolio, over six months, automated orders included.

25%

A quarter of all restocking decisions, made by the learning system with no buyer involved. Buyers spent that time on suppliers and long-term planning.

Showing one product at a time also changed how buyers ordered. They made more, smaller decisions instead of large orders that overstock the warehouse, and that is what raised availability.

Deep dive

How we measured

Method

We had no A/B test. We judged the tool on Coolblue's own business figures. With only 19 buyers, I could interview every one of them, so the research was qualitative and covered everyone.

Decision times are what buyers told us. Overstocking was a goal, but never at the cost of products selling out. We did not measure by how much it fell: logistics staff in the warehouse reported that it did. What we did measure is that availability went up.

This is the product as I left it in 2016. It has changed a lot since: it was built as a Windows desktop application, and Coolblue has since moved to a web app.

Lessons

One decision at a time
Buyers felt that one decision at a time took away their control, and the screen needed a way to make several decisions at once. But the same constraint made them order in smaller, more frequent steps, and that lifted availability.
Simple, not gamepad-compatible
Making it simple enough to run with a gamepad was the right idea. Making it actually work with a gamepad was not needed, but outside pressure took us there anyway.
Go straight to the source
The whole chain was slow with technology and slow to share data: suppliers, carriers, and Coolblue itself, which buys, stores, sells, ships and handles returns, service and warranty claims. Red tape and weak old contracts slowed us more. Talking to suppliers directly helped most.
Instrument the metric
Logistics staff told us overstocking went down, but we never measured by how much. If I did this again, I would measure it from day one instead of relying on check-ins.
Automation arrives slowly
Automation is slow, especially with outside partners, and users barely see it happen. We automated a quarter of all decisions, but it took long enough to frustrate many.