trusat-frontend
trusat-frontend copied to clipboard
Monthly community stats infographic
We need an infographic, perhaps on the homepage to show the TruSat community stats. This would really help to give some "life" to the app. It could include information like:
- Total number of observations
- Number of unique objects tracked
- New objects added to the Catalog
- Most prolific user
A combination of charts, graphs and tables would be the ultimate. Some inspiration.
Here's one way to limit the scope of this for a simple "MVP" community infographic.
We could make a bar graph that shows one stat for a given month, e.g. # of observations. It doesn't need any kind of graphics library—just the ability to pass a variable to the CSS to define the div's width. See mockups below.
Mobile:

Desktop:

As observations increase, a colored bar gradually grows within a container. The container represents the 1-month record for the stat. So the width of the colored bar relative to the width of the container is proportionate to the number of number of observations that month relative to the highest number of observations ever made in a one month period.
So if we're halfway through the month with 750 observations, and the most observations made in a month is 1000, then we're on track to beat our collective high score. Ideally this might communicate a feeling of cooperative gamification, as the community works together to break their collective record.
These mockups include the bar, but also the option for other stats below it. The component design is the same for mobile and desktop, where I've placed it in a sidebar next to the catalog.
Rough design file here.
Could make a few of these: Last [day, week, 30 days, 365 days]