Crypto
End-to-End Design
Simplifying Complexity
Designing for Scalability: Redefining the Core Transaction Flow for Bridge Aggregator
Led the core flow redesign for XY Finance to navigate a 200% expansion in routing options. By streamlining high-density data into efficient decision paths, I delivered a 7.2% conversion lift and 12% YoY growth through a scalable, intuitive architecture.
Time
Jun 2024 - Jul 2024 (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
End-to-End Design
Simplifying Complexity
Designing for Scalability: Redefining the Core Transaction Flow for Bridge Aggregator
Led the core flow redesign for XY Finance to navigate a 200% expansion in routing options. By streamlining high-density data into efficient decision paths, I delivered a 7.2% conversion lift and 12% YoY growth through a scalable, intuitive architecture.
Time
Jun 2024 - Jul 2024 (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
End-to-End Design
Simplifying Complexity
Designing for Scalability: Redefining the Core Transaction Flow for Bridge Aggregator
Led the core flow redesign for XY Finance to navigate a 200% expansion in routing options. By streamlining high-density data into efficient decision paths, I delivered a 7.2% conversion lift and 12% YoY growth through a scalable, intuitive architecture.
Time
Jun 2024 - Jul 2024 (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
Navigating decision paralysis caused by a 200% expansion in routing options, ensuring an intuitive experience despite high information density.
Navigating decision paralysis caused by a 200% expansion in routing options, ensuring an intuitive experience despite high information density.
Key Result
+10.5%
Conversion Lift
Conversion Lift
+7.2%
Transaction Growth
Transaction Growth
+12%
+12% YoY
YoY growth
YoY growth
My main contribution
End-to-End Redesign: Led the strategic overhaul of the core transaction flow from ideation to final execution.
IA Restructuring: Applied progressive disclosure to transform cluttered routing options into streamlined decision paths.
Scalable Systems: Established a modular design framework to support the seamless integration of 20+ networks and 15+ providers.
End-to-End Redesign: Led the strategic overhaul of the core transaction flow from ideation to final execution.
IA Restructuring: Applied progressive disclosure to transform cluttered routing options into streamlined decision paths.
Scalable Systems: Established a modular design framework to support the seamless integration of 20+ networks and 15+ providers.
Background
Background
XY Finance operates as the "Skyscanner" for Web3, aggregating 15+ bridges and 20+ chains to provide users with optimal rates and speeds. Our core value is simplifying the fragmented multi-network landscape into a seamless, one-stop asset transfer experience.
XY Finance operates as the "Skyscanner" for Web3, aggregating 15+ bridges and 20+ chains to provide users with optimal rates and speeds. Our core value is simplifying the fragmented multi-network landscape into a seamless, one-stop asset transfer experience.
Goal
Goal
Reduce Decision Friction through Scalable Architecture
Reduce Decision Friction through Scalable Architecture
To support a 200% expansion in service integrations, the legacy interface required a strategic overhaul to handle high-density data. I led the End-to-End Redesign to transform technical complexity into intuitive paths, optimizing cognitive load to ensure high-conversion efficiency and long-term scalability.
To support a 200% expansion in service integrations, the legacy interface required a strategic overhaul to handle high-density data. I led the End-to-End Redesign to transform technical complexity into intuitive paths, optimizing cognitive load to ensure high-conversion efficiency and long-term scalability.
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
Old System Could No Longer Support Product Growth
Old System Could No Longer Support Product Growth
1- Cognitive Overload & Decision Paralysis
As routing options expanded, the legacy card design caused information clutter on mobile, making comparison difficult and undermining the aggregator’s value.
As routing options expanded, the legacy card design caused information clutter on mobile, making comparison difficult and undermining the aggregator’s value.
2- Decision Friction from Fee Complexity
The original design exposed too many technical fee items, creating confusion. Users struggled to grasp the total cost or the purpose of each individual charge.
The original design exposed too many technical fee items, creating confusion. Users struggled to grasp the total cost or the purpose of each individual charge.
3- Lack of Differentiated Filtering
In varied cross-chain scenarios, the system lacked tools to help users customize results based on specific goals, such as prioritizing speed over rates.
In varied cross-chain scenarios, the system lacked tools to help users customize results based on specific goals, such as prioritizing speed over rates.
Design Strategy
Design Strategy
1
Shifting from Choice Overload to Decision Guidance
To manage a 200% expansion in available routes , I applied Progressive Disclosure to prioritize key decision drivers. By filtering noise, I optimized the cognitive load, guiding users toward efficient decisions among high-density alternatives.
To manage a 200% expansion in available routes , I applied Progressive Disclosure to prioritize key decision drivers. By filtering noise, I optimized the cognitive load, guiding users toward efficient decisions among high-density alternatives.
2
Building Trust via Financial Abstraction
I translated complex, multi-layered financial logic into an intuitive expenditure model. This abstraction eliminates cost uncertainty and fosters trust through transparent, user-centric interaction design.
I translated complex, multi-layered financial logic into an intuitive expenditure model. This abstraction eliminates cost uncertainty and fosters trust through transparent, user-centric interaction design.
3
Architecting a Scalable Framework for Dynamic Growth
To support the seamless integration of 20+ networks and 15+ providers, I architected a modular system framework. This architecture ensures experience consistency and resilience throughout rapid business expansion.
To support the seamless integration of 20+ networks and 15+ providers, I architected a modular system framework. This architecture ensures experience consistency and resilience throughout rapid business expansion.
Fast Iteration to explore the best version
Solution
Solution
Feature 1
Feature 1
Modular Collapsible Routing: Maximizing Comparison Efficiency and Information Hierarchy
Modular Collapsible Routing: Maximizing Comparison Efficiency and Information Hierarchy
To accommodate the 200% expansion in available routes, I designed a provider-led collapsible card architecture. I prioritized the destination amount while maintaining the visibility of estimated time and fees in the collapsed state. Through Progressive Disclosure, I enabled users to compare 5 routes simultaneously on a single desktop screen, eliminating the browsing bottlenecks of the legacy design.
To accommodate the 200% expansion in available routes, I designed a provider-led collapsible card architecture. I prioritized the destination amount while maintaining the visibility of estimated time and fees in the collapsed state. Through Progressive Disclosure, I enabled users to compare 5 routes simultaneously on a single desktop screen, eliminating the browsing bottlenecks of the legacy design.
Decision Factor Prioritization
Decision Factor Prioritization
Enlarged target token amounts and utilized visual hierarchy to distinguish core results from secondary data, optimizing scannability under high information density.
Enlarged target token amounts and utilized visual hierarchy to distinguish core results from secondary data, optimizing scannability under high information density.
Progressive Disclosure of Technical Details
Progressive Disclosure of Technical Details
By collapsing complex routing nodes by default, I maximized screen real estate and increased visible options from 2 to 5 per screen. The full path (DEX -> Bridge -> DEX) is revealed only upon interaction, satisfying advanced transparency needs while significantly boosting comparison efficiency.
By collapsing complex routing nodes by default, I maximized screen real estate and increased visible options from 2 to 5 per screen. The full path (DEX -> Bridge -> DEX) is revealed only upon interaction, satisfying advanced transparency needs while significantly boosting comparison efficiency.
Feature 2
Feature 2
Fee Logic Abstraction: Reducing Transaction Anxiety through Information Simplification
Fee Logic Abstraction: Reducing Transaction Anxiety through Information Simplification
I translated complex, multi-layered technical charges—including bridge fees, affiliate shares, and withholding buffers—into an intuitive expenditure model. Users no longer need to grasp intricate backend mechanics; they focus primarily on the total native token spent and the final amount received. This abstraction transforms cluttered financial data into straightforward decision metrics.
I translated complex, multi-layered technical charges—including bridge fees, affiliate shares, and withholding buffers—into an intuitive expenditure model. Users no longer need to grasp intricate backend mechanics; they focus primarily on the total native token spent and the final amount received. This abstraction transforms cluttered financial data into straightforward decision metrics.
Feature 3
Feature 3
Multi-Dimensional Customization: Empowering Personalized Decisions for Diverse Goals
Multi-Dimensional Customization: Empowering Personalized Decisions for Diverse Goals
Customized Sorting and Smart Labeling
I designed a multi-criteria sorting logic (return/time) that enables users to toggle priority between "Best Return" and "Fastest Time" with a single click.
Paired with dynamic labels, this allows users to instantly identify key differences between options, significantly reducing comparison time.
I designed a multi-criteria sorting logic (return/time) that enables users to toggle priority between "Best Return" and "Fastest Time" with a single click.
Paired with dynamic labels, this allows users to instantly identify key differences between options, significantly reducing comparison time.
Personalized Provider Preferences
I designed personal preference settings that allow users to filter specific providers, ensuring the product adapts to diverse user needs—from cost-sensitivity to time-efficiency.
I designed personal preference settings that allow users to filter specific providers, ensuring the product adapts to diverse user needs—from cost-sensitivity to time-efficiency.
Feature 4
Feature 4
Transparent Transaction Confirmation: Strengthening Security and User Confidence before Execution
Transparent Transaction Confirmation: Strengthening Security and User Confidence before Execution
I redesigned the Confirmation page to address the information gaps in the legacy version. The new design explicitly incorporates provider logos and estimated timeframes, while simplifying complex fee breakdowns.
By optimizing the visual comparison of dual-end addresses, I ensured users can accurately verify all data before execution, significantly strengthening their sense of security.
I redesigned the Confirmation page to address the information gaps in the legacy version. The new design explicitly incorporates provider logos and estimated timeframes, while simplifying complex fee breakdowns.
By optimizing the visual comparison of dual-end addresses, I ensured users can accurately verify all data before execution, significantly strengthening their sense of security.
Outcome
Outcome
Achieving Conversion Growth through Scalable Architecture
Achieving Conversion Growth through Scalable Architecture
Conversion Lift
Conversion Lift
+10.5%
+10.5%
(Quote-to-Confirmation stage)
(Quote-to-Confirmation stage)
Transaction Growth
Transaction Growth
+7.2%
+7.2%
(Total successful transactions)
(Total successful transactions)
Business Impact
Business Impact
+12%
+12%
YoY growth
YoY growth
This redesign proves that scalability and usability can coexist. By optimizing information architecture and applying Progressive Disclosure, I successfully translated complex cross-chain mechanics into an intuitive user experience. This not only mitigated the cognitive load of a 200% expansion but also directly fueled conversion growth, establishing a resilient design foundation for XY Finance’s continued scaling.
This redesign proves that scalability and usability can coexist. By optimizing information architecture and applying Progressive Disclosure, I successfully translated complex cross-chain mechanics into an intuitive user experience. This not only mitigated the cognitive load of a 200% expansion but also directly fueled conversion growth, establishing a resilient design foundation for XY Finance’s continued scaling.