Improve UX for profile page with info from popup, and verified status, and ability to delegate

On vote.democracy.earth we have 3 views to browse through the content: root (/) for the general feed, /peer/username for the items associated with a specific user (profile, posts, delegations, votes) and /vote/post-title for a specific post (post & votes).

I’d like to focus on /peer/ for our UX goal.

Right now the /peer/ does not dispaly the profile of a user. Profiles are only viewed by this popup card that appears when you mouse over a profile picture. We should display at the top of the feed those same things: Avatar, Profile Name, Jurisdiction (country) + vote balance status (total votes & % of cast votes) + delegation status with the user viewing the profile.

How can we easily display at the top of a profile feed this view? The reason is that also i think eventually we can forget about the popup window entirely (which will make the whole app also better performing).

But another big one is that we are considering the idea of approving users with the method of coptation:

To become a legitimate voter in the platform (analogue to Twitter’s “verified profiles” if you want to), it means that previously validated members have voted that YES you are a valid member of jurisdiction X or organization Y. The voting of this can be done with a pinned proposal specifically asking this question below the profile at the top of the feed… in the sense that we’ll do better the more we can reutilize what we have already built for the app itself. Even more so I suspect that coptation could automatically happen if you meet a minimum quota of delegated votes (hence forcing the community as a whole to delegate, which is good because humans dont like delegating power) or (and) a minum %… food for thought.

This is a critical challenge we have we the app’s UX right now. Hope any of this makes any sense (i wont read again what i wrote, limited bandwidth rn), so feel free to ask as much as you want.

[santisiri]

omg my first reaction is love.

[AlexJupiter]

@santisiri @virgile-dev, @agazima and I have been working on this and here is a design we have mocked up:

Our main aims for this was to start creating a compelling, useful profile page for users. We started this by taking the information that was previously in the modal (on profile pic hover on the main feed) and then adding this /peer/username.

A couple of other considerations:

• We added a “verified” icon. This is thinking ahead to organisations, however we wanted to show when a user can been successfully validated
• We really wanted to highlight the relationship this profile has with you. Hence why we call out the directional flow of votes from this profile, to the user.
• The liquid slider is prominent to hopefully encourage delegation

Questions: whilst designing this, we realised that we didn’t quite understand the logic behind the tags: . When does the tag have a solid background? When is a tag green for example? Would you be able to provide an explanation?