Insfers, UI/UX design for a Stripe-like on-chain payments platform

Insfers

Insfers
UI/UX Design · Web3 Payments · B2B SaaS

Insfers — UI/UX design for a Stripe-like on-chain payments platform.

Insfers is a B2B + B2C stablecoin payments platform built entirely on-chain. The Ugly Studio designed the merchant dashboard, payer checkout flows, developer console, and a full design system — 118+ screens across two versions, dev-ready in Figma.

Crypto payments still feel like developer tooling. Most platforms show raw transaction hashes, wallet addresses, and chain IDs without explaining what any of it means for the person trying to run a business. Merchants need Stripe-level clarity. Payers need checkout that works like Venmo.

Insfers makes USDC payments feel effortless — for the merchant accepting them, the customer paying, and the developer integrating. We designed every screen, state, and edge case across the full platform.

Deliverables

Merchant dashboardPayer checkoutDeveloper consoleDesign system
Insfers merchant payments dashboard showing USDC volume, transaction status, and recent payments table
Insfers payment detail view with on-chain confirmation tracker and transaction timeline
Insfers hosted checkout flow showing wallet connect, chain selection, and payment stepper
118+
screens designed across V1 and V2
3
experiences — merchant, payer, developer
V1 + V2
full platform shipped in under 6 weeks
The product

Payments, refunds, invoices, and a developer console — all on-chain.

We designed three connected experiences. The merchant dashboard handles payments, refunds, customers, invoices, payment links, reporting, and settings. The payer checkout makes USDC transactions feel as simple as a card payment — wallet connect, approval step, confirmation tracking, receipt. The developer console gives engineers API keys, webhooks, logs, and a full test mode.

On-chain payments have rules that don't exist in traditional fintech. Transactions are irreversible. Refunds are new transactions, not reversals. Wallets can be on the wrong chain. We designed every state — wrong chain, insufficient balance, pending confirmations, claimable refunds — so the interface is honest about what's happening without confusing the user.

Insfers payments list with status filters, chain badges, and wallet address chips
Insfers refund wizard showing direct refund and claimable refund method selection
Insfers developer console with API keys, webhook configuration, and delivery logs
The brand

Brand identity for an on-chain payments platform.

Web3 products tend to look either overly technical or overly flashy. Neither earns trust from a merchant handling real money. We designed Insfers to feel like financial infrastructure — clean, precise, and confident. The kind of interface where you trust the numbers because the design respects them.

Insfers status pill system, succeeded, pending, failed, and expired
Insfers wallet chips and chain badges for Base and Ethereum
Insfers color palette and transaction-state color system
Insfers button styles, primary, secondary, and danger

Status pills, wallet chips, chain badges, and explorer links appear across every screen. Color maps to transaction state — green for succeeded, amber for pending, red for failed. The system is consistent from the merchant dashboard to the payer checkout.

Insfers brand system applied to merchant dashboard with KPI cards, volume chart, and recent payments
The design system

Design system built for on-chain complexity.

A full component library — status pills, wallet chips, chain badges, tables with bulk actions, detail drawers, confirmation modals, steppers, timelines, and skeleton loaders. Every component handles loading, empty, error, and permission-denied states out of the box.

Insfers UI design system showing status pills, wallet chips, chain badges, stepper components, tables, and modal dialogs

The design system covers both the merchant dashboard and the payer-facing checkout. Here's how it holds up across different parts of the platform.

Insfers hosted checkout and invoice payment pages shown in context
Insfers claimable refund and developer test-mode pages shown in context
The outcome

On-chain payments that feel like traditional fintech.

118+ screens. Three connected experiences. Full state coverage for every on-chain edge case. Insfers went from product spec to dev-ready Figma in under six weeks — a complete payments platform that makes USDC feel as simple as swiping a card.

Next projects
← All projects