Repository navigation
[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
Activity
shawnborton commentedon Feb 16, 2024
For the start of the Onfido flow, I guess we should just mirror what we currently have in product (note this whole flow got a face lift recently!) where we basically just have one screen as a primer, then we kick off the Onfido flow?
shawnborton commentedon Feb 16, 2024
Also just cc'ing @mountiny (sorry for all the tags these days!) for visibility, in case we want to have the same group who worked on the VBA flows take this one as well.
mountiny commentedon Feb 16, 2024
Thanks for the ping! We could ask Callstack due to their experience with this. I am curious though, I am not that familiar with the backend for this flow so curious if there would any changes be required there. @MariaHCD do you think you could chime in? I assume from what I could read the order of the steps is more or less the same.
We are not moving any checkboxes or any inputs to different steps right? (asking because we had that issue in the bank refactor and had to make changes to the backend slightly)
anmurali commentedon Feb 16, 2024
So far as I can tell, we're not changing any inputs. The only thing worth double clicking on is Current Verify Identity step
We currently show
I want to change that to
mountiny commentedon Feb 16, 2024
Nice, that sounds like basically just UI change!
@koko57 I heard you are keen on helping with this :) if so would you like to comment so I can assign you?
koko57 commentedon Feb 16, 2024
yes I was typing the message right now! 😃 I'm ready to help
MariaHCD commentedon Feb 19, 2024
The order of the steps looks the same to me too:
The KYC flow is outlined in this SO (in case it is helpful)
MariaHCD commentedon Feb 19, 2024
One thing I'd like to add is regarding Knowledge Based Authentication (KBA) questions. @anmurali I'm assuming we still want to have these questions displayed to the user?
mountiny commentedon Feb 19, 2024
🚀 perfect! @shawnborton will we need any more details? Maybe share a Figma file with Agata?
@MariaHCD Thank you, very helpful!
Noting here as well this is to help with testing https://stackoverflowteams.com/c/expensify/questions/10607/11542#11542
shawnborton commentedon Feb 19, 2024
This is the Figma file we have been using.
mountiny commentedon Feb 19, 2024
Thanks, shared with Agata!
164 remaining items
muttmuure commentedon Aug 6, 2024
Job is here: https://www.upwork.com/jobs/~0147a6261f6e47d9e6
DylanDylann commentedon Aug 6, 2024
@muttmuure Thanks 🙏 , I applied to the job
muttmuure commentedon Aug 8, 2024
Offer sent
muttmuure commentedon Aug 9, 2024
Waiting for offer to be accepted
DylanDylann commentedon Aug 10, 2024
@muttmuure Offer accepted with thanks!
melvin-bot commentedon Aug 13, 2024
@shawnborton, @Pujan92, @koko57, @mountiny, @muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!
mountiny commentedon Aug 14, 2024
I believe we can close this one now, right?
DylanDylann commentedon Oct 16, 2024
@muttmuure My contract for this issue is unpaid as of now, can you assist in releasing payments?
muttmuure commentedon Oct 18, 2024
Paid