Data table
A dense table component with sortable columns, sticky headers, row selection, inline actions and a bulk action bar. Now used in seven places across the product.
- table/row-h-40
- table/header
- table/zebra
- table/selected
Web UILedgerline
An invoicing dashboard that stops burying the money
Fourteen widgets, six charts, and no answer to the only question a finance lead opens the product to ask.
- Product UI
- Data design
- Audit
- Client
- Ledgerline
- Discipline
- Web UI
- Engagement
- Design audit and UI/UX design
- Platforms
- Responsive web
- Duration
- 10 weeks
- Delivered
- 2025
01The problem
What we walked into
Ledgerline handles invoicing for mid-sized construction firms. The dashboard had been built by adding a widget every time a customer asked for one, and after four years it carried fourteen of them across two screens of scrolling.
The audit found that the single most-used feature, the overdue invoice list, sat below the fold on every laptop screen we tested. Above it were six charts, four of which had never been interacted with by more than two percent of accounts.
Finance leads had built their own workaround: they exported to a spreadsheet on Monday morning and worked from that all week. The product had become an export button with a dashboard attached.
02Goals
What the work had to achieve
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
- G01
Answer the Monday morning question
Who owes us money, how much, and how late. That is the reason the product gets opened, and it should be the first thing on screen.
- G02
Earn every widget
Anything that stays has to justify itself against usage data. Anything that goes needs somewhere sensible to live instead.
- G03
Make the table the product
Finance people work in rows. The table should be as considered as the charts were, with sorting, filtering, bulk actions and saved views.
- G04
Keyboard first
Full keyboard operation for the chase workflow, because power users run it dozens of times a day and a mouse is the slow path.
03UI approach
The decisions that shaped the interface
Four moves that did most of the work. Everything else on the project followed from them.
- 01
Cutting fourteen widgets to four
We ran the audit against twelve months of usage. Four widgets carried almost all engagement, four moved into a reports section, and six were removed with an archive of their data available on request. Nobody asked for the six back.
- 02
The overdue table, promoted and rebuilt
Overdue invoices now occupy the top of the dashboard as a full table with ageing buckets, inline chase actions, and a running total that updates as you filter.
- 03
Saved views instead of settings
Rather than a preferences page, any filter combination can be saved as a named view and shared with a colleague by link. The Monday spreadsheet became a saved view called Monday.
- 04
A complete keyboard model
Roving focus through table rows, single-key shortcuts for the four chase actions, and a command palette for navigation. Every shortcut is discoverable from a help sheet rather than folklore.
04Components and design system
What got built underneath
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
Ageing bucket chips
Five buckets with a fixed colour ramp from neutral to alarm, used identically in the table, the summary row and the reports section.
- ageing/current
- ageing/30
- ageing/60
- ageing/90-plus
Saved view bar
A tab strip of saved filter combinations with sharing, renaming and a dirty state indicating unsaved filter changes.
- tab/rest
- tab/active
- tab/dirty
05Outcomes
What changed after release
Measured by the client, on their own reporting, over the period noted against each figure.
- Dashboard widgets
- 14 → 4Dashboard widgetsSix removed, four relocated to reports.
- Weekly spreadsheet exports
- −72%Weekly spreadsheet exportsThe Monday export workflow largely stopped.
- Median time to first chase action
- 9sMedian time to first chase actionDown from 47 seconds in the previous dashboard.
- Chase workflow operable by keyboard
- 100%Chase workflow operable by keyboardVerified against the full task list, no mouse required.
The six deleted widgets had taken an estimated nine engineering months to build. Removing them took an afternoon.
The audit was uncomfortable and completely correct. We had been measuring how much we shipped, not whether anyone used it.
06Gallery
Screens and system, laid out
Layout diagrams of the interface as delivered, with a note on what each one is doing.
- 01 / 04
Overdue dashboard
The rebuilt dashboard: overdue table first, running total live against the active filter, four widgets that earned their place.
Interface layout diagram from the Ledgerline project.
- 02 / 04
Table with bulk actions
Row selection, ageing buckets and inline chase actions, all reachable from the keyboard.
Interface layout diagram from the Ledgerline project.
- 03 / 04
Saved views
Named filter combinations, shareable by link, with a dirty state for unsaved changes.
Interface layout diagram from the Ledgerline project.
- 04 / 04
Ageing ramp
Five buckets and their colour ramp, tested at AA against both table backgrounds.
Interface layout diagram from the Ledgerline project.
07Take it with you
The one-page version
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Case study summary
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-ledgerline-dashboard-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Ledgerline
Project: An invoicing dashboard that stops burying the money
Discipline: Web UI
Engagement: Design audit and UI/UX design
Platforms: Responsive web
Duration: 10 weeks
Year: 2025
OVERVIEW
================================================================
Ledgerline invoicing had accumulated fourteen dashboard widgets over four years, pushing the overdue invoice list, its most-used feature, below the fold on every laptop screen tested.
Following a usage audit we cut the dashboard to four widgets, promoted and rebuilt the overdue table with ageing buckets and inline chase actions, introduced shareable saved views to replace the weekly spreadsheet export, and specified a complete keyboard model for the chase workflow.
Delivered across 10 weeks: a twelve-month usage audit with findings scored by severity, 18 redesigned screens at three breakpoints, a dense data table component now used in seven places, and a documented keyboard and shortcut model.
Results: fourteen widgets reduced to four, weekly spreadsheet exports down 72 percent, median time to first chase action down from 47 seconds to 9, and the full chase workflow operable without a mouse.
OUTCOMES
================================================================
14 → 4 Dashboard widgets
Six removed, four relocated to reports.
−72% Weekly spreadsheet exports
The Monday export workflow largely stopped.
9s Median time to first chase action
Down from 47 seconds in the previous dashboard.
100% Chase workflow operable by keyboard
Verified against the full task list, no mouse required.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Working on something similar?
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.
- Prefer email
- studio@baseline.design
- Current availability
- Taking on two engagements for the coming quarter.
- Typical reply time
- Two working days, from a partner rather than a form.