BlackLine runs the financial close — the dense, deadline-driven work of reconciling accounts and certifying the numbers — for large enterprises. Years of accreted frontend had left it a patchwork of inconsistent UI and aging components that made already-heavy work slower than it needed to be.
The close never stops, so the product couldn't be rebuilt in one move. The work was to modernize it and migrate the frontend to React without disrupting the reconciliation workflows finance teams depend on — and a design system was the lever that made that possible.
Role
I led design for the redesign and migration — defining the component system and partnering closely with engineering to move complex, data-dense screens onto React, high-traffic surfaces first.
What shipped
- Established a design system as the single source of truth for a sprawling enterprise UI.
- Modernized data-heavy dashboards and forms without losing the workflows users rely on.
- Sequenced a staged React migration so the busiest screens moved first.
- Aligned design and engineering on shared tokens and patterns to cut rework across the close.
Selected decisions
- Built components for the platform's hardest surfaces — reconciliation grids, journal-entry forms, and certification-status tables.
- Reorganized the dashboard around the work itself: what's due, overdue, and in progress, with clear preparer, approver, and reviewer states.
- Handled dense financial data — amounts, accounts, transaction dates, sub-types — with consistent, scannable patterns.
- Documented color, type, grid, and components so a large UI could converge on one language.
Walkthrough
A closer look
Financial close is high-stakes work done against a hard deadline, and the legacy interface had grown inconsistent enough to get in its way. The redesign reorganized the dashboard around the work a user actually owes — what's due, what's overdue, what's in progress — with the preparer, approver, and reviewer states that govern the close made explicit.
The hardest surfaces are the data-dense ones. Reconciliation grids, journal-entry forms, and certification tables carry amounts, accounts, transaction dates, and sub-types all at once, so the work was a consistent, scannable set of patterns for that volume — enough structure to read it quickly without burying the task inside it.
Complex inputs were rebuilt to handle the real shape of the data while keeping the workflow intact. These are screens people live in all day, so the constraint was to modernize the surface without forcing anyone to relearn how the close gets done.
Underneath the screens I stood up a design system — color, type, grid, and breakpoints documented as the single source of truth — so a UI that had drifted across years of additions could converge on one language.
The component library — buttons, navigation, and the rest — was also the migration plan. Engineering rebuilt against it in React, starting with the highest-traffic screens, with shared tokens and patterns keeping design and code in step and cutting rework across the close workflow.
