[MyMeta] Profile Edit Page Design

[META-DREAMER]

Currently editing a profile takes you through the whole onboarding flow. This isn't ideal since we want people to be able to edit individual parts of the profile. Also updating the username is the first thing in the flow and that's not something we want people to be doing often.

Would be nice to have a simpler "edit profile" page that let people update their profile info after creating it. It would make sense for each "card" in the profile to have its own edit button so when you click edit on your Skills card it shows a modal with just the skills editor. Likewise with the personality stuff, and for the profile image it should redirect to 3box.

Reusing the same components in the onboarding flow would be a requirement as well so we don't have to maintain multiple components for editing stuff.

[alalonde]

Yes, I was thinking something similar. What I planned on implementing was just converting the onboarding flow such that each step had its own link (which it should regardless), and then linking to a step directly. Then you could just change the button to be "Save and Exit" or something of the like.

Seems a bit more lightweight implementation-wise, albeit probably not as good a UX.

[dysbulic]

Profile storage is migrating to IDX (3Box profiles are getting retired), so this information will need to go to IDX after #309.

[alalonde]

#333 gets us most of the way towards an implementation of this.

[alalonde]

Once that's merged it's just a matter of adding links

[peth-yursick]

Is this still missing the design @alalonde?

[alalonde]

No, I don't think so. Perhaps you were referring to another issue?

[luxumbra]

Is anything needing doing on this to get it pushed out the door?

[alalonde]

No, I don't think there are any blockers at this point.

[luxumbra]

Once that's merged it's just a matter of adding links

If it needs finishing off, perhaps is a good first issue for someone? Where should the the links go?

The 'design needed' tag & 'Design' in the title suggests there's some design input required here?

[davort]

Happy to help from the design side of things! Feel free to assign this to me. @luxumbra - will you be taking care of the code?

[davort]

FYI - started designing the "Edit Profile" page: https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=6952%3A68

[dysbulic]

FYI - started designing the "Edit Profile" page…

I notice that you've got an input for setting the profile image. Currently our profiles are segmented with some information coming from 3Box and some coming from the database.

3Box is in the process of retiring their profiles functionality & replacing it with IDX. The current plan is to use self.id to edit the IDX components of the profile (including the profile image).

We have the ability to write an interface that writes to IDX, so we could let users edit those profile components through our site, but there is some complexity to it & it would require us running a Ceramic node to store the IDX profile information.

The trickier part is IDX is also going to be used for account linking. There will be a 3Box-hosted version of IdentityLink running as a part of self.id which will verify that a particular ETH address is associated with Twitter, GitHub, Discord, and Discourse accounts. I'm pretty sure replicating that functionality in our site is more trouble than it's worth, so at least part of the onboarding will be through self.id.

[davort]

Thanks for weighing in @dysbulic

I'll be blunt - this sounds surprisingly complicated.

I don't know the benefits of doing it this way, but I know it doesn't match my expectations to be able to easily edit my profile.

Why such complication? How does it make it simpler and easier for the user?

[luxumbra]

Agreed, it is an issue in terms of UX but that aside, once your self.id is set up it can be your profile for that wallet, across many Web3 dApps. So you only need to edit your generic info in one place for many applications and there's definitely a bunch of benefits to using IDX/self.id as @dysbulic mentions WRT verification of associated user accounts which would be a ball ache for MG to build.

It would be nice if we could at least edit our profile within MG UI but I have no idea of the cost of running a Ceramic node for this to be possible.

@davort Perhaps we could at least add in links to 3box/self.id in the edit/create screen? This is missing in the profiles at the moment and many haven't been aware of the requirement to set up a profile on self.id also.

[davort]

Thanks @luxumbra
There are many things here that I don't understand, and pretty much all you wrote, I am now learning about for the first time. I feel like I am missing tons of context, and have wasted hours of time working on something that doesn't—or won't—make any sense whatsoever, moving forward. Very sad nobody reacted 4 days ago, when I posted I'd be helping with the design side of this.

What I can't find, in everything that you and @dysbulic wrote above, is how will all of this help that the signup and profile editing becomes better, or easier, for the end-user? Or is this a 100% business decision. That wouldn't mean it's not valid, but the cost might be high. I'm concerned that the decision has already been made, and no thought was given to the UX of it. Or was it?

Anyone care to shed some more light on this? I'd be most grateful.

[davort]

Also, just signed into self.id and this is what my profile page looks like there. Doesn't quite instill trust. From the UX side of things, this is terrible.

[luxumbra]

@davort Apologies if i what I wrote was not clear.

I feel like I am missing tons of context, and have wasted hours of time working on something that doesn't—or won't—make any sense whatsoever, moving forward.

