User flow for implementing model-based detection system into QF rounds

[laurenluz]

We are adding a 2-part user verification model for qf eligibility. Backend is explained in #4221

This issue is for design. The user flow is essentially:

• At the start of a new QF round, every donor must verify/re-verify their eligibility
• The first "check" is called either by a button click "check your eligibility" or by the user making their first donation. In the backend, we check if their address passes... if they do, the user sees "you're eligible!" and no other info about passport/stamps, etc.
• If the user fails the 1st check (with the model based system), they are passed through our gitcoin passport flow, where they can verify their stamps

We will have to consider:

• banners on QF page
• donation success page eligibility box
• user profile
• giveth.io/passport page (we may want to revamp this into a qf eligibility page)

@mosaeedi @koday1 cc @CarlosQ96

[mosaeedi]

Here is the first design draft

Please take a look at the proposed structure and designs for the Profile page.

Structure

So with the new method in mind, I create two sections for the profile page.

1. User Verification
On the first section, User can verify with the MBD method, or [in case they couldn't pass the MBD] use Gitcoin Passport.

2. QF Donation Eligibility
This section is more like an informative section just to make it crystal clear for user either they are eligible or not.

Designs

Now let's dive into the designs!

User A

Users A, are those who don't have a connected Gitcoin Passport and are Not verified using the MBD method.
For these users, they can only see the MBD card and the Gitcoin passport card is grayed out and disabled.

User A-1 [MBD Verified]

When they pass the MBD check successfully, the Gitcoin Passport is get enabled, but on the QF eligibility card, they can see that, they are already eligible for QF matching.

User A-2 [MBD Failed]

In case the user fails the MBD check, the Gitcoin passport is get enabled as an alternative way for user to verify.

User A-3 [MBD Failed, Passport Checked]

And when they passed the Gitcoin check...

User B

User B, are those who already connected their Gitcoin Passport

User C

User C, are those who passed the MBD check and also connected their Passport before.

[koday1]

Thank @mosaeedi that's looking great! I just shared your comment w/ @CarlosQ96 as he's working on the backend API integration.

One thought - I wonder if users will be confused if we name it "Quick identity check", since it's not really related to identity. Maybe we can name it "Quick on-chain activity check" or something similar? What do you think @laurenluz ?

[laurenluz]

Hey @mosaeedi! This looks pretty good but tbh I think we can make it a lot more simplified for the user. Seeing all these parts "user verification" and having that separated from "qf eligibility" imo is not necessary because the user verification IS the eligibility, it's just the method by which they verify that changes. The advantage of the MBD system is that we can make thing a lot less complex for many users... so I would like the design to be a lot simpler as well.

If you think it's ok, I would suggest removing the bottom box entirely and having the user see just one box basically... that changes in copy and appearance based on the following states. They would only see the gitcoin passport info (replacing the 1st box) if they do not pass the 1st check on the MBD. So the states would be:
(1) wallet not connect
(2) wallet connected but not yet checked w/ MBD (user sees button saying "Check eligibility")
(3) wallet connect MBD passed (button grayed out, user see label "QF eligible")
(4) wallet connected, MBD failed, gitcoin passport not yet checked (Copy is "We need a bit more information to check your uniqueness. Please verify your Gitcoin passport")
(5) wallet connected, MBD failed, gitcion passport checked and not passing
(6) wallet connected, MBD failed, gitcoin passport check and passing (button grayed out, user sees lable "QF eligible")

For initial copy, I'd suggest:

Title for the page: QF Donor Eligibility
Subtext: Verify your identity to ensure your donations can be matching in quadratic funding rounds.

Box copy, e.g. for case (2) wallet connected by not yet checked w/ MBD
Box title: Quick Identity Check
Subtext: Verify your donor uniqueness with a quick check of your on-chain activity.
Button: Check eligibility

After the user passes, the label says "QF eligible".

What do you think? Also could you link to the figma?
cc @koday1

[laurenluz]

Aside from that, can you also help to outline the banner copy & the donation success page copies for each of the different states? I think we will need to make adjustments to the logic and it would help to make this all clear for our devs.

Also, thinking about this... should we keep all this verification information in the user profile? or do you think it would be better to make this a kind of replacement for the https://giveth.io/passport ?

And then we direct users to that page through out existing QF flow?

[mosaeedi]

Hey,
I've updated the designs and made some adjustments,

I've added the QF eligibility badge to the header instead of showing it at the bottom!
please take a look.

(1) wallet not connect
[ No Change ]

---

(2) wallet connected but not yet checked w/ MBD (user sees button saying "Check Eligibility")

---

(3) Wallet connect MBD passed (button grayed out, user see label "QF eligible")

---

(4) wallet connected, MBD failed, Gitcoin passport not yet checked (Copy is "We need a bit more information to check your uniqueness. Please verify your Gitcoin passport")

---

(5) wallet connected, MBD failed, gitcion passport checked and not passing
[ I'm not sure what I have to do for this step ]

---

(6) wallet connected, MBD failed, gitcoin passport check and passing (button grayed out, user sees lable "QF eligible")

[mosaeedi]

Take a look here -> Figma Link

[mosaeedi]

Here is the mini banner for the Projects list/view project page
I've updated some and disabled some(Grayed out).
Please review all of them and let me know if we need to add any more banners or won't need any of them.

take a look here -> Figma Link

[mosaeedi]

And the last part!

Success page

Take a look here -> Figma Link

[CarlosQ96]

@mosaeedi @koday1 let me know if the design is done so @Meriem-BM can start on it.

[mosaeedi]

Here is the final designs for the My account / Overview tab

My account / Overview

Figma link

The screen on the left shows the overview tab with the new QF card.
On the right side, you can see the QF card in all different states.

[mosaeedi]

And the QF eligibility page, aka Passport page(before).

Link to Figma

The QF Eligibility page on the left! and the different states of the QF Eligibility card on the right.

Also you can look at the prototype here to better understand how it works.

Video prototype on Youtube

[laurenluz]

@mosaeedi let's finalize the banners before we pass this to devs.

[laurenluz]

also @koday1 @CarlosQ96 @Meriem-BM we have the made sure we don't merge this issue until the GIV-earth round is over. we can introduce a big change of eligibility like this mid-round, and it's ofc not going to be finalized tested and merged before tomorrow morning.

[mosaeedi]

Here is the QF banners!

Link to Figma

CC: @laurenluz @koday1

[koday1]

@mosaeedi The banners look good! @Meriem-BM please see the new banners above from Mo, and let me know if you have any questions.

[laurenluz]

these banners need a few edits, please hold off @Meriem-BM @koday1

[laurenluz]

@mosaeedi I added some missing cases to the banners and make some edits to the copy here.

Can you help to clean them up?

Also, we need to have different donation success page info corresponding to the different cases as well. I'm talking about the copy here... We must have in figma the designs for the different cases... but I don't know where. @mosaeedi

[mosaeedi]

The QF banners

1. loading state

2. Wallet is not connected

not checked for QF eligibility yet

Processing

Two possible scenarios here

1. MBD check passed

QF eligible

2.MBD failed, Passport is required

Connecting passport

When user tap on the Add more info button, we present the modal below,

There are two possible scenarios here as well

1. Passport score is higher than the requirement

The banner will change to the QF eligible state too

2. Passport score is not high enough

The banner will change to

---

Error states

QF eligibility check error

QF round is finished

[maryjaf]

• Let's make sure that we hide the qf-eligibility section in "My account" if the round is before the "start date" and after the "end date". We should only have the qf-eligibility section during an active qf round that is past the start date and before the end date

It has been fixed on feature branch https://giveth-dapps-v2-git-feat-mbdscoringissues-givethio.vercel.app

• To remedy the issues on the connect wallet / sign in from the banner... let's just remove the "connect wallet" button from the (not signed in/connected) banner and say "Sign in with your wallet to verify your eligibility"

The new flow with "sign message" step is on the preview link : https://giveth-dapps-v2-git-feat-mbdscoringissues-givethio.vercel.app

Screen.Recording.2024-07-27.at.12.50.30.AM.mov

• There is a problem about this flow that I couldn't found it the reason of this

-For an account that it isn't signed user, after connecting wallet the "sign message" is shown correctly

Screen_Recording_2024-07-27_at_12.59.06_AM.mov

-For this account that it isn't signed user, after connecting wallet the "sign message" is not shown
https://github.com/user-attachments/assets/8f1e2b31-43f0-4322-9a86-402502cf4b5d

[maryjaf]

• On production there is a problem that for all users the below pic is shown in my account and the "check eligibility" button isn't shown

when changes will be deployed on production?

[Meriem-BM]

• Let's make sure that we hide the qf-eligibility section in "My account" if the round is before the "start date" and after the "end date". We should only have the qf-eligibility section during an active qf round that is past the start date and before the end date

It has been fixed on feature branch https://giveth-dapps-v2-git-feat-mbdscoringissues-givethio.vercel.app

• To remedy the issues on the connect wallet / sign in from the banner... let's just remove the "connect wallet" button from the (not signed in/connected) banner and say "Sign in with your wallet to verify your eligibility"

The new flow with "sign message" step is on the preview link : https://giveth-dapps-v2-git-feat-mbdscoringissues-givethio.vercel.app

Screen.Recording.2024-07-27.at.12.50.30.AM.mov

• There is a problem about this flow that I couldn't found it the reason of this

-For an account that it isn't signed user, after connecting wallet the "sign message" is shown correctly

Screen_Recording_2024-07-27_at_12.59.06_AM.mov
-For this account that it isn't signed user, after connecting wallet the "sign message" is not shown https://github.com/user-attachments/assets/8f1e2b31-43f0-4322-9a86-402502cf4b5d

Hey @maryjaf this only happens when a new user is connecting, the sign message add his data to Database, without it, the user data won't be found and that buggy behaviour appears, I believe we could have implemented this in better way to have one step, but that will introduce bugs.

[Meriem-BM]

• On production there is a problem that for all users the below pic is shown in my account and the "check eligibility" button isn't shown

when changes will be deployed on production?

I think we should discuss this with the team, if we should only release QF related changes.

cc: @jainkrati, @MohammadPCh

[laurenluz]

Hey @maryjaf this only happens when a new user is connecting, the sign message add his data to Database, without it, the user data won't be found and that buggy behaviour appears, I believe we could have implemented this in better way to have one step, but that will introduce bugs.

Can we just remove any mention of connect wallet & sign message for the user? so they just follow the normal slow having to sign in like usual? I mentioned this here above, but I think it might have been misinterpreted...

To remedy the issues on the connect wallet / sign in from the banner... let's just remove the "connect wallet" button from the (not signed in/connected) banner and say "Sign in with your wallet to verify your eligibility"

I meant that we should just put the copy "Sign in with your wallet to verify your QF eligibility".. with absolutely no button there/clickable part in the banner... so no extra clickable text that says "sign in" or "sign message" or "connect wallet"

The user should only get to click things after they have done their normal sign in flow. with the pink button in the top (like usual).

If there are still bugs, can we just simplify to this?

[Meriem-BM]

@laurenluz that won't work either, because by clicking on that pink sign in button the new user will still have to sign message, to be registered on Database.

The pink sign in button only connects wallet as well.

[laurenluz]

@Meriem-BM why is the sign message about gitcoin passport though?

I would assume it should be about connecting to giveth

[laurenluz]

this is still super buggy for me. When I connect my wallet from the banner... I get the metamask connect... but then nothign happens, even when I refresh.

This issue doesn't happen if I connect & sign in from the pink button.

Screen.Recording.2024-07-29.at.1.34.07.PM.mov

[maryjaf]

this is still super buggy for me. When I connect my wallet from the banner... I get the metamask connect... but then nothign happens, even when I refresh.

This issue doesn't happen if I connect & sign in from the pink button.

Screen.Recording.2024-07-29.at.1.34.07.PM.mov

It's weird, it works fine for me,I've checked multiple times with different accounts
Do you know what is the reason of this behavior ? @Meriem-BM

[Meriem-BM]

this is still super buggy for me. When I connect my wallet from the banner... I get the metamask connect... but then nothign happens, even when I refresh.

This issue doesn't happen if I connect & sign in from the pink button.

Screen.Recording.2024-07-29.at.1.34.07.PM.mov

Weird, I don't know why did it happen

[Meriem-BM]

Hey @maryjaf the connect wallet clickable link is removed.
Also can you test the the banner when round is not started yet, if we should change something, Thanks.

cc: @laurenluz

[maryjaf]

Also can you test the the banner when round is not started yet, if we should change something, Thanks.

• It seems it hasn't been changed as expected, the round will start on 1 Aug but I see below banner

after connecting wallet I see this:

[maryjaf]

• It seems it hasn't been changed as expected, the round will start on 1 Aug but I see below banner

and also when there is no active round or the round has ended, this banner shouldn't been shown

[Meriem-BM]

Okay so all above should be done before user connect his wallet, unlike the old flow, will update it.

[maryjaf]

• It seems this problem makes some difficulty for QF round

#4377

Screen.Recording.2024-07-29.at.7.36.40.PM.mov

@divine-comedian @laurenluz

[laurenluz]

@Meriem-BM can you investigate? that's super weird behaviour

[maryjaf]

Hey @maryjaf the connect wallet clickable link is removed.

I've checked this new flow with some new and old users for most of them it works as expected

Screen.Recording.2024-07-29.at.8.30.05.PM.mov

• but I see this the below behavior for a new user after sign

-by tapping on "check eligibility" nothing happens and then the "recheck eligibility " button is shown

Screen.Recording.2024-07-29.at.8.24.57.PM.mov

@Meriem-BM

[laurenluz]

@Meriem-BM just checking - any update here?

[maryjaf]

• but I see this the below behavior for a new user after sign

-by tapping on "check eligibility" nothing happens and then the "recheck eligibility " button is shown

I've seen this problem one time in my tests, could you please take a final look on this ? @Meriem-BM
If needed I can create separate issue for this to be investigated more

[maryjaf]

• but I see this the below behavior for a new user after sign

-by tapping on "check eligibility" nothing happens and then the "recheck eligibility " button is shown

I've seen this problem one time in my tests, could you please take a final look on this ? @Meriem-BM If needed I can create separate issue for this to be investigated more

It also happens on production for one of my accounts @Meriem-BM

-This user is an old user

Uploading Screen Recording 2024-07-30 at 6.56.19 PM.mov…

[Meriem-BM]

Thanks @maryjaf, can you create a separate issue for this with details, will try to check or ask someone if possible.