MetaFam / TheGame

The platform that MetaGame will be played on aka MetaOS - an open source framework for running decentralized societies. Currently featuring MyMeta Profiles, Dashboard & Quests
https://metagame.wtf
Other
131 stars 78 forks source link

Improve guild membership data - UX / Design #1539

Closed alalonde closed 12 months ago

alalonde commented 1 year ago

What would you like to be added?

As proposed here:

Build out more functionality for pulling in DAO memberships of existing MyMeta users, through data sources like DAOHaus. This will fill in some data gaps, data that we can eventually put on Ceramic for other apps to use as well

Why is this needed?

More accurately populating the list of guild membership opens up some interesting possibilities such as #1279

Note that this task only encompasses the UX / Design work. Deliverables include wireframes to help guide decision-making as well as a final high-res design that a Builder can then implement.

alalonde commented 1 year ago

One thing we could do here is build a UI for players to explicitly pick the guilds they are part of. Rather than have it be always computed. We have gotten some feedback that users expect to be able to do this.

Then, ideally, guild admins could administer the memberships of their own guilds, but probably not in scope right away

alalonde commented 1 year ago

@peth-yursick @davort Thoughts on the above suggestion? Seems like it'd be a great way to get around the current limitations around guild membership and improve our dataset

davort commented 1 year ago

Yes, that would be great. Both for primary reasons - more accurate info on DAO memberships - and potential secondary opportunities - enhanced color wheel accuracy - I support this πŸ‘πŸ»

peth-yursick commented 1 year ago

I think it makes sense - there was actually an open issue for this from before #1139 - the only thing not mentioned in here is the idea that, if we're letting anyone type in whatever they want, there should also be a little exclamation mark or [UNVERIFIED] or something, indicating that this is not necessarily true.

Another thing we initially discussed was using DeepDAO's API for pulling in data on DAOs that aren't on DAOhaus (afaik DeepDAO supports all DAO frameworks that exist out there), the only catch is that their API is not free - just DMd the founder to see how much is it & whether we can work something out..

peth-yursick commented 1 year ago

Another option is using guild.xyz &/or collabland. Guild.xyz has an SDK & should work without paying anything, same is true for collabland. These two options would probably surface a lot more guilds than DeepDAO since there are a load more communities using these 2 tools than there are communities that are running a full DAO framework. Plus, founders of both projects are long time patrons in MetaGame & founder of collabland is advisor. https://guild.xyz/explorer https://www.npmjs.com/package/@guildxyz/sdk

Also got a response from DeepDAO already & their cheapest API tier is $25/month, which is not bad https://deepdao.io/products

CrisLeash commented 1 year ago

https://github.com/MetaFam/TheGame/issues/1539#issuecomment-1553625302

I agree with this above, is it maybe related with this task, bellow?

https://app.dework.xyz/metagame-1/technology-circle?taskId=11d6b331-db5f-41cd-86ca-55b3744ecead

if the blocks in mymeta profile will be customable by the user, do we want people to have all the freedom to display their data exactly as they want? if all inputs of information (name, foto, hours, skills set) are these custom block that you choose which one to display inside by opening a dropdown menu that would have check boxes (added or not) per each item of information that the person has. does it make sense?

if we could make everything kinda flexible, as mentioned before by others skills can be clicked in other people's profiles and perhaps added from another's profile to your own - this was comented in a video meeting with mZ. Plus it would eventually impact this task here as well?

alalonde commented 1 year ago

I don't see how the two are related, besides potentially reusing the UI from one for the other.

alalonde commented 1 year ago

Started looking into guild.xyz. Looks like their API is free? I didn't see any pricing information.

I think we should write a script for both guild.xyz and DeepDAO that iterates through the top ~100 players (via a Hasura query) and queries their guild memberships. Whichever service surfaces more information we could go with...

davort commented 1 year ago

@alalonde @peth-yursick β†’ let's do this!

A couple of questions before I begin:

  1. What data would a player have to enter to manually add a DAO membership?
  2. Do we want to enable players to manually order DAOs in their profiles?
  3. Do we want to enable players to hide certain DAOs from their profiles?
alalonde commented 1 year ago

IMO, you should only be able to add a membership to a DAO / guild that we already know about. So there would be a separate step to enter an "unverified guild". After that guild has been created, you could then associate yourself with it. We could obviously streamline the UX for that workflow though.

  1. Yes
  2. Yes. This is especially useful for the pulled-in DAOHaus DAOs as there are a fair number of garbage / test DAOs in there.
davort commented 1 year ago

Thanks @alalonde. Just so we're clear. When you said

