Customer Portal
A self-service portal for NETZSCH Grinding & Dispersing's industrial customers: machines, spare parts, quotes, contracts, lab tests, and an AI assistant. Designed for the people who run procurement at a plant, not for casual shoppers.
- 110+
- Frames in Figma
- 12
- Flows designed
- 4
- Buyer-side roles
Challenge
Industrial procurement doesn't look like e-commerce. Buyers order by part number and material code, purchases above a threshold need an approver, prices come from negotiated contracts rather than a public list, and the person operating the machine is often not allowed to see prices at all.
Before the portal, all of that ran through email and sales reps. The brief was a single place where a customer could check their installed machines, reorder grinding media, track orders, and pull contract pricing without calling anyone.
Approach
I designed the whole surface in Figma: 110+ frames across 12 flows, from a 23-screen registration and SSO path to checkout, contracts, services, and a five-page admin area. Light mode only, Inter, the NETZSCH green, and an AAA contrast target, because this gets used on factory-floor laptops with bad screens.
The structural decision was role-based design. Four buyer-side roles (administrator, buyer, approver, technician) see different navigations, different actions, and in the technician's case no prices anywhere: their "add to cart" becomes "request for approval" and generates an internal request number instead of an order. I also designed Milla, an AI assistant with four states, from a search-bar suggestion up to a full chat, scoped to spare parts, order status, and documents.
Implementation went to HTML/CSS with a 1:1-to-Figma contract, taken over by a colleague in April 2026 while I reviewed against the frames.
Outcome
68 screens are live on the internal test deployment, pixel-faithful to the Figma source, covering dashboard, machines with hourmeters and service history, shop with volume pricing tiers, orders, quotes, contracts with negotiated price lists, and the full admin area.
It's pre-production: the deployment sits behind an access gate, and Milla's answers are simulated while the LLM integration stays on the roadmap. What exists today is the complete designed and built surface, waiting on backend wiring.
Who I designed for
Marcus, the persona on every screen, manages procurement for a plant running five NETZSCH mills. His job is keeping machines grinding: reorder beads before they run out, get a bearing shaft quoted, check why an order slipped.
Around him sit three other roles with different rights. The approver reviews what buyers put in the queue. The technician knows exactly which spare part the machine needs but isn't allowed to commit money. The admin manages who can do what. Designing for the four of them at once is what shaped the portal more than any visual decision.
The key decision: roles as a design primitive
The easy version of this portal would be one interface with an admin toggle. I designed the role model into every flow instead, and made it visible in an admin matrix where each role's permissions can be read per module.
The technician role is the clearest example. Same catalog, same machine pages, but no prices, no cart, and no checkout. Their flow ends in a request with its own number that lands on the approver's desk. That respects how these companies actually buy: the person with the technical knowledge and the person with the budget are different people, and pretending otherwise is how portals end up unused.
What didn't go well
Milla is the honest gap. I designed four states of an AI assistant and the demo answers are canned: the model integration never left the roadmap while I was on the project. The design holds up, but I can't show you a real answer.
The other gap is validation. The portal lives on a gated test deployment and hasn't been in front of actual customers yet, so every flow decision is still an informed bet rather than a measured one. And I handed implementation over mid-project, which worked because the 1:1 contract was strict, but it means the shipped polish past that point isn't mine to claim.
Selected screens
" B2B design is mostly about respecting an org chart you didn't draw. The portal's best ideas aren't visual, they're the request numbers, approval queues, and price visibility rules that map to how an industrial customer already works. "
IRIS Design System
→The component library behind the IRIS HMI platform. 29 component families, tokens, 12" and 15" panel variants.