VERSAPAYPRODUCT DESIGN · 2022–24

A MILLION USERS, ONE LANGUAGE.

Versapay moves money for finance teams. Two years of it ran through our hands: the platform’s move off Ruby onto React, the design system that made that move survivable, and the reporting product that shipped on top of it.

Role: Lead Product Designer
Years: 2022–2024
Client: Versapay
Scope: System, UX, UI, handoff

01 · The brief

Move the platform. Keep the familiarity.

A legacy Ruby product had grown into different versions of tables, date pickers and warnings. Engineering was moving to React; design needed to write down one shared language.

01

Familiarity was a requirement

Finance teams work in these screens every day. Month end does not pause for a redesign.

02

Built for engineering

Variants map to component props, not just tidy Figma pages. If a component could not be built as drawn, the drawing needed to change.

03

Reporting was the proof

Canned Reports became the first product built entirely on the new system.

02 · Process

Structure before colour.

Directions stayed visible and reviewable. The wireframe page became a record of how the shape was found, not a presentation of only the winning idea.

Wireframe frames: 394
Idea explorations: 86
User-test frames: 37
MVP screens: 34

03 · A decision tested

Navbar or dropdown?

01

Navbar · shipped

Both reports stay visible. Testers understood there were two products without opening anything, and switching took one click.

02

Dropdown · cut

Tidier at rest, worse in use. It hid the second report; people asked for a feature that already existed.

04 · The flow

Waiting is a state, not a spinner.

Report generation is asynchronous. The interface needed its own copy, exit, and recovery path for the wait.

01
Choose and scope
Report type, then a date range. Two decisions, no configuration screen.
02
Generating
A four-step load animation and a row you can leave. Closing the tab does not cancel the job.
03
Email, then download
The notification is the product. The CSV stays in the table until it expires.
04
No data match
An empty report is not an error. Show what was searched and offer a wider range.

05 · The product

Two reports. One shell.

Customer adoption and payment adoption answer different questions but use the same table, picker and download behaviour. Learning one teaches you the other.

Canned Reports MVP application; reconstructed from the production Figma file.

Customer adoption and payment adoption shown as visible tabs.

The actual comparison option using a report selection dropdown.

Actual report state sample: Ready to download.

Actual report state sample: No data match.

Payment adoption report with method filters, payment table and CSV download.

Actual calendar and date range picker demonstration from the public case study.

Actual grayscale wireframe sample from the portfolio.

Inter typography scale and the published colour tokens.

Published component names, variant axes and counts.

06 · The system

Variants written the way engineers read them.

Every axis maps to a prop: size, colour, state, variant. One button has 297 legal combinations. The library contains 35 component sets and 57 standalone symbols.

Component	Specification	Axes / notes
Button	297 variants	Size · colour · state · variant
IconButton	216 variants	Size · font size · colour · state
Checkbox	186 variants	Checked · indeterminate · size
TableCellRow	144 variants	Hover · selected · columns · divider
TableHeadRow	36 variants	Small · checkbox · columns
Typography	25 variants	13 roles · gutter
Tab	18 variants	Active · orientation · icon
Table	16 variants	Small · checkbox · small screen
Date picker	502 instances	Closed · calendar · range
Load animation	4 steps	Plus progress bar
Filter pill	5 states	Default to applied
Empty state	No data match	Plus success banner

07 · Tokens

One language across the platform.

Brand#FF8800

Ink deep#002233

Text#212121

Secondary text#595959

Action#37474F

Success#3C7E40

Pending#FFA601

Warning#AF1616

Border#E0E0E0

Surface#FAFAFA

Ink#131313

Plum#443344

Product typography: Inter. Roles range from 32/bold headings through 20/semibold sections, 16/medium navigation, 14/bold table headings and 13/regular body copy.

08 · Outcome

The migration became a checklist.

Once the language existed, teams could rebuild screens in React without a fresh design debate each time. Canned Reports shipped on the system and became the reference for other teams.

01

One library, many teams

Components specified against React props kept design and code in step.

02

Familiar on day one

Structure and vocabulary stayed recognisable through the rebuild.

03

Decisions on evidence

Report navigation was settled by user testing.

04

Shipped, not shelved

Reporting became the first product delivered on the new system.

The result

The migration stopped being a redesign and became a checklist. A million-user platform could move forward with one language.

Versapay is the client. Interface examples are reconstructions from the production design file, preserved from this portfolio’s original case study. They describe the design work, not current production software.