IMO, you should only be able to add a membership to a DAO / guild that we already know about. So there would be a separate step to enter an "unverified guild". After that guild has been created, you could then associate yourself with it.

Does that mean that:

  1. The user should only be able to add a membership to a DAO / guild that we already know about;
  2. This DAO / guild that we know about can still be unverified?

...a separate step to enter an "unverified guild"

What would this look like, if you can say? a) Is it a list of DAOs / guilds we already know about from which they can pick the one they want to add to their profile? b) Or is it a form with a few input fields, such as "DAO / guild name", "DAO / guild homepage", etc.? Meaning that the user has to add the guild first, and then associate themselves to it?

davort commented 1 year ago

Another question - when DAO / guild membership is labeled as "unverified" does that mean:

  1. The guild is unverified?
  2. The user's membership is unverified?
alalonde commented 1 year ago

Does that mean that:

  1. The user should only be able to add a membership to a DAO / guild that we already know about;

Yes. "already know about" meaning the guild (verified or not) has been added to the system. We could optionally build an "add-unverified-guild-then-add-self-as-a-member" flow, but if we did that, it should prompt you to first search for an existing guild. We just want to design the UI so we avoid adding duplicate guilds/DAOs as much as possible.

...a separate step to enter an "unverified guild"

What would this look like, if you can say? a) Is it a list of DAOs / guilds we already know about from which they can pick the one they want to add to their profile? b) Or is it a form with a few input fields, such as "DAO / guild name", "DAO / guild homepage", etc.? Meaning that the user has to add the guild first, and then associate themselves to it?

Yeah, again, we could do it either way. But if we go with (b) then that form should only show after they have searched for a guild/DAO and not found one.

Regardless, I envision a search input field to query the existing guilds/DAOs in the system. If no matches are found, either link to a new "add [unverified] guild" page with a form (we probably want this anyway), or display the form inline.

alalonde commented 1 year ago

Another question - when DAO / guild membership is labeled as "unverified" does that mean:

1. The guild is unverified?

Currently, guilds are verified by either a linked Discord server or their existence in DAOHaus. Unverified guilds have no such integrity checks, so users can put in whatever they want. So we're trading data integrity for ease of use / richer dataset.

2. The user's membership is unverified?

This brings up a good question -- can anyone add themselves to an existing ("verified") guild ? I would say no because the memberships to those guilds are pulled in from external data sources. Or do we just ditch the whole "pull-membership-from-daohaus-and-discord" concept and make it all manual? Again, this would be trading data integrity for ease of use / richer dataset.

davort commented 1 year ago

Thank you @alalonde - very helpful. I'll get back soon with a visual artifact that represents this flow, as closely as possible. Probably a "wireflow" - a flowchart with basic visual details of the UI at each step.

davort commented 1 year ago

Hey @alalonde - here is a simple flowchart representing the flow according to our discussion above. It is fairly high-level and not many details are defined. The goal is to nail down the basic flow. Would you say this is close? All feedback is welcome! image

alalonde commented 1 year ago

Yes, this is a good start. Some additional input:

davort commented 1 year ago

Thanks, @alalonde - here's v2 of the flowchart, with all your feedback considered. image

Note: Instead of "Join Guild," I wrote "Add membership" to not lead users to believe they can join the guild from this place. They can only add a claim of their existing membership in the guild.

I also added a couple of questions in pink boxes:

  1. List of guilds that match the search query β†’ Add a line explaining that adding a guild membership here doesn’t automatically make them a guild member?
  2. β€œNew guild” form β†’ What would constitute the minimum required data for a new guild?
peth-yursick commented 1 year ago

Yeah, regardless of whether they choose from the list or write their own entry, it should still say [UNVERIFIED] on their profile. The ones that are "verified" should automatically appear without having to edit membership data. Minimum required data for new guild, I'd say just the logo, name of the guild & maybe link?

alalonde commented 1 year ago

Minimum required data for new guild, I'd say just the logo, name of the guild & maybe link?

The database currently requires name, type, and guildname (like a username but for the guild, this can be auto-created from the name, like if they name it "Rugs R Us" it would autopopulate rugs-r-us)

Agree with Peth about the unverified guilds. Anybody can make themselves members of an "unverified" guild, that's kind of the point.

This brings up a good question -- can anyone add themselves to an existing ("verified") guild ? I would say no because the memberships to those guilds are pulled in from external data sources. Or do we just ditch the whole "pull-membership-from-daohaus-and-discord" concept and make it all manual? Again, this would be trading data integrity for ease of use / richer dataset.

