Tylt·Platform 0→1 · B2B Fintech

Structure first. Four months to launch.

Tylt — dashboard
My role
Founding Designer
0→1 · system design · shipping
Timeline
4 mo
Aug → Dec 2024
Volume
$8M+
Monthly on the platform I designed
Products
5
Built on this foundation
The problem wasn't the customers. It was what their failure cost the merchants.

Before Tylt existed, I was designing TradingLeagues — a crypto-based trading product. We kept seeing the same failure: transactions dropping off not because of pricing or merchant tooling, but because customers couldn't add crypto to their wallets if they didn't already have one.

On the surface it looked like a customer onboarding problem. It wasn't. Every failed transaction was a merchant's revenue loss. Every abandoned payment was a support ticket, a reconciliation task, a customer they couldn't convert again.

The insight that shaped Tylt: merchant success was tightly coupled to customer crypto readiness — and that was a dependency merchants had no way to control. Tylt was built to break that dependency.

Old model

Merchant revenue depends on customer crypto readiness — a dependency merchants had no way to control.

Tylt

Merchant infrastructure absorbs customer complexity entirely. Crypto is invisible to the end user.

A complete platform. From scratch. No prior design, no system, no component library.

When Tylt was greenlit in August 2024, it had a product direction and a development team. It didn't have flows, navigation, IA, or a design language. As the founding designer, the job was to build all of it — fast enough to ship CPG by December.

The first decision I fought for: structure before aesthetics. The founders wanted to see what the product would look like. I pushed to lock flows, navigation, and layouts first — across the entire app — before touching visual design.

Tylt Platform
CPG
Shipped Dec 2024
Send · Receive · Transaction History
Widgets
Post-launch
Button · Form · POS · Bulk Payouts · Auto Withdrawals
CrossRamp
Post-launch
India (UPI) · Brazil (PIX) · Europe (Open Banking)
P2P · Admin Panel · Merchant Insights
Post-launch
IA first. Then a design language that could scale.

This wasn't built from a blank page either. Before locking IA, I looked at how others had already solved pieces of the same problem.

CPG
Cryptomus was analyzed for speed & familiarity — proven UX patterns merchants already understood.
Widgets
Cryptomus & Coingate were looked into specifically for Widgets: payment buttons, forms, POS, bulk payouts.
P2P
Binance P2P & Paxful P2P were looked into to see how they handled trust, escrow, disputes.

With the product scope mapped, I built the information architecture around a single core loop: onboard → transact → track → repeat.

IA
V1Launch scope
In scopeV2 build
ExternalInternalSimpleInvoiceExternalInternalSelfReceive FlowSend FlowReceive FlowSend FlowWidgetsSend & ReceiveSettingsP2PCurrent WalletCPGSettingsCrossRampRetail UsersHome pageInstitutional UsersHome pageAdmin Panel& InsightsTylt Platform
V2Expanded scope
New additionsExisting
Payment ButtonsPayment FormsPoint of SaleBulk PayoutsIndia CorridorBrazil CorridorEurope CorridorWidgetsSend & ReceiveSettingsP2PCurrent WalletCPGSettingsCrossRampRetail UsersHome pageInstitutional UsersHome pageAdmin Panel& InsightsTylt Platform

Once IA was set, basic web & mobile layouts came next — worked out directly on the TradingLeagues scaffold before any visual design began.

LO-FI LAYOUTS
Tylt — lo-fi web and mobile layouts on the TradingLeagues scaffold

Once the flows were stable, I looked at four fintech apps — Plum, Chime, Monese, Wise — for how they handled clarity at scale. One pattern held across all four: a neutral base of black, white, and a few grays, with a single primary color reserved almost entirely for actions. Separation came from shadows, strokes, or gray fills more often than color — card shadows in Chime and Plum, strokes between sections in Monese, gray fills to highlight cards in Wise. Secondary color stayed tightly scoped — a lighter primary tint for inputs (Monese), or accents mapped to specific use cases (Plum). Type ran bigger and more spaced than expected, with weight carrying real hierarchy instead of color.

VISUAL DIRECTION
Tylt — visual direction research

From that research, a basic design system followed — built live in Figma, not a static reference doc.

Color primitives
Color primitives
Semantic colors
Semantic colors
Typographic scale
Typographic scale, Inter
Iconography
Shared icon set for actions, status, and navigation. Consistent everywhere.
Breakpoints & shadows
1280 · 1080 · 640 · 360 — responsive breakpoints, consistent shadow tokens.
Global components
Buttons, inputs, cards, modals — built once, reused everywhere.

