Collibra — Enterprise data governance
A core widget in Collibra's Data Marketplace. It used to show one port per tab; now consumers compare ports and request access in one place.
Product Designer — full design cycle on this feature.
What someone is choosing here
Collibra helps large organisations find, govern and use data. In its Data Marketplace, a consumer opens a data product — a package built from context, data and controls, sitting behind one access point — looks at the output ports that deliver it, and checks each port's data contract before requesting access.
The viewer sits at that last step: is this the right data, and can I request it?
10-second version
“The widget feels chaotic. Clean it up.”
I made each port a scannable card in one visible list, with detail in a panel beside it.
Shipped. A consumer can now compare ports and request access without leaving the page.
Starting point
To request access, a data consumer first had to choose one output port.
Inside the widget, attributes piled up with no clear order; around it, the section mixed the viewer with other content. It felt chaotic even with a single port. The brief: clean it up.
01One port at a timeEach output port occupied a separate tab.
02Two routesData contract stayed here; asset details opened elsewhere.
A cosmetic brief, taken apart: what the old screen made hard, and the shape that replaced it.
Marketplace → data product page → Outputs section → the viewer. It sits low on the page you land on when you open a data product, among everything else.
Attributes, content and the viewer all carried the same visual weight. A consumer would not miss the viewer — but its edges were hard to feel, and the section read as one continuous, slightly chaotic stream.
Each tab exposed one port. To compare several outputs, a consumer had to open them one by one and remember what changed. More ports increased both clicking and recall.
You arrive from the marketplace, open a data product and land on its page, where the viewer sits in the Outputs section with one tab per port. From a port, two things lead somewhere else: the data contract opens as a panel on the same page, and the port's asset page is a page of its own — you get there by button and come back by hand. At the end of the route is the thing you came for: access.
Mapping the interviews in Dovetail, I looked at what consumers weigh, what they skip and where they slow down. Two kinds of information came apart: the few things you need to choose a port, and the asset details you check once you have chosen. On the page they sat mixed together — and the details lived on a different page, behind a button.
This is what the brief actually asked for: tidy the widget up, give it room, give it an edge. So the first pass was UI work — I regrouped the port's fields and gave the viewer a zone of its own instead of edges shared with everything around it. What the research decided was the order inside: it told me the few things people weigh when they choose a port, so those went to the top and the rest below. The viewer read better. It still showed one port at a time.
Then I tried a different shape. Every port became a card, all of them side by side, each carrying the same signals in the same place. Clicking a card switched the viewer to that port's details, with a way back to the grid — a drill-down: the depth arrives when you ask for it, and the grid steps aside to make room.
Then the details came out of the widget's second level and into a panel beside the grid: the port you picked opens on the right, the other cards stay where they were — overview and detail side by side instead of one replacing the other. The data contract became a tab in that panel and the asset page a link inside it, so both buttons that used to take you off the page were gone. That was the version I liked, and the one I took forward.
The shipped design is the two-layer split, built in: every port is a card with the same few signals, and the selected port opens in a panel beside the others — not instead of them. Here is the shipped page, walked through the way a consumer meets it.
A data product in Collibra opens on its overview — description, business case, category. The output ports the consumer actually needs to compare live further down the page, past all of this.
Scroll to the outputs and every port is a card carrying the same signals in the same place: status, data contract, a one-line summary. The eye compares them at a glance instead of clicking tabs one at a time.
Clicking a card marks it with a Collibra-blue border and opens its detail, without taking the other ports off screen.
The preview panel opens beside the grid. The field narrows from three columns to two but does not jump — the cards you were comparing stay where they were, and the contract, quality score and request-access all sit on the one surface.
The brief was cosmetic. The change wasn't.
I was asked to tidy a widget. The interviews pointed elsewhere: nothing was missing and nothing was really cluttered — the detail just sat in front of a decision it didn't help. So I changed what the widget is for, not how it looks.
That's the call I'd make again — and the measure I followed after release is time-to-access: how long a consumer takes from finding a data product to requesting access. The viewer shipped inside a larger Data Product Area redesign, so I won't credit the movement to this widget alone; the numbers stay inside Collibra.
Out of scope, on purpose
This release was the first iteration of the new viewer, shipped deliberately small — and after it we watched closely how consumers used it.
Two threads continued past it. One was the admin side: I started designing how an organisation configures the viewer itself — which attributes its port cards carry, and which stay in the panel. The other was the widget’s soft edge. Admins assemble these pages from arbitrary blocks, so a clear boundary is a platform pattern, not a widget fix; I wrote it up as a proposal for the design-system team.
