[HOLD for payment 2024-07-23] [CRITICAL] [P2P] Refactor the wallet enablement flow to be step by step and conform with our new design system #36648
Description
Problem:
The existing wallet enablement flow UI does not comply with our new brand design system, particularly our philosophy to take a stey by step approach to getting user input. It also doesn't give the user a sense of progression or context for remaining steps, which could cause drop off.
Solution:
Let's refactor the Ui to ask for the info step by step instead of all at once. Let's add a progress bar at the top for the various sections:
Starting point, no change
Current Add bank account step, which loads a blank modal and automatically jumps to Plaid flow. Although the only choice here at the moment, it is cleaner to just show this step and allow the user to explicitly click on Connect via Plaid
Current Additional Details step, which is shown as one form, with all these details. We will refactor it to ask for the details step by step here
Current Verify Identity step, which presents some legalese links and then moves into the Onfido SDK flow. But the Onfido SDK flow begins with disclosures that the user needs to accept, so we don't need to show this legalese twice. We will therefore change the copy at the start of this step as well.
The Onfido SDK flow cannot be further customized to match our branding but, can we try to add the progress bar we're using here at the top of that entire flow, if possible?
Current Terms and fees step, which is shown as one long blob, with all these details. We will refactor it to show it step by step here
- The first of these screens should be scrollable and the
Nextbutton should be inactive till they get to the end and then turn active. If they try to click on it when inactive, let's present an error message to scroll to the end and review all of it.
Finished step, no change