Sounds like we want to keep the verified/unverified guild distinction. In the search results, then, we will have to hide any verified guilds, since those are populated automatically.

Note: Instead of "Join Guild," I wrote "Add membership" to not lead users to believe they can join the guild from this place. They can only add a claim of their existing membership in the guild.

Totally! Good call.

davort commented 1 year ago

Sounds like we want to keep the verified/unverified guild distinction. In the search results, then, we will have to hide any verified guilds, since those are populated automatically.

Sweet! This decision makes perfect sense from user's POV, and will also simplify the design and implementation process.

Thank you both for answering these remaining questions. The next deliverable will be a clickable prototype, even if not yet polished visually. Expect me to come back with it not later than Monday!

davort commented 1 year ago

@alalonde @peth-yursick Here's the first quick prototype representing the flow for adding a membership in an unverified guild. Please take a look and let me know if the flow feels natural/intuitive to you.

https://github.com/MetaFam/TheGame/assets/1573304/871c14b0-f9f7-4068-a17d-0153a6ad7550

Other flows I will create prototypes for:

  1. Add a guild
  2. Edit order of memberships
  3. Remove a membership
alalonde commented 1 year ago

Looks great! One very small change I would suggest is that after you click the + icon to add an unverified guild, switching the icon to be some sort of loading indicator before the checkbox appears. Being able to remove the guild again afterwards by clicking the (-) is slightly unintuitive IMO but probably good enough :)

davort commented 1 year ago

Great feedback, thanks @alalonde πŸ™πŸ» I'll improve the flow accordingly and post it here, soon.

davort commented 1 year ago

Here's an updated flow for "Add membership," with your remarks taken into account:

https://github.com/MetaFam/TheGame/assets/1573304/453c9611-af0b-4390-9a07-08a67be9ca00

Speaking of membership removal, here's a simple demo for that:

https://github.com/MetaFam/TheGame/assets/1573304/e2950e8f-3d00-4b64-b94f-b4fea47c00ea

And finally, just in case, a demo for reordering memberships:

https://github.com/MetaFam/TheGame/assets/1573304/93862c78-1dc9-41c6-b1a2-9c342c896e86


If all these seem fine, I'd wrap things up with the flow for adding a new guild. Eager to hear your thoughts, @alalonde and @peth-yursick

Btw, do we already know which dev will be working on this? Might be a good idea to get their eyes on these demos, too, as early as possible.

davort commented 1 year ago

Hey @alalonde and @peth-yursick! So I'm working on the "Add new guild" flow and looking to define the required fields for the form. Wanted to check with you one more time before I continue.

These are the minimum infos you two said we should ask for πŸ‘‡

https://github.com/MetaFam/TheGame/issues/1539#issuecomment-1672747691

Minimum required data for new guild, I'd say just the logo, name of the guild & maybe link?

https://github.com/MetaFam/TheGame/issues/1539#issuecomment-1673618261

The database currently requires name, type, and guildname (like a username but for the guild, this can be auto-created from the name, like if they name it "Rugs R Us" it would autopopulate rugs-r-us)

To summarize:

  1. Guild name βœ”οΈ
  2. Guild logo ❓ β†’ makes sense, based on what we have available for verified guilds, but @alalonde didn't mention it, so I thought better double-checked. Should we ask for the logo? If yes - required or optional?
  3. Guild link ❓ β†’ do we want/need this? From what I've gathered β€” and correct me if I'm wrong β€” right now for verified guilds, these links point to either app.daohaus.club/dao/ or metagame.wtf/guild/. How do we want to deal with this moving forward? If we want to ask for a link, can it point just anywhere? Should it be optional or required?
  4. Guild type ❓ β†’ is there a predefined list of guild types that we can show in a dropdown? Or is it meant to be a free entry, in which case, how shall we deal with possible mistypings and/or duplicates?
  5. guildname (auto-generated) βœ”οΈ

Eager to hear back from you and wrap this up!

alalonde commented 1 year ago
  1. yes, let's make it required
  2. link is more like their homepage. I would say this should not be required
  3. Yup, there is a predefined list already
  4. guildname is auto-populated but customizable
alalonde commented 1 year ago

added the "adding" state between clicking "add" and the membership being marked as added

Looks great! From an implementation perspective, it is much easier if when clicking "add" in the modal, it adds it right then and there, without the need to "save changes" later.

removed the ability to remove a membership from the search results in the "Add membership" modal - better to simplify things. Removal can be done in the widget's edit mode.

yup, agreed

Speaking of membership removal, here's a simple demo for that:

