PayEngine B2B fintech · payment infrastructure

How a 7-day demo earned a full B2B fintech revamp.

Outcome A 7-day free design demo on three high-traffic surfaces converted into the full-platform revamp. Real before/after pairs across transactions, merchants, onboarding, and settlements.
PayEngine. B2B fintech payment-infrastructure SaaS

Every successful B2B SaaS eventually outgrows its original design. Most teams know it. Few do anything about it before the user numbers tell the story.

PayEngine is a B2B fintech SaaS that runs multi-processor payment infrastructure for other SaaS companies, embedded merchant dashboards, transaction stack, settlement runs, the lot. Years in market, engine working, UX falling behind. They wanted designers with a modern fintech sense and the chops to prove the work first. They scoped a 7-day free demo on three high-traffic surfaces. Day 8 they handed us the rest of the platform.

01

A live platform, not a sandbox. Real merchants running real transactions every day, the redesign couldn’t freeze the product or break the engine. Same data, modern surface.

02

Prove it first. The PM wasn’t committing to a multi-quarter rebuild on a deck. They scoped a 7-day paid pilot on the three surfaces users hit every day. If the work clicked, the platform opened up.

03

Modernize without rewriting. Years of feature work behind the engine, integrations and multi-processor logic intact. The revamp had to bring the front end forward without disturbing the back.

Entry
7-day demo
Three high-traffic surfaces redesigned, multiple iterations each. Day 8 the team handed us the platform.
Scope
Full platform
Transactions, merchants, onboarding, settlements, billing, dashboards, all rebuilt on a shared component system.
System
From scratch
Tokens, primitives, patterns shipped alongside the screens. New flows assemble; the platform got faster, not just prettier.
Impact
↑ Engagement
Visible lift in user engagement after relaunch. Managing payment infrastructure stopped being the friction.
The story

A 7-day demo that earned the full platform on day 8.

PayEngine runs multi-processor payment infrastructure for other SaaS companies: merchant directory, transaction stack, settlement runs, the lot. Years in market, engine working, UX falling behind. They were after designers with a modern fintech sense and the chops to prove the work first, partners, not vendors. Instead of bidding with a deck, we bid with the screens. We picked the three surfaces users hit every day, transactions, main dashboard, search filter popups, and shipped multiple iterations of each inside a 7-day free demo window. Day 8, they handed us the rest of the platform.

Once the platform opened up, we ran a full UX audit before redesigning a single flow. We pitched modernization ideas to the PM, deferred to stakeholders on direction, then shipped. A component-based design system, tokens, primitives, patterns, went out alongside the production screens so new flows would assemble instead of redraw. Daily designer / PM syncs, weekly stakeholder reviews, real before and after pairs on the high-traffic surfaces (transactions, merchants, onboarding) to keep the receipts visible.

ClientPayEngine · B2B fintech · payment infrastructure
RegionUS
Engagement7-day free demo → full platform revamp
StatusLive · engagement up · system shipped
Where we started

What we walked into.

A working payments engine wrapped in years of feature accretion. Transactions, merchants, and onboarding, the three surfaces every customer hit every day, were the ones aging the fastest: cramped tables, low-contrast statuses, monolithic onboarding forms. This is what the platform looked like the day before the demo started.

Old PayEngine transactions table, dense columns with low contrast status indicators and limited inline actions
TransactionsBefore
Old PayEngine merchants directory, cramped layout with inconsistent typography and weak visual hierarchy
MerchantsBefore
Old PayEngine onboarding, long monolithic form with poor progress indication and unclear next steps
OnboardingBefore
Chapter 01

The demo wasn’t a deck. It was three core surfaces, redesigned.

Most agency demos are slides about how good the agency is. Ours was the work. We picked the three surfaces PayEngine’s users hit every day, transaction interface, main dashboard, search filter popups, and shipped multiple iterations of each in seven days. Visual hierarchy, density, modern fintech patterns, motion, error states, empty states. Day 8 the team handed us the rest of the platform.

app.payengine.io/merchants
PayEngine Merchants, a redesigned merchant directory shown during the 7-day demo with logos, status pills, processor and risk indicators in a clean table layout
Demo surface Merchants · one of the production surfaces from the 7-day window Day 7
Chapter 02

