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

[santisiri]

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.

[AlexJupiter]

@santisiri this is a really nice task we can start on. I think there are two steps to this:

1.) Designing basic profile page This will involve taking the content of this popup:

And adding it to the top of this page:

@agazima how do you feel about picking up this first task? (I will also have a think about this before our catchup tomorrow.)

2.) Adding cooptation to a profile page An attempted definition of cooptation: when a verified group of users has voted to accept you into their organisation

This task is much more difficult, however I feel like this is linked to the conversations around organisations that we are having in https://github.com/DemocracyEarth/sovereign/issues/250 and can be solved in tandem as a result. As a note, we will be moving onto tackling organisations imminently.

[agazima]

Hello Santi and Alex, My Github username is agazima https://github.com/agazima https://github.com/agazima I think it is a great moment because we are about to talk about the ballot creation and the delegation. And the profile becomes quite relevant topic I think in terms of how the delegation could work.

These are my main concerns about the delegation that I have shared on Trello

I think there could be several ways you can delegate your votes to someone:

• by clicking on the user profile ( available from the main view, while browsing the ballots ) you enter the user profile page and there should be a CTA "Delegate votes" and a slider where you can choose the amount of votes delegated and perhaps a subject/ an issue of choice that is related to this delegation ( the amount of of delegated votes could also be accessible from the pop up view)
• You should be able to delegate your votes from your own profile and then choose a person and perhaps a subject matter that is related to this delegation
• when you click on the delegate from the left side of the platform you should go to a view where you see all the delegations related to this person including your own delegations and also polls created by this user

Q’s Will there be an option to delegate votes attached to the specific ballot? Let’s say we are checking different ballots and encounter one ballot that seems to us like our friend might want to share their opinion in regard to the issue. So that option is strictly related to this one ballot ? I am also concerned about this pop up that shows when we hover over the user’s profile. I don’t think it is clear at this moment that you can go to your profile page from there. Delegations should go to the full page profile view. I guess that popup should have also an easy switch so for the future people can change their identities over there.

Regarding the cooptation issue, I will talk to Alex about it but yes it seems like a more difficult process and I first need a bigger introduction to the ux for the organisations.

Best, Agnieszka

On 13 Apr 2018, at 13:35, Alex Jupiter [email protected] wrote:

@santisiri https://github.com/santisiri this is a really nice task we can start on. I think there are two steps to this:

1.) Designing basic profile page This will involve taking the content of this popup: https://user-images.githubusercontent.com/7900773/38756449-7e579776-3f61-11e8-9216-d9ffdeab00a1.png And adding it to the top of this page: https://user-images.githubusercontent.com/7900773/38756476-8d48543c-3f61-11e8-924d-807c389a667a.png @agazima https://github.com/agazima how do you feel about picking up this first task? (I will also have a think about this before our catchup tomorrow.)

2.) Adding cooptation to a profile page An attempted definition of cooptation: when a verified group of users has voted to accept you into their organisation

This task is much more difficult, however I feel like this is linked to the conversations around organisations that we are having in #250 https://github.com/DemocracyEarth/sovereign/issues/250 and can be solved in tandem as a result. As a note, we will be moving onto tackling organisations imminently.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DemocracyEarth/sovereign/issues/278#issuecomment-381253872, or mute the thread https://github.com/notifications/unsubscribe-auth/Akld2wDTIU1qTdm0EduDgeSVw4zvttF9ks5toQwUgaJpZM4TT20k.

[santisiri]

@AlexJupiter thanks alex for putting it in so simple terms 👍

[santisiri]

@agazima the reason to stop continuing with the popup window (and focus on the profile views) is that it will lead to overall better performance of the app, in particular with this experience as its a bit buggy right now on vote.democracy.earth.

[virgile-dev]

Awesome thread guys. I agree that the /peer view is a crucial component that is missing in the overall app UX.

@agazima @AlexJupiter we should definitly start with this one, then tackle delegation and finish with ballot creation.

At first let's consider that one installation of Sovereign = one organization to it simpler. We will tackle multiple organizations on one install later.

Regarding optimizing the performance of the app. I find the hover pretty useful to make instant delegation so maybe at first we can get rid of them in favor of the /peer page and later re-incorporate them but loading less data in the modal so that the app performance are not so affected.

[agazima]

Hi Virgile, Could you explain to me what you mean with this

Regarding optimizing the performance of the app. I find the hover pretty useful to make instant delegation so maybe at first we can get rid of them in favor of the /peer page and later re-incorporate them but loading less data in the modal so that the app performance are not so affected.

Do you mean to perform the delegation by clicking on the user’s profile and then you get a pop up? I am not sure I understand :)

Thanks

On 17 Apr 2018, at 06:25, virgile-dev [email protected] wrote:

Regarding optimizing the performance of the app. I find the hover pretty useful to make instant delegation so maybe at first we can get rid of them in favor of the /peer page and later re-incorporate them but loading less data in the modal so that the app performance are not so affected.

[virgile-dev]

Hey @agazima ,

(try to tag me if you want an answer). Right now delegation is only available on hover. Those hover make the app slow because they are all preloaded (@santisiri please tell me if I'm wrong).

At first we would remove those hovers on the avatar and just provide users with a way for users to make the delegation on the profile page. The page will be similar to a twitter profile page, you can follow a user by clicking a button and see activity stream.

When we are finished with this we can re-integrate a hover for instant delegation a basic profile info.

[AlexJupiter]

We've started to pick this up and will share some designs soon, working through this has actually helped us improve the delegating process as well.

[santisiri]

In mobile I feel as if the very design of the popup as is now works well. On desktop not so sure.

I will move this to a more long-term milestone (version 1.0.0) to leave more space for short term goals with venezuela.

[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?

[AlexJupiter]

To confirm, the above is the proposed design for the /peer/username page.

[santisiri]

omg my first reaction is love.

[santisiri]

the VERIFIED is so spot on.