This gets a little tricky with verified guilds as those memberships are system-managed. Users should be able to still "hide" these memberships (e.g. there a bunch of garbage "test DAOs" that get pulled in from DAOHaus at times), but then probably "show" them again later? Maybe that complicates things too much, I'd be fine if "show" is not possible after hiding a verified guild.

So there is a semantic difference between memberships in verified / unverified guilds. Unverified guild membership is explicitly set by the user, but verified guild membership is not editable by the user. Verified guild memberships can just be hidden.

Not sure if the user needs to even know about the difference, though.

davort commented 1 year ago
  1. yes, let's make it required

  2. link is more like their homepage. I would say this should not be required

  3. Yup, there is a predefined list already

  4. guildname is auto-populated but customizable

Excellent, thank you!

davort commented 1 year ago

added the "adding" state between clicking "add" and the membership being marked as added

Looks great! From an implementation perspective, it is much easier if when clicking "add" in the modal, it adds it right then and there, without the need to "save changes" later.

removed the ability to remove a membership from the search results in the "Add membership" modal - better to simplify things. Removal can be done in the widget's edit mode.

yup, agreed

Speaking of membership removal, here's a simple demo for that:

This gets a little tricky with verified guilds as those memberships are system-managed. Users should be able to still "hide" these memberships (e.g. there a bunch of garbage "test DAOs" that get pulled in from DAOHaus at times), but then probably "show" them again later? Maybe that complicates things too much, I'd be fine if "show" is not possible after hiding a verified guild.

So there is a semantic difference between memberships in verified / unverified guilds. Unverified guild membership is explicitly set by the user, but verified guild membership is not editable by the user. Verified guild memberships can just be hidden.

Not sure if the user needs to even know about the difference, though.

I'll make this work, and the user will know the difference. Will het back with a new iteration of the flow. Thanks!

davort commented 1 year ago

@alalonde Here's the "Add a new guild" wireframe flow - please take a look at let me know your thoughts.

https://github.com/MetaFam/TheGame/assets/1573304/b154ad50-0e03-4df3-a98b-573456f11e08

A couple questions remaining:

  1. On https://metagame.wtf/guilds there is more metadata displayed, such as: a) Description; b) Discord server; c) Barrier of entry β†’ should any of these be added to the "Add new guild" form?
  2. On MG profiles, when showing Guild memberships, next to each guild there is a logo for the chain β†’ should this info also be required in the "Add new guild" form?
alalonde commented 1 year ago

Looks great!

  • On https://metagame.wtf/guilds there is more metadata displayed, such as: a) Description; b) Discord server; c) Barrier of entry β†’ should any of these be added to the "Add new guild" form?

Description for sure. There are actually quite a few fields, see here: https://test.metagame.wtf/guild/alecdev/edit especially the "Add DAOs / contracts" section. Can we just reuse that form, actually? Removing the last two fields (membership and admin roles). Especially since it's already been built..

  • On MG profiles, when showing Guild memberships, next to each guild there is a logo for the chain β†’ should this info also be required in the "Add new guild" form?

No, that's not always relevant, and really just provides additional information for the DAOHaus sync.

davort commented 1 year ago

This gets a little tricky with verified guilds as those memberships are system-managed. Users should be able to still "hide" these memberships (e.g. there a bunch of garbage "test DAOs" that get pulled in from DAOHaus at times), but then probably "show" them again later? Maybe that complicates things too much, I'd be fine if "show" is not possible after hiding a verified guild.

Hey @alalonde - here it is.

What's new

https://github.com/MetaFam/TheGame/assets/1573304/858c5ef6-2883-48bf-abcf-7afc01a08199

davort commented 1 year ago

There are actually quite a few fields, see here: https://test.metagame.wtf/guild/alecdev/edit especially the "Add DAOs / contracts" section. Can we just reuse that form, actually? Removing the last two fields (membership and admin roles). Especially since it's already been built..

Took a look and started expanding the form for Adding a guild from the profile page and... I have questions :) Not necessarily showstoppers, yet probably good to ask sooner rather than later.

  1. Will an addition of a new guild from the "Guild memberships" widget in some way impact adding that guild from https://metagame.wtf/join/guild? E.g. a guild is first added by a member, and thus becomes an unverified guild. Will there be a list of unverified guilds from which that guild's admin can "claim" it, and add in all remaining, defining data?
  2. While a guild is unverified/unclaimed, clicking on it in the "Guild memberships" widget would presumably take you to the Guild's homepage URL that was asked for in the form. After the guild is verified/claimed/joined, I presume clicking it in the "Guild memberships" widget would take the user to the Guild's MG page?
  3. It's a great idea to re-use what's already built. For the sake of simplicity and smooth UX and with this specific purpose in mind, perhaps best to only require data that will be leveraged by the Guild memberships widget: logo (optional), name, URL?

