Three fields, five levels, zero visibility
These three fields show up everywhere: contracts, purchase orders, invoices, every document in the platform. They look like simple dropdowns. But "Category" alone can go five levels deep: Information Technology → IT Infrastructure → Audio/Visual → Purchase → H11-Installation. The interface showed none of this. You'd pick something, see a single label, and have no idea where it actually sat in the tree.
Hidden hierarchy
Five levels of taxonomy, flattened into a single list with no parent-child context.
Ghost selections
A "+5 more" link that opened a panel, but with no way to see, edit, or confirm what was already selected.
Two directions, twelve users, two rounds
I audited the component across every module it appeared in: Contracts, P2P, Sourcing, mapping where the same CBR fields surfaced and how differently each module's users interacted with them. The problem wasn't just visual; it was structural. That audit shaped two divergent prototypes.
Two prototypes, one question
Prototype 1: a slide-out panel with an expandable tree and an i-icon that revealed all selections on hover. Prototype 2: everything inline, each selection showing its full parent path as a chip directly in the form. The real question was which model users could reason about faster, not which one looked better.
Round 1: The data decided
6 moderated sessions with Contracts TSOs. 6 out of 6 preferred Prototype 1. Prototype 2 made forms feel cluttered; the inline chips consumed too much vertical space. The i-icon tooltip was universally liked: users could confirm selections without reopening the picker. Direction locked.
What Round 1 broke
The approach was right, but the details weren't. 4 out of 6 users found dotted connector lines too subtle to trace hierarchy. The slash separator felt unintuitive; users expected arrows instead. And the three-dot indicator confused 5 out of 6 participants. Each of these became a specific design change for Round 2.
Round 2: Different users, same component
I deliberately tested with P2P specialists, a completely different user group with different workflows but the same component. Dotted lines became solid. Slashes became arrows. The three-dot icon was replaced with a breadcrumb path. Tree usability scored 5/5. All 6 users called the hierarchy highlighting "very useful."
A tree you can actually read
The final design was a slide-out category picker that made hierarchy the hero instead of hiding it. The tree is expanded and clear, with solid connector lines and arrow indicators on non-selectable parent nodes. A breadcrumb path at the top shows exactly where you are. The i-icon tooltip stayed. Click the small "i" on any input field, and the full parent-to-child path unfolds without reopening the picker.
What made this hard
A five-level taxonomy isn't complicated on its own. The interface just pretended the depth wasn't there, and my job was to make that structure visible instead of just tidier. Testing with TSOs, the people who configure the system rather than just use it, showed me a different kind of complexity: the same component had to serve fundamentally different mental models across Contracts and P2P. That constraint is what made the final design stronger than either prototype alone, and it shipped as one unified component across GEP Quantum.