[Leaderboard - Design] Friendly Competition Boards (State v. State, City v. City, Region v. Region)

[ri0nardo]

Quick summary:

This is a nice feature of seeing what others are doing from State vs. State etc. for friendly competition. This can be more specific from Organization v. Organization who want to share their numbers publicly vs other teams.

Issues:

We don't have data that makes the level field even, but this may be the first step for cities and states to share the data.

Phase 1

• Compare Cities to Cities or State to State on the number of trees planted.
• We will focus on the cities in the Bay Area
  • San Francisco
  • Oakland
  • Berkeley
  • Alameda
• Will need to add a new category for sources
  • City Links
  • Organization Linked to the City
    • Example as Friends of the Urban Forest
  • Logo of the City Link
  • Way to Donate to the City
• This will be a new webpage called "Cities"
  • Phase 1 will only include the selected cities from the Bay Area to test out.
• Hovering effect for buttons and columns
• Have key statistics that are higher or lower by a bold and color
  • For example, the total trees would be red and bold to signify the importance
• Sections to be similar to how Chase has the title of the section per category
• Limit to 3 cities to be compared at a time.

Phase 2

• Phase 2 will be a 2-step process to compare cities you select from a list.
• Have categories for different organizations, teams, and states.
• Have an All-Time vs Monthly vs Yearly Statistics
• Show a Last Updated status
• Have a link that redirects the user to the map of the specified city.
• Have a button to remove a city from the comparison table.

Get Started:

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

Resources:

• Epic discussion [Epic - Leaderboard Feature] Leaderboard for maintainers / arborist - by amount of trees adopted, planted, maintained (watered) #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.

Examples

We will have a design related to a bank credit card comparison Table for city-to-city comparisons.
Links

• https://creditcards.chase.com/compare-credit-cards/?CELL=6PK0&list=4
• https://www.forbes.com/advisor/credit-cards/compare/
• https://money.usnews.com/credit-cards/compare-tool

Desktop Example

Mobile Example

Design:

Note:

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

Extra

If you have any additional questions just @ri0nardo @zoobot

[zoobot]

Looks good so far!

[ri0nardo]

While mocking up the 1st version of the city comparison table. I thought about making it horizontal, so when viewing on mobile you can compare 2 cities at once rather than 1 city. This has the added benefit of making it compatible for multiple devices. The only difference is that the town on top has hierarchy over the other stats which may not be a bad idea since it is somewhat of a leaderboard.

Regarding the table, I wasn't sure what statistics we targeted in this 1st version. I just mocked up what I thought would possibly work. I am not sure what people want to see exactly, but I know big numbers attract people.

@zoobot what do you think of this? I think it's a good start, not sure what we want to modify on this table. Will you want to meet on Zoom on 7/10/2024 to review or just continue on GitHub?

A different question related to this topic. Where is the Google Sheets document you made where we compiled the source info? I wanted to start a new column for city logos and organizations linked to the city.

[zoobot]

@ri0nardo
Here's the sheet https://docs.google.com/spreadsheets/d/1YFnNb_21P87Dk6WhHP4jEBi2ygP1w6wMKDyAnnWkFyg/edit?usp=sharing

This looks great, I will get started on a FE mockup and also try to get the spreadsheet into our database.

I am game to meet or just stick to git. I think this is enough to at least get it started!

[zoobot]

I think more people use their phones vertically, maybe if comparing, we could have the "winner"(better stats) on top and the 2nd on bottom on the phone and always call the 2nd runner up or something more tree related, like sapling and old growth or whatever.

[ri0nardo]

@zoobot do you need a mobile mockup? I haven't had time to work on this as of recently. I have the idea just need time to design it.