[Feature] Heroes list

Proposal Status

Status: Inception
Last updated: 29.04.2020
Team:
Approved Budget (in h): 0
Used Budget (in h): 0
Planned Delivery:

Implication

Add a list of top ranked users with score calculated by a formula

Proposal initial scope:

  • Design:
    • Prepare a page for a list of users in the center column with filters/sorting
    • Filters for day/week/month/all time
  • Backend:
    • Endpoint to return the ranked list (preferably paginated)
  • Frontend:
    • Implement the design for center column

Good to have (extended scope):

  • Highlight your current account if it is in the list
    • Right column widget with top 5-10
    • Proposed to redesign a little the Trending block and create a tabbed interface to host both blocks
    • May be have a link “load more” so the list is paginated

Estimate:

Design:

  • Small box with top users (side column) - 4h (mockups are present, full design of it is not done)
  • Full page for leaderboard (all users) - 4h

Backend: 12h

  • fetch and cache all accounts from the tipping contract
  • API endpoint for serving users stats (count of tips sent, count of tips received, number of comments)
1 Like

AFAIK there is some work done on this task, so please

@tsvetan.chain please add your designs when ready

Design Estimate:
Leaderboard block for the right website side column (4 hours)
Main page with full leaderboard view (4 hours)

This is my initial design suggestion for Leaderboard integration. This is design for the right side column widget that is displaying only the top 5 superheroes according to their rank. The whole page with full ranking will be loaded if the user clicks on View All.

  1. I’m suggesting tabbed content changing between Trending and Leaderboard (that is to save space for the wallet integration).
  2. I’m suggesting compact info for each ranking card here (full content will be displayed on the full list page and will include for each card Tips Sent, Tips Received, Comments Made or any other variable that can be part of generating the ranking score).
  3. I’m suggesting 2-digit ranking score in the range (1-10) and color coding for its visualisation. Color coding introduces a competitive element of gamification: the users will strive to have higher results in order to have nicer color of the score. 1-5: grey; 5-8: blue; 8-10: green;
  4. For the users with no .chain names I’m suggesting the use of “Fellow Superhero” placeholder (better visualisation and also reminding them to claim a .chain name. So this might be clickable and should lead to the place where they can claim a name.)

    Mockups V1:
    Trending-LeaderBoard

Mockups V2 (numbered):

Trending-LeaderBoard-numbered

@yani.chain , @ivaylobadinov.chain If this approach is approved I’ll need 6-8 hours to create the design for the full ranking list page. So accrding to estimate it can be completed today.

Nextcloud links
direct: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard&fileid=452022
directory: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/

we need it in the center column with more ways to filter and sort them. daily, weekly, monthly, all time, …

2 Likes

The scope was initially proposed to have both:

  1. center column with full functionality: filters and sorting
  2. a small block in side column with simply showing top 5 + link (View all) to open the full table in the center column

@tsvetan.chain only did a quick mockup of 2. (the smaller one)

Scope can be reduced to “only full page in center column” (1.) if you want

Yes, this is only the right column implementation. I already started working on design of the full leaderboard page that will be displayed in the center column as you said.

Initial estimate was 4 hours for Right column display and 4 hours for center column display (full list page) but it took me some more time so I spent 6 hours for right widget and now I’m working on the full page (center column) and the filtering. I plan to finish this today and post update here.

Leaderboard Page design suggestion:

Mockups:

Nextcloud Link:

Direct: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard&fileid=452022

Directory: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/

  1. Leaderboard list - consists of superheroes leader cards.
    Each card includes:
  • Ranking;
  • Avatar (link to user profile);
  • .chain name;
  • Blockchain address;
  • Rating score;
  • Tip profile button;
  • Number of Tips Received (+ total AE and fiat value);
  • Number of Tips Sent (probably should include the amount tipped also);
  • Number of comments made.
  1. Filters (ordering by Highest rating, Most Tips Sent, Most Tips Received, Most Comments Made + filtering by date);

  2. Right column tabbed widget displaying Trending / Leaderboard - top 5

The right column has not been funded, so please take care of this in OP.

Only request is to get ONE leaderboard in the center column done. Thanks.

Center column is what we need only. Keep work minimal to progress fast.

1 Like

@lukaskywalker.chain @Leah requirements?

My biggest req would be that the “formula” in “score calculated by a formula” be VERY thought out as it defines the way ppl would want to work with this system.

Marketing-wise, I also would say ranking ppl with a number of any kind / with any formula would drive regular users to feel disrespected / not want to be on site at all.

My suggestions:

  1. highlight (list top users) only and do not degrade all those who are not top users in the process
  2. do not use numbers to publicly rate ppl (big no-no)
  3. make it very transparent how one is or would get on the “most active” or “most popular” list
1 Like

So let’s use the center column design and not show the Score diamond (it is a suggestion anyway, as how the ppl will be rated was not clear).
Also the lists (sorting) should be defined as these on the images should be considered as placeholders

1 Like

In this case I’ll just do a quick modification of the design to remove the score diamond.
As Ivaylo said above all filters are suggestions (as I’m not sure about the exact formula) and the text s should be considered placeholders.

Leaderboard design update:

  • rating score indicator removed;
  • right column widget removed;
    _ comments counter icon addded (clicking leads to user profile with comments filter loaded);

Nextcloud: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/Leaderboard Page/

Designs:

Older version

Leaderboard rework after feedback: 2 versions
Version 1:

Nextcloud: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/V1/

Version 2:


Nextcloud: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/V2-alternative/

3 Likes

As a part of Superhero roadmap, this feature needs to be discussed and review before starting implementation

Is this the final design that we should estimate and implement?
@beniissembert1618.chain @tsvetan.chain @yani.chain

1 Like

A couple questions:

  • this rating everyone is talking about, what should it contain?
  • received tokens meaning claimed tokens? or also transferred?
  • what are the time frames we need? today, week, month, alltime?
1 Like

Updated Leaderboard Design:
(including tokens feature + some UX/UI changes - explained in details below)

Direct Link: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/V3Latest&fileid=755866
Directory: …/P1/Superhero/Superhero.com/Desktop/v2/Leaderboard/V3Latest/

Desktop version:




Mobile version:

UX/UI Comments and detailed description of the functionalities suggested by design:



@yani.chain @keno.chain @milenradkov.chain @philipp.chain @sergiimaksiuta.chain @sslavov

  1. User Ratings as a score value (combination of several factors) won’t be developed (it was my suggestion in the initial designs but at that time CMO Leah noted that rating the users must be avoided). Instead of rating we should just present a numbered chart of top contributors according to some filters I suggest here.

  2. Suggestion: Ordering should be done according to tips amount in the specific token (fiat value and number of tips will be displayed only as information but won’t affect the ordering).
    Another option is to include a separate filter “Value” that will order the list according to fiat value of the tips. I think this will be overcomplication at the moment.

  3. May be we should have only the Claimed Tips filter and remove the Received Tips? We can replace it with Posts as soon as Posts without tip are implemented. Design for posts without tips is already provided.

  4. Timeframes of the Time filter are specified in the latest version mockups above.

5 Likes