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 alongside two other designers — defining the component system and the plan for moving complex, data-dense screens onto React, high-traffic surfaces first, in close partnership with engineering.
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.
- Planned a staged React migration — sequencing the highest-traffic screens first — and handed it to the client's engineering team to implement.
- Aligned design and engineering on shared tokens and patterns so both sides built against one source of truth.
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 built out the design system — color, type, grid, and breakpoints, with the grid extending Ant Design — 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 — doubled as the migration plan: a React component set the client's engineering team could rebuild against, highest-traffic screens first, with shared tokens and patterns to keep design and code in step across the close workflow.