On the 8th I was asking if it needed design input because it is tagged as "design needed", I was not asking for design input yet. I wanted to find out what was left to do to get this ticket closed. I did not assign it to you because I was seeking clarification on requirements and if it actually needed design input at all.

Also, just signed into self.id and this is what my profile page looks like there. Doesn't quite instill trust. From the UX side of things, this is terrible.

I agree that the UX needs to be better and we should be doing what we can to have the best possible UX. From what I understand, IDX and self.id are very new upgrades to Ceramic Network and the 3Box service and looking at discussion in Builders guild, MetaGame is one of the first projects to have access on the mainnet release. So hopefully the UI for self.id will be improving at a good rate.

I'm afraid I am not well versed with this side of dev. I am a glorified HTML & CSS jockey with some very rusty PM experience, trying to help move our project along. 😅 I don't know a great deal regarding the technical / financial expense associated with developing and running the backend. I would defer to more knowledgeable builders for their input on the technical details and missing context. 🙏🏻

[davort]

All good @luxumbra, no need to apologize. I'm mostly mad at myself for being too eager, instead of waiting to collect more context beforehand.

And concerned that if with all this in mind, design isn't considered to be needed here, we might be risking to flop the UX for signup, which would be horrible.

But I digress. Lemme know if I can be of any help here. Happy to assist, but will be waiting for a clear signal this time around 😉

[dysbulic]

@davort, I didn't mean to rain on your parade. Reimplementing the functionality of self.id to allow tighter integration into our editing flow would give a more seamless onboarding experience.

The issue that I raised with IdentityLink is that it's not possible to replicate 100% of the functionality without an unreasonable amount of work, so we will be sending them to self.id for at least some aspects of the process.

The choice to spend our time doing that means there isn't time for other features, especially when maintenance and server administration are taken into account.

self.id is an open source project and the 3Box team has been fairly receptive to addressing issues when they are raised. I've submitted a couple of issues in the last week or so and one of them has already been merged. If there are serious deficiencies that you think you know how to address, you could always work at making the self.id experience good enough that it doesn't detract from the onboarding process.

(I know we don't get XP for helping these other projects. An inability to recognize contributions to ancillary projects is one of the SourceCred's major shortcomings.)

It's also important to bear in mind that the site is in its infancy. Ceramic's mainnet only launched this week & self.id has been functional for even less time. I saw in one of 3Box's job postings that they're looking to hire someone to take responsibility for the site, so I expect it will improve with time.

[davort]

All good, @dysbulic 👍

May I suggest that the "design needed" label is removed, so that we can keep an accurate account of issues that are in need of design? cc @luxumbra @HammadJ

[peth-yursick]

All good, @dysbulic 👍

May I suggest that the "design needed" label is removed, so that we can keep an accurate account of issues that are in need of design? cc @luxumbra @HammadJ

Invited you to github org so you can make changes as well :)

[leewardbound]

Hi, I spent some time with @mquellhorst working on #363 today, which ultimately we closed [in frustration] because the bug seems very nuanced with the way getMeQuery currently works, and it'll be fixed by the larger IDX migration, and this new Edit Profile page.

Michiel told me it would be a good-first-issue for me to work on building the frontend for this page, and he said to assign this ticket to myself - We recognize that @davort's designs above aren't fully completed due to the reasons discussed in this thread, but it seems like he gave a great starting point to begin building out the UI of the pages (even though the full UX flow will be blocked until IDX migration is complete). I hope to begin this within the next week-or-so, but I'll wait a few days first to see if there's any feedback.

[leewardbound]

Today we met with @davort @mquellhorst to discuss the UI/UX side of this and iterate on the flow - also accompanied by the new builders @tommymaher15 and @vidvidvid (the 3 of us new builders will likely pair up on these tickets for implementation)

Notes:

• @davort will finish the Hi-fidelity design for both Desktop and Mobile for the Edit Profile Page

• We confirmed that the Edit Profile page is to fully replace the Onboarding Wizard - it doesn't make sense to have 2 different flows, it's unnecessarily complex, and the Wizard flow is already bug-laden (likely to get further-from-complete as more and more migration to IDX profiles is implemented)

• Per @dysbulic suggestion above, we considered the implications of the various Profile fields that are really IDX fields (including Avatar, Username and City/Country/Timezone choosing) and some fields that we don't support yet but we have tickets to support soon (City/Country and Office Hours)

• We will initially include a "Click here to edit your Self.ID profile" link on the Profile page, but because the UX of using a 3rd-party site is very clunky/unnatural, we expect this to be one of our top priorities (and most reported issues) when we introduce the "split-site profile editing" flow

• We decided to include these fields in the "Wishlist Design", with all the devs in agreement/understanding that these "Wishlist" fields won't really be on our initial implementation (because they are handled via 3rd party self.id site)