From there, hi-fi screens followed — the platform designed responsive from the start, desktop and mobile in parallel. Merchants needed desktop for operational workflows; retail users were primarily mobile.

HI-FI SCREENS
Tylt — desktop and mobile responsive views
Six flows, all built on the same foundation.
01 · Onboarding
V1 was one flow for everyone. V2 splits by account type.

V1 launched with a single flow — sign up with an email ID, land on the same home page. As the product matured, different user types had fundamentally different needs from sign-up. Rebuilt so Personal, Institutional, and Affiliate accounts each start from the right place. Cashier isn't a signup choice — it's access granted on top of a personal account.

Tylt — onboarding, V1 vs V2
02 · Home page
Not every user needed every feature.

Any user could once open a business account to unlock CPG and CrossRamp — needed or not. Usage showed most only used send-receive and P2P, so accounts split by need: Retail/Personal (basics), Institutional/Business (full suite), Cashier (+ cashier access), Affiliate (+ affiliate access).

Tylt — home page customized per account type
03 · Crypto Payment Gateway (CPG)
CPG — the first product to ship.

CPG is Tylt's core product for merchants: accept and send stablecoin payments globally, with instant settlement across networks. It's the send, receive, and transaction-history surface built for institutional accounts. It was also the first product to ship — live in December 2024, four months after design began.

Tylt — Crypto Payment Gateway wallet
3.1 — Send

Send splits by destination — external wallet, internal Tylt account, or self, between a merchant's own wallets.

Tylt — send: external, internal, self
3.2 — Receive

Two receive modes for merchants — Simple for a fixed token and network, Invoice for letting the customer choose.

Tylt — receive: simple, invoice, payment screen
3.3 — Widgets

Widgets are the no-code way to plug CPG into a merchant's existing storefront — payment buttons, forms, POS, and bulk payouts, no API required. Where CPG's core is built for developers, Widgets extend the same payment rails to non-technical merchants who just need to drop in a link, button, or QR code.

Tylt — Widgets: payment button, form, POS, bulk payout, WooCommerce plugin, API docs
04 · Peer-to-Peer (P2P)
Researched by actually using it.

After CPG and Widgets, P2P was next. I used two leading platforms personally — as a real user, not just a researcher — Binance P2P and Paxful, before designing Tylt's own.

Binance P2P
Binance P2P
Competitor analysis — trust, escrow, dispute mechanics.
Paxful P2P
Paxful P2P
Same, second reference point for comparison.
Tylt's own P2P
Tylt's Own P2P
Built internally on those learnings.
05 · CrossRamp
That P2P model became the basis for CrossRamp.

CrossRamp lets customers pay in local fiat — UPI in India, PIX in Brazil, Open Banking in Europe — while merchants settle in crypto, without leaving the merchant's app. Built on Tylt's own P2P infrastructure, reused rather than rebuilt, with escrow holding funds until payment confirms. Launched in India, then expanded to Brazil and Europe. Full story in the CrossRamp case study.

Tylt — CrossRamp buy/sell trade screens
06 · Transaction detail screens
One flat template couldn't tell transactions apart.

This is a payment gateway — a transaction could come through CPG, P2P, or CrossRamp, and be either received or sent. A flat template made every transaction look the same, whichever path it came from. A more robust system was built so any transaction is identifiable just by scanning it: consistent header, then fields specific to that transaction type.

Tylt — transaction detail screen, before and after
Four months to launch. Everything that followed grew from here.
4 Mo
Aug → Dec 2024 — first frame to first live merchant
$8M+
Processed monthly, on the foundation designed here
5
Product surfaces built on this foundation
What designing from nothing taught me.

The hardest part of 0→1 isn't the design — it's that the brief keeps moving. Founders are still discovering what the product is while you're trying to design it. The instinct is to wait for clarity. The better approach, I learned, is to create it — through IA, through flows, through structured decisions that force alignment before you're ready.

The pushback I'm most glad I made was insisting on structure before aesthetics. There was pressure to show what the product would look like early. I held the line: flows and layouts first, visual design after. It meant the visual work, when it came, had something real to respond to.

What I'd do differently: documentation. In a fast 0→1 environment, design decisions get made verbally and move fast. Better decision logs would have made handoff cleaner and made the product easier to evolve after launch.

0→1B2B FintechCrypto PaymentsFounding DesignerNo PM

Metrics and outcomes shown are directional. Specific figures reflect overall trends, not audited data.