Clir Report Builder

Two companies were using it

Two companies were actively using the Report Builder when I picked up the project. That was the whole active user base.

Clir already tracked DAU/WAU/MAU on the feature, so this was never a measurement problem. We could see perfectly well that nobody was showing up.

Creating a new report meant clearing four dialogs, most of them asking for decisions a user couldn't sensibly make yet. The sidebar was overloaded with text controls, and buttons sat wherever they'd been added over the years. Exporting took far more steps than it should have. Once a few reports existed, finding one was its own problem, because every thumbnail looked like every other thumbnail and there was no way to filter by farm or by date.

Most people hit all of this on their first attempt and didn't come back.

Four goals and five weeks

I wrote four goals down before opening Figma and checked the work against them as it went. The whole project ran five weeks, and the phases bled into each other more than the chart admits.

Four dialogs before you saw a page

Creating a report ran through four dialogs no matter which entry point you came in from, most of them asking for decisions a user couldn't sensibly make yet. There was nothing on screen to go on. The answers all depend on what the report turns out to contain.

I cut the decision points out of the front. All three entry points now land you straight on a report page. Settings for the file, the page and the widgets branch off from there, once you've got something in front of you to change.

You work out what the report is by building it.

A report has to print, so its grid is fixed

Underneath the widgets sat a grid, and it needed rebuilding. I defined what every widget carried: a type, a colour, a shape, and how it behaves when it expands. Standard sizes ran 1x1 to 8x8, with states defined for each.

This is where Brent's work and mine had to differ on purpose. The Dashboard uses a flexible column grid, because a dashboard reflows to whatever window it's in. The report canvas uses a fixed page grid, because a report is a page and somebody is going to print it. The widgets had to look identical in both places while sitting on two different grids.

Consolidating that visual language pulled in several other designers, since these widgets turned up on both sides of the product.

The controls needed grouping

The old interface couldn't manage what the canvas was holding. Controls had been added over the years and left where they landed, most of them in the sidebar, which absorbed everything.

I sorted them into zones by what they act on. Navigation moves you between reports. Page control acts on the page, the canvas is the report itself, the toolbar acts on whatever is selected, and the settings panel holds properties. A collapsed navbar and a grouped toolbar replaced the crowded text sidebar. The final layout has six numbered regions: navbar, top bar, toolbar, page controls, settings panel and canvas.

It also gave the next person a rule. If you can't say which zone a new button belongs in, the zones are wrong.

Export and version history became two features

This is the payoff to the export finding. Snapshot had been doing two jobs. It sent a report to somebody, and it preserved a data state for later. Those two have nothing in common except that both produce a file, and building one feature for both is why both were awkward.

So I split them. Sharing came up to the top level, a Share button with Copy and Download under it, because sending a report is something people do constantly. Snapshot became what people had already been using it as. A Report Snapshots panel lists timestamped versions of a report, so you can open the state it was in on a given date without keeping a folder of PDFs to do that job for you.

The behaviour barely changed. The feature finally matched it.

The design system came out of the work

There was no design system at Clir when I started, which meant every screen I drew involved redrawing parts that already existed somewhere else in the product. By the end I had built out a set of Clir app components: data tables, date pickers, form fields, alert messages, checkbox and radio sets, buttons, and the report card thumbnails.

None of that was on the project plan. I built it because I kept making the same decision twice.

Moving between the Dashboard and the Report Builder

Someone who has arranged a dashboard the way they want has already done most of the work of a report. They've picked the widgets and set the filters. Making them rebuild all of it in a second tool is how you lose them.

So Brent and I coordinated the crossing in both directions. A dashboard can be turned into a report with its widgets and settings preserved. That's what the weekly syncs were for, since the two tools had to agree on enough structure for a layout to survive the trip.

The other half of it is familiarity. Landing on the Report Builder for the first time should feel like arriving somewhere you've already been. The widgets look the same and the settings panel behaves the same. The difference is that you're working on a page.