01, Project Overview
NMBS B2B Portal
Employer Portal Redesign
Full redesign of the Belgian National Railway employer portal. HR managers use this platform to manage employee transport contracts, orders, pricing and invoices. The goal was to fix a fragmented experience and bring clarity to a process that was costing companies time and money.
2024
Project timeline
↑ TCS Pace
2
Designers on the project
↑ UX/UI + Service Designer
9
Key screens redesigned
↑ Full portal coverage
B2B
HR managers as primary users
↑ Belgian railway employers
I was the only UX/UI Designer on the project, working alongside one Service Designer. I led research, wireframing and the full visual design of the new portal, in close collaboration with the client and engineering team at TCS Pace.
UX ResearchB2B PlatformUI DesignFigmaService Design Collaboration
02, Research
What HR managers told us
about the existing portal
I conducted interviews directly with HR managers who used the platform daily. The goal was simple: understand exactly where the current process broke down for them.
01
Cost was invisible until the very end
Managers could not see the total cost of a pass order until after submitting it. This led to constant cancel and restart cycles.
02
Contracts were scattered across the portal
There was no single place to see active contracts. Managers had to jump between sections to get a full picture.
03
No way to act on multiple employees at once
For companies managing dozens of employees, every action had to be done one by one. There was no bulk option.
04
Legal subsidy info lived outside the platform
Belgian CAO subsidy rules were not shown inline. Managers had to check external sources to know what they could claim.
Alongside the interviews, I ran daily sessions with stakeholders from NMBS and TCS Pace to validate findings and keep design decisions grounded in business and technical constraints.
03, Decisions
Four problems,
four direct solutions
Each design decision mapped to one specific problem from the research. No extra features, no scope creep, just direct fixes for what HR managers were struggling with.
Real time cost preview
Cost now updates live as the manager builds an order, visible before any submission.
Unified contracts dashboard
All active contracts in one consolidated view, with direct access to related orders and invoices.
Bulk actions
Multi select pattern lets managers add, remove or renew passes for several employees in one action.
Inline CAO subsidy info
Subsidy eligibility now shows directly in the order flow, calculated automatically per employee.
04, Final Screens
From research
to interface
Due to an NDA, I cannot share the real product screens or other internal details from this project. The screens below are high fidelity mockups built using MUI, not the actual NMBS design system, recreated to represent the same design decisions.
Dashboard, unified view of contracts, renewals and pending orders
Contracts, consolidated view with filtering and bulk actions
New Order, real time cost preview during pass selection
Order Detail, CAO subsidy information shown inline
Invoices, full billing history with clear status tracking
05, Results
What changed
for HR managers
Before
Cost visible only after submission
Contracts spread across multiple sections
No bulk actions, everything one by one
CAO subsidy info found outside the platform
After
Live cost preview during order building
Single consolidated contracts dashboard
Multi select for bulk pass management
CAO subsidy calculated and shown inline
06, Conclusion
Direct research,
direct solutions
Every decision on this project traced back to a real conversation with an HR manager. No assumptions, no guesswork. The redesign solved four specific, validated problems instead of trying to reinvent the whole portal.
"The strongest part of this project was staying close to what HR managers actually said. Every screen exists because of a real problem someone described to me directly."
Otávio Bonato, UX/UI Designer