image

Hope the above makes sense. The gist of it is to: a) not burden mere members with admin's work, especially if it wouldn't serve a clear purpose; b) think ahead about how this might affect joining as guild, mostly in terms of avoiding duplication.

Let me know your thoughts, @alalonde

alalonde commented 1 year ago
  • Will an addition of a new guild from the "Guild memberships" widget in some way impact adding that guild from https://metagame.wtf/join/guild? E.g. a guild is first added by a member, and thus becomes an unverified guild. Will there be a list of unverified guilds from which that guild's admin can "claim" it, and add in all remaining, defining data?

For the time being, "claiming" a guild will be a manual process. Meaning they reach out to us on Discord or elsewhere, prove their credentials, and we set them as the owner/admin manually. This reminds me of something I said before which is not correct:

Sounds like we want to keep the verified/unverified guild distinction. In the search results, then, we will have to hide any verified guilds, since those are populated automatically.

We definitely want to still show verified guilds in the search results because we don't want them to add a duplicate one accidentally. There will be cases where they are indeed a member of this verified guild but our auto-member-sync system didn't work correctly. In that case, we should display some sort of (i) icon or something proposing a course of action, e.g. "If you are already a member of this verified guild, reach out to us on Discord (link) for help". This (i) icon would replace the (+) button because you can't add yourself to a verified guild.

  • While a guild is unverified/unclaimed, clicking on it in the "Guild memberships" widget would presumably take you to the Guild's homepage URL that was asked for in the form. After the guild is verified/claimed/joined, I presume clicking it in the "Guild memberships" widget would take the user to the Guild's MG page?

No, I think that should link to the Guild's MG page regardless. The only place we would link to their homepage URL would be from the guild's MG page or their tile in the guild list.

  • It's a great idea to re-use what's already built. For the sake of simplicity and smooth UX and with this specific purpose in mind, perhaps best to only require data that will be leveraged by the Guild memberships widget: logo (optional), name, URL?

The issue here is that even unverified guilds will (IMO) have their own MG pages / tiles in the guild list. So these unverified guilds are going to look awfully sparse if they haven't added at least a description field. And, of course, reusing the same form means less code to write and maintain.

davort commented 1 year ago

All clear, thanks @alalonde πŸ‘πŸ»

davort commented 1 year ago

Hi @alalonde – thanks again for a detailed explanation above. Much appreciated. Below are the latest iterations of the flows with all that fine feedback implemented.

First, we have adding a guild – uses the same existing form, only with the bottom two fields hidden.

https://github.com/MetaFam/TheGame/assets/1573304/68b39b48-bbda-4fd5-b26d-6f0a31d7797d

Second, here's an example of a verified guild showing in search results, with an "info" icon and a tooltip showing up on hover.

https://github.com/MetaFam/TheGame/assets/1573304/ea24f00e-a21c-4b07-8c29-3dfb6bd3ba94

If this seems good to you, I will proceed to refining the visual aspects of the UI. Eager to hear your thoughts!

P.S. I hope we can find time to give the "Add/Edit Guild info" form some love in near future 😊

alalonde commented 1 year ago

Looks good!

I hope we can find time to give the "Add/Edit Guild info" form some love in near future 😊

You could argue this is in scope; I'll leave that up to you though :)

davort commented 1 year ago

You could argue this is in scope; I'll leave that up to you though :)

I would love to, and it wouldn't take too much work, either. The last form I worked with was "Edit profile" – #1559. Would be nice to enhance "Add/Edit Guild info" form in a consistent way. Yet, it doesn't seem "Edit profile" form enhancements are live yet, or are they?

If not now, I would be more than happy to take this on in very near future. Perhaps as one of the tasks for the UX squad, where we take all forms and make them uniform, visually and in terms of UX copy.

Seems that's how the builders are thinking, too: https://discord.com/channels/629411177947987986/1068111871091150938/1144145339432042526

What do you think?

peth-yursick commented 1 year ago

Looks great!

davort commented 1 year ago

Awesome! I'll finish up with the visual polish and prepare a new Figma page for implementation purposes. ETA: Mon/Tue

davort commented 1 year ago

@peth-yursick and @alalonde – The designs have been finalized! Here is the Figma page with all flows and specs, neatly arranged and annotated! With this, the design phase is done. I will stand by and jump in to assist with any possible questions during the implementation phase.

Link to Figma: Improve guild membership data - ✨ Ready for implementation

Screenshot: CleanShot 2023-09-01 at 10 28 00