search

gitcoinco / passport

Passport allows users to prove their identity through a secure, decentralized UI
Other
935 stars 449 forks source link

Reorganize the Dashboard for Stamp Categories #2199

Open erichfi opened 4 months ago

erichfi commented 4 months ago

Objective: Rework the dashboard layout to categorize stamp providers into KYC, Biometrics, Web2, and Web3 to improve user exploration and understanding.

Tasks:

  1. Identify Categories: Define the categories clearly on the dashboard. Here’s how the stamps should be categorized based on the previous list provided:
    • KYC/Government ID:
    • Coinbase
    • Holonym
    • Biometrics:
    • Civic
    • Web2:
    • LinkedIn
    • Google
    • Discord
    • Twitter
    • Github
    • Web3:
    • Idena
    • BrightID
    • Gitcoin (Grants Donations)
    • GTC Staking
    • Ethereum
    • Snapshot
    • PHI
    • Safe
    • Lens
    • ENS
    • Guild
    • Trusta Labs
    • Proof of Humanity
    • ZkSync
    • NFT Holder
  2. Design Categorization: Create a visual distinction between categories. This can be done using tabs, sections, or color codes.
  3. User Experience Flow: Implement a user flow where new users are introduced to the categories as part of the onboarding process. This could include tooltips, a tutorial, or a welcome message that briefly explains each category.
  4. Interactive Design: Allow users to click on a category to expand and explore the stamps within it. Ensure that the UI is intuitive and that category headings are clickable.
  5. Information Hierarchy: Prioritize the display of stamps based on user engagement or importance. For instance, most commonly used stamps could be at the top or more prominently displayed.
  6. Educational Content: Include short descriptions or tooltips for each category to help users understand the difference between Web2 and Web3 stamps, or what KYC and Biometrics mean in this context.

Deliverables:

erichfi commented 4 months ago

Eventually this might look similar to this: https://poh.linea.build/

octanaiv commented 4 months ago

@erichfi https://www.figma.com/file/FOOlLEFaBt87atw6CPkA5P/Passport-App?type=design&node-id=7637-4526&mode=design

erichfi commented 4 months ago

gm @octanaiv, I wanted to share some feedback on the current organization of passport stamps within the Gitcoin Passport interface to enhance user comprehension and accessibility. Our goal is to facilitate an intuitive and clear user experience for everyone, including those new to web3 and non-native English speakers.

Category Labels and Descriptions:

I suggest we adopt more descriptive and straightforward labels for the categories of identity verification stamps. Here are the proposed changes:

  1. Rename "KYC/Government ID" to "Official IDs" with an added brief tooltip: "Use your government-issued IDs or complete a KYC process with our partners to verify your identity."
  2. Change "Biometrics" to "Biometric Verification" with the explanation: "Confirm your identity using unique biological traits such as facial recognition."
  3. Update "Web2" to "Social & Professional Platforms" with a clarification: "Link your profiles from established social media and professional networking sites for verification."
  4. Alter "Web3" to "Blockchain & Crypto Networks" with a brief description: "Connect your blockchain-based profiles and assets to prove your identity."

These labels are intentionally selected to be as inclusive and self-explanatory as possible, aiding users in navigating the platform with ease.

Category Presentation:

To help users perceive the full spectrum of verification options while maintaining an uncluttered interface, I propose that all categories be expanded by default. This way, users can instantly see all available options upon accessing the stamps section. They should have the choice to collapse any categories they are not interested in, which allows for personalization and a more focused user experience.

Category Order:

Considering the diverse user base, which ranges from web3 newcomers to experienced enthusiasts, the arrangement of categories should reflect a balance between promoting the web3 ecosystem and providing familiarity. Here's a suggested order based on user familiarity and our platform goals:

  1. Blockchain & Crypto Networks: This places emphasis on web3 identity, which is central to our platform and likely of high interest to all users.
  2. Official IDs: By placing this second, it provides a familiar anchor for newcomers, reinforcing trust and security.
  3. Social & Professional Platforms: As a bridge between traditional web usage and web3, this category is comfortably in the middle.
  4. Biometric Verification: This advanced form of verification is placed last as it may be less familiar and used by those with more specific security needs.

This order presents a narrative flow from the new and innovative back to the familiar, accommodating the learning curve of new users while still prioritizing the web3 ethos.

I trust that these suggestions will contribute positively to the user experience and stand ready to discuss them further or assist with implementation strategies.

octanaiv commented 3 months ago

@erichfi Did all the changes for both versions. I like v2 the most.

https://www.figma.com/file/FOOlLEFaBt87atw6CPkA5P/Passport-App?type=design&node-id=7637-4526&mode=design

erichfi commented 3 months ago
MsCalico59-Cheetah77 commented 2 months ago

https://passport.gitcoin.co/