Chen Yu Pan
ModernizingCore Deposit & Withdrawal Flows
Simplifying core crypto / fiat deposit and withdrawal flows within existing backend, compliance, and provider constraints.
Role
Main Product Designer
Duration
1.5 – 2 months
Platform
Web · Mobile Web
Scope
Crypto & Fiat · Deposit & Withdrawal
Why the Redesign Was Needed
A crypto exchange lets users deposit and withdraw both crypto assets and fiat currency. Crypto moves through blockchain networks, while fiat usually goes through banks or payment providers, with additional verification and compliance requirements.
Over time, new payment methods, provider requirements, and verification steps were added to the existing experience. Crypto and fiat still followed similar multi page structures, even as the needs behind each transaction became increasingly different.
Crypto and Fiat Needed Different Flows
A review of the existing deposit and withdrawal journeys showed that similar multi-page structures were being used for transactions with very different needs. The same structure added unnecessary steps to relatively direct crypto transfers, while leaving fiat flows with more payment, provider, and guidance requirements to handle.
Problems
Too many page changes
A straightforward crypto deposit was split across three separate pages, creating unnecessary breaks in the flow.
The method page added an extra decision
Address based deposit followed the standard pattern, while alternative wallet options such as MetaMask and Phantom occupied a separate method page.
Fiat had method specific requirements
Fiat involved more payment, bank, verification, and provider requirements, depending on the selected method.
Fiat transfer instructions were hard to follow
The page showed the bank details, but not enough guidance on what users needed to do next. Completing the transfer could require additional help.
Start With the Task, Not the Legacy Structure
Instead of optimizing the legacy pages one by one, the redesign started with the task behind each transaction. Established exchange patterns provided a baseline, then the flows were adapted to the product and technical constraints.
Keep crypto transfers direct
Keep currency, network, and transfer details in one continuous flow, while keeping alternative wallet options out of the main path.
Let each fiat payment method follow the flow it needs
Bank transfers needed clear instructions and bank details, while third-party payments used an embedded payment form.
One Workspace for Crypto Transfers
The legacy crypto flow split its core steps across multiple pages. The redesign kept the same task progression while bringing those steps into one continuous workspace.
Crypto withdrawal followed the same approach, keeping currency, network, destination, and amount in one workspace.
Web3 Wallet as an Alternative Path
After selecting a blockchain network, users could either continue with an address-based deposit or connect an external Web3 wallet such as MetaMask or Phantom.
There wasn’t enough usage data to justify removing Web3 Wallet, so the capability remained without keeping the separate method step. Address-based deposit became the direct path after network selection, while Web3 Wallet stayed available as an alternative.
Let Each Fiat Method Follow the Flow It Needs
For fiat deposit, simplifying the experience did not mean removing steps everywhere. Bank transfers and third party payments required different actions, so each method kept the structure it needed.
Bank Transfer : Guide first, then provide the details
A dedicated guidance step was placed before the receiving bank details, making the required action explicit before users moved to their bank.
Third Party Payment : Complete payment in an embedded provider form
Users entered the deposit amount first, then completed the payment through the provider's form embedded directly in the exchange.
A Simpler Fiat Withdrawal Within Backend Constraints
The first concept combined currency, withdrawal method, bank account, and amount on one page. After reviewing it with the backend engineers, we found that eligible bank accounts were only returned after the withdrawal method was submitted. Simply selecting a method from the dropdown could not support the one-page flow.
The design was adjusted and confirmed with the engineering team within a short timeframe. The release kept two focused steps instead: submit the withdrawal method first, then load the eligible bank accounts and complete the withdrawal.
Outcome & Delivery
The redesign went beyond improving individual flows. It reframed how crypto and fiat transactions should work, made selective trade-offs, and kept delivery moving through product and technical constraints.
Reframe the Model
Instead of optimizing four legacy flows separately, the redesign established two clearer patterns: continuous flows for crypto and method-specific flows for fiat.
Make the Trade offs
Steps were removed where they added little value, while Web3 Wallet access and fiat guidance stayed where the product still needed them.
Resolve the Constraint
When the one-page fiat withdrawal concept did not fit the existing backend mechanism, the flow was adjusted with engineering into a version that could ship without a larger backend change.
Sequence the Rollout
Deposit flows moved into production first while withdrawal work continued in parallel. Both withdrawal flows were handed off next and implemented shortly afterward.
Across the full scope, the work moved from reframing the problem to making trade offs, resolving technical constraints, and shipping all four redesigned flows.
More case studies?
Let’s work together.
ModernizingCore Deposit & Withdrawal Flows
Simplifying core crypto / fiat deposit and withdrawal flows within existing backend, compliance, and provider constraints.
Role
Main Product Designer
Duration
1.5 – 2 months
Platform
Web · Mobile Web
Scope
Crypto & Fiat · Deposit & Withdrawal
Why the Redesign Was Needed
A crypto exchange lets users deposit and withdraw both crypto assets and fiat currency. Crypto moves through blockchain networks, while fiat usually goes through banks or payment providers, with additional verification and compliance requirements.
Over time, new payment methods, provider requirements, and verification steps were added to the existing experience. Crypto and fiat still followed similar multi page structures, even as the needs behind each transaction became increasingly different.
Crypto and Fiat Needed Different Flows
A review of the existing deposit and withdrawal journeys showed that similar multi-page structures were being used for transactions with very different needs. The same structure added unnecessary steps to relatively direct crypto transfers, while leaving fiat flows with more payment, provider, and guidance requirements to handle.
Problems
Too many page changes
A straightforward crypto deposit was split across three separate pages, creating unnecessary breaks in the flow.
The method page added an extra decision
Address based deposit followed the standard pattern, while alternative wallet options such as MetaMask and Phantom occupied a separate method page.
Fiat had method specific requirements
Fiat involved more payment, bank, verification, and provider requirements, depending on the selected method.
Fiat transfer instructions were hard to follow
The page showed the bank details, but not enough guidance on what users needed to do next. Completing the transfer could require additional help.
Start With the Task, Not the Legacy Structure
Instead of optimizing the legacy pages one by one, the redesign started with the task behind each transaction. Established exchange patterns provided a baseline, then the flows were adapted to the product and technical constraints.
Keep crypto transfers direct
Keep currency, network, and transfer details in one continuous flow, while keeping alternative wallet options out of the main path.
Let each fiat payment method follow the flow it needs
Bank transfers needed clear instructions and bank details, while third-party payments used an embedded payment form.
One Workspace for Crypto Transfers
The legacy crypto flow split its core steps across multiple pages. The redesign kept the same task progression while bringing those steps into one continuous workspace.
Crypto withdrawal followed the same approach, keeping currency, network, destination, and amount in one workspace.
Web3 Wallet as an Alternative Path
After selecting a blockchain network, users could either continue with an address-based deposit or connect an external Web3 wallet such as MetaMask or Phantom.
There wasn’t enough usage data to justify removing Web3 Wallet, so the capability remained without keeping the separate method step. Address-based deposit became the direct path after network selection, while Web3 Wallet stayed available as an alternative.
Let Each Fiat Method Follow the Flow It Needs
For fiat deposit, simplifying the experience did not mean removing steps everywhere. Bank transfers and third party payments required different actions, so each method kept the structure it needed.
Bank Transfer : Guide first, then provide the details
A dedicated guidance step was placed before the receiving bank details, making the required action explicit before users moved to their bank.
Third Party Payment : Complete payment in an embedded provider form
Users entered the deposit amount first, then completed the payment through the provider's form embedded directly in the exchange.
A Simpler Fiat Withdrawal Within Backend Constraints
The first concept combined currency, withdrawal method, bank account, and amount on one page. After reviewing it with the backend engineers, we found that eligible bank accounts were only returned after the withdrawal method was submitted. Simply selecting a method from the dropdown could not support the one-page flow.
The design was adjusted and confirmed with the engineering team within a short timeframe. The release kept two focused steps instead: submit the withdrawal method first, then load the eligible bank accounts and complete the withdrawal.
Outcome & Delivery
The redesign went beyond improving individual flows. It reframed how crypto and fiat transactions should work, made selective trade-offs, and kept delivery moving through product and technical constraints.
Reframe the Model
Instead of optimizing four legacy flows separately, the redesign established two clearer patterns: continuous flows for crypto and method-specific flows for fiat.
Make the Trade offs
Steps were removed where they added little value, while Web3 Wallet access and fiat guidance stayed where the product still needed them.
Resolve the Constraint
When the one-page fiat withdrawal concept did not fit the existing backend mechanism, the flow was adjusted with engineering into a version that could ship without a larger backend change.
Sequence the Rollout
Deposit flows moved into production first while withdrawal work continued in parallel. Both withdrawal flows were handed off next and implemented shortly afterward.
Across the full scope, the work moved from reframing the problem to making trade offs, resolving technical constraints, and shipping all four redesigned flows.
More case studies?
Let’s work together.
ModernizingCore Deposit & Withdrawal Flows
Simplifying core crypto / fiat deposit and withdrawal flows within existing backend, compliance, and provider constraints.
Role
Main Product Designer
Duration
1.5 – 2 months
Platform
Web · Mobile Web
Scope
Crypto & Fiat · Deposit & Withdrawal
Why the Redesign Was Needed
A crypto exchange lets users deposit and withdraw both crypto assets and fiat currency. Crypto moves through blockchain networks, while fiat usually goes through banks or payment providers, with additional verification and compliance requirements.
Over time, new payment methods, provider requirements, and verification steps were added to the existing experience. Crypto and fiat still followed similar multi page structures, even as the needs behind each transaction became increasingly different.
Crypto and Fiat Needed Different Flows
A review of the existing deposit and withdrawal journeys showed that similar multi-page structures were being used for transactions with very different needs. The same structure added unnecessary steps to relatively direct crypto transfers, while leaving fiat flows with more payment, provider, and guidance requirements to handle.
Problems
Too many page changes
A straightforward crypto deposit was split across three separate pages, creating unnecessary breaks in the flow.
The method page added an extra decision
Address based deposit followed the standard pattern, while alternative wallet options such as MetaMask and Phantom occupied a separate method page.
Fiat had method specific requirements
Fiat involved more payment, bank, verification, and provider requirements, depending on the selected method.
Fiat transfer instructions were hard to follow
The page showed the bank details, but not enough guidance on what users needed to do next. Completing the transfer could require additional help.
Start With the Task, Not the Legacy Structure
Instead of optimizing the legacy pages one by one, the redesign started with the task behind each transaction. Established exchange patterns provided a baseline, then the flows were adapted to the product and technical constraints.
Keep crypto transfers direct
Keep currency, network, and transfer details in one continuous flow, while keeping alternative wallet options out of the main path.
Let each fiat payment method follow the flow it needs
Bank transfers needed clear instructions and bank details, while third-party payments used an embedded payment form.
One Workspace for Crypto Transfers
The legacy crypto flow split its core steps across multiple pages. The redesign kept the same task progression while bringing those steps into one continuous workspace.
Crypto withdrawal followed the same approach, keeping currency, network, destination, and amount in one workspace.
Web3 Wallet as an Alternative Path
After selecting a blockchain network, users could either continue with an address-based deposit or connect an external Web3 wallet such as MetaMask or Phantom.
There wasn’t enough usage data to justify removing Web3 Wallet, so the capability remained without keeping the separate method step. Address-based deposit became the direct path after network selection, while Web3 Wallet stayed available as an alternative.
Let Each Fiat Method Follow the Flow It Needs
For fiat deposit, simplifying the experience did not mean removing steps everywhere. Bank transfers and third party payments required different actions, so each method kept the structure it needed.
Bank Transfer : Guide first, then provide the details
A dedicated guidance step was placed before the receiving bank details, making the required action explicit before users moved to their bank.
Third Party Payment : Complete payment in an embedded provider form
Users entered the deposit amount first, then completed the payment through the provider's form embedded directly in the exchange.
A Simpler Fiat Withdrawal Within Backend Constraints
The first concept combined currency, withdrawal method, bank account, and amount on one page. After reviewing it with the backend engineers, we found that eligible bank accounts were only returned after the withdrawal method was submitted. Simply selecting a method from the dropdown could not support the one-page flow.
The design was adjusted and confirmed with the engineering team within a short timeframe. The release kept two focused steps instead: submit the withdrawal method first, then load the eligible bank accounts and complete the withdrawal.
Outcome & Delivery
The redesign went beyond improving individual flows. It reframed how crypto and fiat transactions should work, made selective trade-offs, and kept delivery moving through product and technical constraints.
Reframe the Model
Instead of optimizing four legacy flows separately, the redesign established two clearer patterns: continuous flows for crypto and method-specific flows for fiat.
Make the Trade offs
Steps were removed where they added little value, while Web3 Wallet access and fiat guidance stayed where the product still needed them.
Resolve the Constraint
When the one-page fiat withdrawal concept did not fit the existing backend mechanism, the flow was adjusted with engineering into a version that could ship without a larger backend change.
Sequence the Rollout
Deposit flows moved into production first while withdrawal work continued in parallel. Both withdrawal flows were handed off next and implemented shortly afterward.
Across the full scope, the work moved from reframing the problem to making trade offs, resolving technical constraints, and shipping all four redesigned flows.
More case studies?
Let’s work together.
ModernizingCore Deposit & Withdrawal Flows
Simplifying core crypto / fiat deposit and withdrawal flows within existing backend, compliance, and provider constraints.
Role
Main Product Designer
Duration
1.5 – 2 months
Platform
Web · Mobile Web
Scope
Crypto & Fiat · Deposit & Withdrawal
Why the Redesign Was Needed
A crypto exchange lets users deposit and withdraw both crypto assets and fiat currency. Crypto moves through blockchain networks, while fiat usually goes through banks or payment providers, with additional verification and compliance requirements.
Over time, new payment methods, provider requirements, and verification steps were added to the existing experience. Crypto and fiat still followed similar multi page structures, even as the needs behind each transaction became increasingly different.
Crypto and Fiat Needed Different Flows
A review of the existing deposit and withdrawal journeys showed that similar multi-page structures were being used for transactions with very different needs. The same structure added unnecessary steps to relatively direct crypto transfers, while leaving fiat flows with more payment, provider, and guidance requirements to handle.
Problems
Too many page changes
A straightforward crypto deposit was split across three separate pages, creating unnecessary breaks in the flow.
The method page added an extra decision
Address based deposit followed the standard pattern, while alternative wallet options such as MetaMask and Phantom occupied a separate method page.
Fiat had method specific requirements
Fiat involved more payment, bank, verification, and provider requirements, depending on the selected method.
Fiat transfer instructions were hard to follow
The page showed the bank details, but not enough guidance on what users needed to do next. Completing the transfer could require additional help.
Start With the Task, Not the Legacy Structure
Instead of optimizing the legacy pages one by one, the redesign started with the task behind each transaction. Established exchange patterns provided a baseline, then the flows were adapted to the product and technical constraints.
Keep crypto transfers direct
Keep currency, network, and transfer details in one continuous flow, while keeping alternative wallet options out of the main path.
Let each fiat payment method follow the flow it needs
Bank transfers needed clear instructions and bank details, while third-party payments used an embedded payment form.
One Workspace for Crypto Transfers
The legacy crypto flow split its core steps across multiple pages. The redesign kept the same task progression while bringing those steps into one continuous workspace.
Crypto withdrawal followed the same approach, keeping currency, network, destination, and amount in one workspace.
Web3 Wallet as an Alternative Path
After selecting a blockchain network, users could either continue with an address-based deposit or connect an external Web3 wallet such as MetaMask or Phantom.
There wasn’t enough usage data to justify removing Web3 Wallet, so the capability remained without keeping the separate method step. Address-based deposit became the direct path after network selection, while Web3 Wallet stayed available as an alternative.
Let Each Fiat Method Follow the Flow It Needs
For fiat deposit, simplifying the experience did not mean removing steps everywhere. Bank transfers and third party payments required different actions, so each method kept the structure it needed.
Bank Transfer : Guide first, then provide the details
A dedicated guidance step was placed before the receiving bank details, making the required action explicit before users moved to their bank.
Third Party Payment : Complete payment in an embedded provider form
Users entered the deposit amount first, then completed the payment through the provider's form embedded directly in the exchange.
A Simpler Fiat Withdrawal Within Backend Constraints
The first concept combined currency, withdrawal method, bank account, and amount on one page. After reviewing it with the backend engineers, we found that eligible bank accounts were only returned after the withdrawal method was submitted. Simply selecting a method from the dropdown could not support the one-page flow.
The design was adjusted and confirmed with the engineering team within a short timeframe. The release kept two focused steps instead: submit the withdrawal method first, then load the eligible bank accounts and complete the withdrawal.
Outcome & Delivery
The redesign went beyond improving individual flows. It reframed how crypto and fiat transactions should work, made selective trade-offs, and kept delivery moving through product and technical constraints.
Reframe the Model
Instead of optimizing four legacy flows separately, the redesign established two clearer patterns: continuous flows for crypto and method-specific flows for fiat.
Make the Trade offs
Steps were removed where they added little value, while Web3 Wallet access and fiat guidance stayed where the product still needed them.
Resolve the Constraint
When the one-page fiat withdrawal concept did not fit the existing backend mechanism, the flow was adjusted with engineering into a version that could ship without a larger backend change.
Sequence the Rollout
Deposit flows moved into production first while withdrawal work continued in parallel. Both withdrawal flows were handed off next and implemented shortly afterward.
Across the full scope, the work moved from reframing the problem to making trade offs, resolving technical constraints, and shipping all four redesigned flows.
More case studies?
Let’s work together.
ModernizingCore Deposit & Withdrawal Flows
Simplifying core crypto / fiat deposit and withdrawal flows within existing backend, compliance, and provider constraints.
Role
Main Product Designer
Duration
1.5 – 2 months
Platform
Web · Mobile Web
Scope
Crypto & Fiat · Deposit & Withdrawal
Why the Redesign Was Needed
A crypto exchange lets users deposit and withdraw both crypto assets and fiat currency. Crypto moves through blockchain networks, while fiat usually goes through banks or payment providers, with additional verification and compliance requirements.
Over time, new payment methods, provider requirements, and verification steps were added to the existing experience. Crypto and fiat still followed similar multi page structures, even as the needs behind each transaction became increasingly different.
Crypto and Fiat Needed Different Flows
A review of the existing deposit and withdrawal journeys showed that similar multi-page structures were being used for transactions with very different needs. The same structure added unnecessary steps to relatively direct crypto transfers, while leaving fiat flows with more payment, provider, and guidance requirements to handle.
Problems
Too many page changes
A straightforward crypto deposit was split across three separate pages, creating unnecessary breaks in the flow.
The method page added an extra decision
Address based deposit followed the standard pattern, while alternative wallet options such as MetaMask and Phantom occupied a separate method page.
Fiat had method specific requirements
Fiat involved more payment, bank, verification, and provider requirements, depending on the selected method.
Fiat transfer instructions were hard to follow
The page showed the bank details, but not enough guidance on what users needed to do next. Completing the transfer could require additional help.
Start With the Task, Not the Legacy Structure
Instead of optimizing the legacy pages one by one, the redesign started with the task behind each transaction. Established exchange patterns provided a baseline, then the flows were adapted to the product and technical constraints.
Keep crypto transfers direct
Keep currency, network, and transfer details in one continuous flow, while keeping alternative wallet options out of the main path.
Let each fiat payment method follow the flow it needs
Bank transfers needed clear instructions and bank details, while third-party payments used an embedded payment form.
One Workspace for Crypto Transfers
The legacy crypto flow split its core steps across multiple pages. The redesign kept the same task progression while bringing those steps into one continuous workspace.
Crypto withdrawal followed the same approach, keeping currency, network, destination, and amount in one workspace.
Web3 Wallet as an Alternative Path
After selecting a blockchain network, users could either continue with an address-based deposit or connect an external Web3 wallet such as MetaMask or Phantom.
There wasn’t enough usage data to justify removing Web3 Wallet, so the capability remained without keeping the separate method step. Address-based deposit became the direct path after network selection, while Web3 Wallet stayed available as an alternative.
Let Each Fiat Method Follow the Flow It Needs
For fiat deposit, simplifying the experience did not mean removing steps everywhere. Bank transfers and third party payments required different actions, so each method kept the structure it needed.
Bank Transfer : Guide first, then provide the details
A dedicated guidance step was placed before the receiving bank details, making the required action explicit before users moved to their bank.
Third Party Payment : Complete payment in an embedded provider form
Users entered the deposit amount first, then completed the payment through the provider's form embedded directly in the exchange.
A Simpler Fiat Withdrawal Within Backend Constraints
The first concept combined currency, withdrawal method, bank account, and amount on one page. After reviewing it with the backend engineers, we found that eligible bank accounts were only returned after the withdrawal method was submitted. Simply selecting a method from the dropdown could not support the one-page flow.
The design was adjusted and confirmed with the engineering team within a short timeframe. The release kept two focused steps instead: submit the withdrawal method first, then load the eligible bank accounts and complete the withdrawal.
Outcome & Delivery
The redesign went beyond improving individual flows. It reframed how crypto and fiat transactions should work, made selective trade-offs, and kept delivery moving through product and technical constraints.
Reframe the Model
Instead of optimizing four legacy flows separately, the redesign established two clearer patterns: continuous flows for crypto and method-specific flows for fiat.
Make the Trade offs
Steps were removed where they added little value, while Web3 Wallet access and fiat guidance stayed where the product still needed them.
Resolve the Constraint
When the one-page fiat withdrawal concept did not fit the existing backend mechanism, the flow was adjusted with engineering into a version that could ship without a larger backend change.
Sequence the Rollout
Deposit flows moved into production first while withdrawal work continued in parallel. Both withdrawal flows were handed off next and implemented shortly afterward.
Across the full scope, the work moved from reframing the problem to making trade offs, resolving technical constraints, and shipping all four redesigned flows.
More case studies?
Let’s work together.