passportxyz / passport

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

Refresh All Web3 Stamps Button on Dashboard #2100

Open erichfi opened 8 months ago

erichfi commented 7 months ago

gm @octanaiv, after reflecting on our design goals and the diverse needs of our user base, I have some updated guidance on the "Refresh Stamps" feature. This button serves a dual purpose: it allows new users to verify and existing users to update their Web3 stamps, all through their Ethereum account. Hence, the UI and copy should accommodate and communicate this functionality clearly.

Here are the updated elements for the design:

  1. Widget Header & Button Text: Let's use “Verify & Update Web3 Stamps” as both the header for the widget and the button text. This header should be prominent and serve as an intuitive guide for users to understand the widget's function.
  2. Supporting Text: Directly below the button, please include the following copy: “Click to check and refresh your Ethereum-based identity stamps, anytime.” This instruction is geared towards being accessible, clear, and inviting for all users, including those new to the platform or with limited English proficiency.
  3. Visual Contrast: To ensure that the button stands out and draws user attention, could we explore a more contrasting color or shape? This visual distinction is crucial as it guides the user to the action we want them to take.
  4. Integration with Other Widgets: You worked on a rotating design for multiple widgets (e.g., Verify & Update Web3 Stamps + Avalanche Widget). Could you please provide a visual example or prototype that showcases how this rotation would work? Also, let's set a time interval that balances visibility with user engagement, such as 5-10 seconds, for the auto-rotation feature.

Let me know if you have any questions. Thanks!

octanaiv commented 7 months ago

@erichfi Worked on most of the feedback but we have to talk about it first. I have some small issues with this approach. You can find it in the refresh stamp section.

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