All work

Project 022025

SentraA merchant dashboard and design system for a growing fintech

Turning five inconsistent tools into one dashboard — and one system the team can build on.

Role
Product Designer, embedded with dev team
Timeline
6 months
Team
5 engineers, 1 PM, 1 designer (me)
Scope
Design systemResponsive webData-heavy UI

Context

A payments fintech had grown by acquisition: five internal tools, three visual languages, and merchants who needed support calls to find yesterday's transactions. The company consolidated into one dashboard and needed it designed — and designed systemically.

I joined as the designer embedded with the platform team, working release by release rather than in one big reveal.

The problem

Merchants reconciling payments had to cross-reference numbers across tools, then trust that each tool was current. Support tickets confirmed what analytics suggested: the core jobs — find a transaction, understand a discrepancy, export for accounting — were all multi-step scavenger hunts.

On the flip side, engineers were rebuilding tables, filters, and form patterns from scratch in every tool, which made inconsistency the default.

Problem evidenceWhere the experience breaks

Framing

We treated the dashboard and the design system as one product with two audiences: merchants need clarity on their money; engineers need reusable decisions. Designing one without the other would reproduce the mess in new clothes.

So the work ran on two tracks in parallel: experience-level fixes for the top merchant jobs, and system-level patterns harvested from those fixes.

Key decisions

Decision 01

One table pattern to rule them all

We designed a single transaction-table pattern — column priority, filter grammar, empty and error states — and enforced it across every list view. Merchants stopped relearning navigation between pages; engineers stopped debating table code.

Decision 02

Money gets its own typography rules

Amounts, currencies, and statuses follow strict display rules: tabular figures, fixed currency placement, and a status grammar that never relies on color alone. Reconciliation errors from misread amounts dropped measurably.

Decision 03

The system ships as code, not a Figma library

Tokens and components were synced to the repo from day one. Design review happens on pull requests as often as on frames, which kept the system honest and the drift near zero.

The solution

Solution view 01Sentra

A dashboard merchants can live in

Landing on the dashboard answers the three daily questions — did money move, is anything stuck, what needs action — before any filtering. Everything else is one click away and consistently shaped.

Solution view 02Sentra

A system that outlived the project

60+ documented components, tokenized theming, and usage guidelines now cover new feature work. New screens start from patterns, not blank canvases.

Outcome

-64%

support tickets tagged “can't find it”

60+

system components in production

faster feature hand-off, measured by cycle time

Reflection

Working in release trains instead of big-bang redesigns made adoption almost boring — merchants never experienced a “new tool,” just a tool that kept getting clearer.

I also learned that a design system is a political artifact: it succeeds when engineers co-own it, and dies when it's designer property.