Before and after. The receipts.

A revamp earns its keep when you can put the before next to the after and not need a paragraph to explain what got better. Three of the highest-traffic surfaces. Transactions, Merchants, Onboarding, rebuilt for clarity, density, and modern visual hierarchy. What changed wasn’t cosmetic. We rebuilt the IA on each screen: what’s scannable at a glance, what lives behind a click, where the eye goes first, and how the surface holds up at 1,000 rows instead of 12.

app.payengine.io/transactions · before
PayEngine Transactions, before the revamp: the legacy transaction table with dense columns, low contrast status indicators, and limited inline action affordances
app.payengine.io/transactions · after
PayEngine Transactions, after the revamp: a modernized table with clear status pills, sortable columns, inline actions, and improved scannability
Transactions Before / after · status pills, sortable columns, inline actions The daily driver
app.payengine.io/merchants · before
PayEngine Merchants, before the revamp: legacy merchant directory with cramped layout, inconsistent typography, and limited visual hierarchy
app.payengine.io/merchants · after
PayEngine Merchants, after the revamp: clean directory with logos, status, processor and risk indicators, and consistent rhythm
Merchants Before / after · logos, status, processor, risk, cleanly tabled Directory at scale
app.payengine.io/onboarding · before
PayEngine Onboarding, before the revamp: long monolithic form with poor progress indication and unclear next steps
app.payengine.io/onboarding · after
PayEngine Onboarding, after the revamp: stepper-driven flow with progressive disclosure, clear progress, and reduced cognitive load
Onboarding Before / after · stepper, progressive disclosure, clear progress Drop-off down
Chapter 03

The transaction stack: read, create, charge.

Transactions is the surface users return to most. We treated it as a three-state stack: the table for reading, the modal for creating, and the inline charge flow for amounts. The new transaction modal collapses a multi-page form into one focused dialog, merchant, method, amount, processor, while the charging surface gives the operator clean feedback on the amount being processed and the route it’s taking.

app.payengine.io/transactions/new
PayEngine Add Transaction, modal flow for creating a new transaction with merchant, method, amount, and processor selection in a single focused dialog
New transaction Inline modal · merchant + method + amount + processor in one flow Create
app.payengine.io/transactions/charge
PayEngine Charge, focused amount-charging surface with clean numeric input, currency selection, and processor route preview
Charging Numeric clarity · currency · processor route preview Charge
Chapter 04

Merchant operations: onboard, manage, settle.

The merchant lifecycle on PayEngine has three beats: onboard, manage, settle. We rebuilt each one with the same principle, the surface should answer the operator’s question before they have to click. Merchant detail pulls KPIs, processor splits, and risk signals into one page. Settlements give batch totals, processor splits, and downloadable runs without a second tab. The component-based design system shipped alongside is what keeps the platform from going stale.

app.payengine.io/merchants/detail
PayEngine Merchant Detail, a single-page merchant profile showing KPIs, processor splits, risk signals, and recent activity
Merchant detail KPIs · processor splits · risk signals · recent activity Manage
app.payengine.io/settlements
PayEngine Settlements, payouts and settlement runs with batch totals, processor splits, and downloadable reports for finance ops
Settlements Batch totals · processor splits · downloadable runs Settle
Outcome · modernized · engagement up · system shipped

Legacy UX out. Modern fintech in.

Relaunched, the platform saw a visible lift in user engagement, customers stayed hooked, new users came in, and the design system shipped alongside the screens lets the in-house team keep building without falling out of step.

Book a free sprint
Pilot week · on us

Aging B2B SaaS that needs to compete? Start with the same free week we ran for PayEngine.

Five working days, a senior product designer on the most painful surface in your platform. If it doesn’t click, keep every file we ship.

  • Capped at 4 sprints / month
  • No card · NDA on request
Next case study → Case 08 · Bluemark / Haptic · 2024

From a concept to designing a B2B Logistic Shipment Platform.

A B2B logistics SaaS for one of the largest integrated logistics companies in the USA. Strategic partner from concept, idea + user stories in, full platform out, sent straight to development.

Concept Idea + user stories
2–3/wk Sessions with PM
To dev. Sent straight
Logistics · B2B SaaS Read →