Industry
Blockchain / DeFi / Fintech
Client
ONCHAIN Labs
Role
Design Lead (Hands-on)
Scope
Product UX · UI System · Interaction Design
From confusion to confidence in crypto transactions
Redesigning the fiat-to-crypto experience to eliminate friction, build trust at critical moments, and create a scalable transaction model across assets.
Impact
Reduced purchase flow complexity from 7 > 4 steps
Improved pricing transparency before confirmation
Introduced a guided onboarding flow for new users
Context
Onchain Gateway enables users to purchase digital assets directly with fiat.
The core experience is the transaction flow, where users define how much they want to spend and understand what they will receive.
This flow is critical:
It’s the first real interaction
It determines trust
It directly impacts conversion
Problem
The initial experience was fragmented and input-heavy:
Multiple payment methods created early decision fatigue
Users had to input values before understanding outcomes
Conversion and fees lacked clarity
The interface behaved more like a form than a transaction
This created hesitation and reduced completion rates.
Goal
Design a fast, intuitive, and trustworthy transaction experience that:
Reduces cognitive load
Clearly communicates value (what users receive)
Builds confidence before committing
Scales across payment methods and assets
Approach
We reframed the experience around a core principle:
A transaction should feel immediate, not procedural
Key decisions:
Shift from input-driven > outcome-driven UX
Prioritize hierarchy over features
Design for trust through transparency
Reduce steps to a single focused interaction
Core Transformation
Simplifying the transaction experience
The quote screen is the most critical moment in the flow, it determines whether users proceed or drop off.
The original purchase experience required users to navigate several disconnected steps before understanding the outcome of their transaction.
This created uncertainty during the purchase process, particularly for new users unfamiliar with crypto transactions.
The redesign focuses on transforming this fragmented journey into a guided purchase flow, helping users clearly understand pricing, fees, and the final asset amount before confirming their order.
Before
UX Issue
Users needed to interpret multiple pieces of transaction data, asset amount, conversion rate, and fees, without a clear hierarchy.
Fragmented layout
Multiple competing inputs
Weak hierarchy
Unclear outcome
After
Design Goal
Improve readability and help users quickly understand the parameters of their purchase.
The final experience centers on a single action: the amount.
Users immediately understand:
What they are spending
What they will receive
What fees apply
The flow shifts from input-driven > transaction-first.
Extending the System
Designing for trust at the moment of commitment
One of the key UX challenges was helping users understand how the final crypto amount was calculated.
The price breakdown modal provides transparency into conversion rates and fees before users confirm the transaction.
In financial transactions, users need to clearly understand what they are confirming.
The redesigned confirmation screen provides a structured summary of the transaction, allowing users to verify the asset amount, fiat payment, and associated fees before completing the purchase.
Confirm order screen
The confirmation step was redesigned as a trust checkpoint — where users validate their decision before committing.
Clear primary action: “Buy 119130 ACME”
Total cost upfront ($100 USD)
Fees accessible on demand (“Tap to see fees”)
Wallet address integrated directly into the flow
Option to create a smart wallet if needed
At the moment of commitment, users don’t need more information — they need certainty and control.
Price Details Modal
Pricing transparency was critical, but showing all details upfront increased cognitive load.
We introduced a layered pricing model — where details are available when needed.
Clear breakdown of fees (provider + gateway)
Net amount used for purchase
Explicit exchange rate
Contextual explanation of pricing (spread)
Final outcome reinforced (Total ACME received)
Transparency isn’t about showing everything —
it’s about showing the right level of detail at the right time.
System Thinking
A unified transaction model
What ties everything together
Single hierarchy > Amount > Receive > Fees
Progressive disclosure > simple by default, detailed on demand
Consistent structure across the flow
Reusable patterns across assets, currencies, and providers
The result is not just a better interface, but a scalable transaction model that reduces friction and builds trust.
Outcome & Impact
The redesign transformed a fragmented purchase experience into a clearer and more guided transaction flow.
Key improvements included:
Simplifying the purchase journey
Improving transparency around pricing and fees
Reducing cognitive load during transactions
Enabling users to verify transaction details before confirmation