[Leaderboard - Design] Mock-Up Public Leaderboard

[ri0nardo]

Quick summary:

We want to show off our top contributors on our site. It incentivizes users that their contribution is towards a great cause and motivates us to keep going. The leaderboard will eventually evolve into many things other than showing off just donations. We can use the table for other reasons moving forward as well.

Issues:

We need to add key column sections that include:

• [x] Name
• [x] Total Contributed
• [x] Comments
• [x] Date
• [ ] Last Update
• [x] Tab for All-Time vs. Year
• [x] Picture of User
• [ ] Hyperlink to User Account
• [ ] Unique Icon per Organization or Top Contributor

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding read through the epic for relevant details of this ticket. https://github.com/waterthetrees/wtt_front/issues/452

Resources:

• Epic discussion https://github.com/waterthetrees/wtt_front/issues/452
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085
  • To find the working design, it will be under "Static Webpages" (On the left side panel "Pages", then go to "About" to find the new leaderboard design.

Design:

Note:

These tickets convert from Design Issues to Design Implementation for Developers / Engineers

Extra

If you have any additional questions just @ri0nardo

[ri0nardo]

Started a mock-up on the About page. This needs fine-tuning as I just wanted to get something up. I also need to blend it into the About section. Not sure if we want a description of the cause etc. I also need to show a place to donate or just contribute.

@zoobot what do you think of the first draft?

[ri0nardo]

Updated the mockup to include the donation panel. I am now thinking of saying trees rather than dollars make the donation more approachable. That is just my point of view. Still working on more of what will be seen first. May want to change the wording on some of the text in the future.

[zoobot]

Nice mockup! Look forward to talking tomorrow!

[ri0nardo]

Increased the Size of the Donor component box. Added a section below the donor section to donate. Will look to reduce the amount of green components to be minimal. Too much green and not enough clarity when first looking at the screen.