• We builders will go ahead and build the UI for "Wishlist Design" (including the off-site IDX fields), but ultimately they will be "feature flagged", so the Wishlist fields are hidden until we have the backend support ready to adopt them, and then they can be "wired-up" and un-hidden

[davort]

Thank you @leewardbound for a great writeup.
I have put some more thought into the whole thing. I will need a bit more time to design the whole thing properly. I can already say that the mobile version of the "Edit profile" view will look close to this:

This is because of key principles which everything is based around when on mobile:

1. Provide an easy overview, so that I can quickly check if everything is fine, or pinpoint parts that need to be edited.
2. Do one thing at a time, so as to avoid cognitive overload.

With this in mind, I thought it would be wise to reuse this pattern which we had designed for the mobile version of the Filter & Sort UI. It gives a nice, detailed overview of all existing info, and allows for editing one section at a time.
At the same time, by reusing an existing pattern, we retain a coherent UX.

What I'll need to take a look into is how to best design the same UI for larger screens, while still following the same principles. Perhaps @mquellhorst's idea (tabbed interface) wasn't bad after all? We shall see.

I will report back as soon as I have something more to show, or have some questions to ask, whichever comes first :)

In the meantime, I will probably push hard to wrap up #311 which is an integral—and new— part of the profile. Doing that might also bring some answers for doing a good job with this one.

[dysbulic]

@Cali93 & I have been pairing on the IDX integration. We've recreated about 85% of the functionality to save the data in the IDX basicProfile and it is visible on Vercel.

The service that uploads the images to web3.storage is part of a system that is not accessible on the public internet. We still have to tunnel the request through Hasura.

After that we will be adding a new IDX schema that holds MetaGame-specific fields. This will include skills as an ordered list (#441), as well as the ability to add custom skills (#715) and backgrounds (#443).

So that we're on the same page. The list of information I am expecting a user to be able to edit is:

• Display Name: The display name is free-form text limited only by length and potentially avoiding homography attacks.
• Username: The username is a short uniquely identifying string. It may not contain spaces, and it must be all lowercase in our current system.
• Profile Image: A small image meant to represent the user.
• Header Background Image: An image to use as a backing in places where the profile image is used.
• Page Background Image: Image to use as the backdrop for the users profile page.
• City of Residence: Free-form name of the city they reside in.
• Country of Residence: This will be free-form allowing the user to describe their country in whatever terms they choose.
• Country's ISO-3166 Code: A computer parsable representation of the country of residence.
• Location: A user may choose not to specify a country and city. This field allows for an open specification of their location. When displaying the timezone (Change the timezone display to IDX's residence city and country #707), use the city and/or country if available, otherwise use the location.
• Description: A player's brief autobiography.
• Emoji: This unicode character is part of the IDX basic profile definition. Personally, I prefer a field, Icon which can take either a unicode character or a SVG image. I am interested in informationally dense interfaces using iconographic representations of users that are zoomed in and out.
• Pronouns: Allow users to specify their preferred pronouns.
• Website: An optional HTTP address they want associated with their profile.
• Color Disposition: The user's disposition on the Magic: The Gathering five-color scheme. For legal reasons concerning profitability and Wizards of the Coast's Intellectual Property, the disposition tests live in a separate repository.
• Timezone: The user's offset from UTC using their specified city and country (or location) rather than the traditional cities.
• Available Hours: Blocks of hours when the user has availability. Ultimately this should be a calendar.
• Skills: An ordered list of ¿categorized? skills. The current static list of skills is partitioned into categories. We will be adding the ability for a user to add their own skills and this raises the question of how those would be categorized. ¿Would users be able to create new categories as well?

Additional fields stored in Hasura that will be a part of the player's profile:

• Rank: Diamond, Platinum, Gold, Silver, or Bronze.
• Seasonal XP: How much XP the user has garnered this season where the seasons roughly follow those of the solar year.
• Total XP: Lifetime XP accrued.
• Roles: The user's roles within the organization. Generally correlating to Discord roles, but available for orgs without a Discord.

[davort]

Thank you @dysbulic for this detailed account of editable profile elements.

I haven't seen a mention of player roles which are being worked on in #311. Just an oversight, I believe. Did you plan on keeping them in as part of player profile?

[dysbulic]

I haven't seen a mention of player roles which are being worked on in #311. Just an oversight, I believe.

Yeah. I just forgot about them b/c they're coming from Discord rather than IDX. I added them to the list.

[dysbulic]

If you're interested in seeing another player in this space, you can create a profile at dns.xyz. This tweet has examples for some of their more complex instances.

[dysbulic]

This issue was mostly wrapped up in #943.