Crypto
Status Visualization
Edge Case Handling
Building Trust : Transparent Cross-Chain Transaction Tracking
Led the redesign of XY Finance’s transaction tracker, transforming complex backend states into intuitive user flows. Successfully mitigated user anxiety and reduced support tickets by 30%.
Time
Aug 2023 - Sep 2023 (2 months)
My Role
Product Designer
Responsibility
End to end UX/UI design
Team
1 PM, 1 UI/UX, 2 Frontend, 2 Backend, 1 Web3 Dev
Crypto
Status Visualization
Edge Case Handling
Building Trust : Transparent Cross-Chain Transaction Tracking
Led the redesign of XY Finance’s transaction tracker, transforming complex backend states into intuitive user flows. Successfully mitigated user anxiety and reduced support tickets by 30%.
Time
Aug 2023 - Sep 2023 (2 months)
My Role
Product Designer
Responsibility
End to end UX/UI design
Team
1 PM, 1 UI/UX, 2 Frontend, 2 Backend, 1 Web3 Dev
Crypto
Status Visualization
Edge Case Handling
Building Trust : Transparent Cross-Chain Transaction Tracking
Led the redesign of XY Finance’s transaction tracker, transforming complex backend states into intuitive user flows. Successfully mitigated user anxiety and reduced support tickets by 30%.
Time
Aug 2023 - Sep 2023 (2 months)
My Role
Product Designer
Responsibility
End to end UX/UI design
Team
1 PM, 1 UI/UX, 2 Frontend, 2 Backend, 1 Web3 Dev
TL;DR
Challenges
Cross-chain swaps are slow and technically opaque, leading to "Black Box Anxiety" and high CS volume during wait periods or failures.
Cross-chain swaps are slow and technically opaque, leading to "Black Box Anxiety" and high CS volume during wait periods or failures.
Key Result
30%
30%
reduction in CS ticket volume (Deflection)
reduction in CS ticket volume (Deflection)
My main contribution
State Mapping: Defined 5 core transaction states to simplify technical backend logic.
Expectation Management: Implemented data-driven ETAs to provide psychological reassurance.
Self-Service UX: Converted cryptic error codes into actionable recovery paths, reducing manual support needs.
State Mapping: Defined 5 core transaction states to simplify technical backend logic.
Expectation Management: Implemented data-driven ETAs to provide psychological reassurance.
Self-Service UX: Converted cryptic error codes into actionable recovery paths, reducing manual support needs.
Background
Background
XY Finance is a Web3 Bridge Aggregator, operating similarly to "Skyscanner" for the Web3 ecosystem. It integrates multiple cross-chain bridges and decentralized exchanges (DEXs) to provide users with the best rates and fastest routes for one-stop asset transfers across various blockchains.
XY Finance is a Web3 Bridge Aggregator, operating similarly to "Skyscanner" for the Web3 ecosystem. It integrates multiple cross-chain bridges and decentralized exchanges (DEXs) to provide users with the best rates and fastest routes for one-stop asset transfers across various blockchains.
Goal
Goal
Enhancing Post-Transaction Visibility
Enhancing Post-Transaction Visibility
Since cross-chain transactions take time, I spearheaded the experience design of the tracking interface to improve progress visibility and minimize user anxiety during unexpected scenarios.
Since cross-chain transactions take time, I spearheaded the experience design of the tracking interface to improve progress visibility and minimize user anxiety during unexpected scenarios.
Here’s a quick look at the product before and after the redesign.
Here’s a quick look at the product before and after the redesign.
Challenge
Challenge
Streamlining the Transaction Tracking Journey
Streamlining the Transaction Tracking Journey
1
System Opacity
Multi-minute wait times with zero feedback caused high user drop-off and anxiety.
Multi-minute wait times with zero feedback caused high user drop-off and anxiety.
2
Complex Exceptions
Users felt stranded during decentralized failures (e.g., low liquidity, high slippage) without clear guidance.
Users felt stranded during decentralized failures (e.g., low liquidity, high slippage) without clear guidance.
3
Technical Gap
Raw backend data was incomprehensible to average users; the challenge was translating data into human-centric feedback.
Raw backend data was incomprehensible to average users; the challenge was translating data into human-centric feedback.
Design Strategy
Design Strategy
A Technical Decomposition Approach
A Technical Decomposition Approach
1
Defining the "State Machine
Mapped API data to 5 user-centric states (Processing, Successful, Reverted, Unexpected, Refunded) for a transparent tracking journey.
Mapped API data to 5 user-centric states (Processing, Successful, Reverted, Unexpected, Refunded) for a transparent tracking journey.
2
Actionable Logic for Abnormal States
Designed specific recovery flows to handle high-failure DeFi scenarios autonomously.
Designed specific recovery flows to handle high-failure DeFi scenarios autonomously.
3
Visibility of System Status
Applied "Visibility of System Status" by defining estimated completion times and error-trigger thresholds based on historical data.
Applied "Visibility of System Status" by defining estimated completion times and error-trigger thresholds based on historical data.
Fast Iteration to explore the best version
Fast Iteration to explore the best version
Solution
Solution
Feature 1
Feature 1
Dual-Layered Progress Visualization
Dual-Layered Progress Visualization
I transformed complex technical paths into an intuitive, dual-layered tracking interface that balances psychological reassurance with technical detail.
I transformed complex technical paths into an intuitive, dual-layered tracking interface that balances psychological reassurance with technical detail.
1
1
Emotional Reassurance (Dynamic Expected Time)
Emotional Reassurance (Dynamic Expected Time)
Dynamic animations with clear ETAs (e.g., "1-2 mins expected") to set immediate user expectations.
Dynamic animations with clear ETAs (e.g., "1-2 mins expected") to set immediate user expectations.
2
2
Trust Building (Three-Stage Progress Bar)
Trust Building (Three-Stage Progress Bar)
The three-stage bar (Step 1: Confirmed, Step 2: Scheduled, Step 3: Completed) helps users monitor asset status. It also displays links to blockchain explorers, allowing advanced users to verify funds on the blockchain directly.
The three-stage bar (Step 1: Confirmed, Step 2: Scheduled, Step 3: Completed) helps users monitor asset status. It also displays links to blockchain explorers, allowing advanced users to verify funds on the blockchain directly.
Feature 2
Feature 2
Comprehensive Design for Abnormal States
Comprehensive Design for Abnormal States
I replaced static error codes with clear copy and explicit CTAs. By guiding users on how to respond to each abnormal state, I turned a potential point of churn into a self-service resolution flow.
I replaced static error codes with clear copy and explicit CTAs. By guiding users on how to respond to each abnormal state, I turned a potential point of churn into a self-service resolution flow.
Reverted Transactions
Clear, empathetic copy such as "Your funds are still in your wallet" confirms fund safety and eliminates immediate panic.
Clear, empathetic copy such as "Your funds are still in your wallet" confirms fund safety and eliminates immediate panic.
Slippage Failures
Guided redirection to partner sites for manual token swaps, turning a failure into a resolution.
Guided redirection to partner sites for manual token swaps, turning a failure into a resolution.
Refunds
Real-time tracking of refund status for third-party bridge anomalies to maintain transparency.
Real-time tracking of refund status for third-party bridge anomalies to maintain transparency.
Feature 3
Feature 3
Strategic Support Defense Lines
Strategic Support Defense Lines
To provide a total safety net, I designed a two-tiered CS support system within the tracking interface.
To provide a total safety net, I designed a two-tiered CS support system within the tracking interface.
Static Support Entry
A permanent "Need help?" entry point ensures beginners always have a visible lifeline.
A permanent "Need help?" entry point ensures beginners always have a visible lifeline.
Dynamic Threshold-Based Triggers
UI proactively surfaces a "Contact Support" button only when a transaction exceeds specific time thresholds, capturing frustrated users at the right moment.
UI proactively surfaces a "Contact Support" button only when a transaction exceeds specific time thresholds, capturing frustrated users at the right moment.
Outcome
Outcome
Elevating User Trust and Operational Efficiency
Elevating User Trust and Operational Efficiency
30% reduction
30% reduction
in CS ticket volume.
in CS ticket volume.
Establishing Platform Trust
Establishing Platform Trust
The transparent progress tracking and guided status indicators successfully eliminated "Black Box Anxiety," fostering long-term user confidence.
The transparent progress tracking and guided status indicators successfully eliminated "Black Box Anxiety," fostering long-term user confidence.