Dashboard Page

[bedeho]

Background

Joystream is a large and dynamic project, it is hard to obtain an integrated view of what is going on, and how it is evolving. A key determinant for anyone to get involved with the project, wether as a worker, creators, ambassador, validator, third party service provider or partner, is to quickly determine how well it's doing and where it is going.

To make the problem more concrete, we provide a brief personae story. Ulrich is business developer at a blockchain bridge service provider FooBridge. They are in the business of partnering with blockchains to allow their assets to move in and out of other blockchains. Projects are interested in this to reach new potential users on other blockchains, an also make their token interoperate with the tools and infrastructure on other chains. For such bridges, each new integration is a very risky activity, as they might get hacked, or have down time, and in general have to keep up with all the changes happening on integrated chains. For this reason, bridge service providers are very careful to try to only select projects that have a solid community, development, adoption and future prospects. Ulrich is tasked with making such evaluations of new prospective partner projects. When Ulrich does his job, it goes something like this.

1. First he will visit the website, and look at the general feel of it, what it claims to do, wether it seems put together, etc. He may also look for some basic facts, like
   • who backed this project?
   • what rounds of investment were made, at what prices and terms
   • history of the project
   • who the team is
   • whether it has been audited
2. Then he will look at the major social media channels, like Twitter, YouTube, Blogs, CMC (watchlist) etc. What he is looking for is sign of life, engagement, audience size and also quality of communication. These could be summarised in the following metrics
   • size of audience
   • % change in audience last month
   • days since last post
3. He may jump into a few messaging channels as well, like Discord, Telegram, Slack and try to see what is going on, what people are talking about, how engaged people are and size of audience. These could be summarised in the following metrics
   • size of channel
   • % change since last month
   • DAUs/MAUs
   • Messages/day
4. Next he may go to Github and see what sort of activity is happening there, number of commits, number of contributors, releases, etc.
5. Then he will try to look at some description of the token itself, and in particular learn quite a lot of facts and metrics, such as
   • is it listed, if so where? and whether they are CEXs or DEXs, and some basic metrics for each venue, as one can see on CMC, including what % of supply is known to be in each venue.
   • what has price and price history recently?
     • highs and lows for past day, week, month, all time
     • perhaps a price chart
   • what is volume and volume history recently?
     • highs and lows for past day, week, month, all time
     • perhaps a price chart
   • what is supply, circulating supply, and is there a max limit?
   • what was the allocation of tokens at launch, and how are these allocation getting unlocked over time?
     • https://handbook.joystream.org/usdjoy#genesis-block
     • https://handbook.joystream.org/usdjoy#release-schedule
   • market cap and FDV
   • what is the implied annual inflation rate based on minting the past: month, 6 months, year.
   • a breakdown of minting across the following categories over one among the following time periods: all time,
     • workers rewards
     • spending proposals
     • creator payouts
     • validator rewards
   • % of supply in account
   • % of supply staked for validation
   • %APR on staking
   • %ROI data: state what the return on investment would have been w.r.t. various time scals
     • 1H
     • 24H
     • 1 day
     • 1 week
     • 1 month
     • 1 year
   • Supply Distribution: number of tokens in
     • in top 100 addresses
     • in top 1% of addresses
     • in addresses > $10M,
     • in addresses > $100K
     • in addresses > $10K
     • in addresses > $1K
     • in addresses > $100
     • in addresses > 1M , ..... $JOY
6. Traction:
   • number of creators and how that has evolved over time
   • number of videos and how that as evolved over time
   • number of comments & reactions and how it has evolved
   • number & value of of video NFT purchases and how that has evolved over time
   • amount of value paid to creators and how that has evolved over time.
   • daily active accounts
   • Featuring a list of top creators on the platform in terms of their reach on other platforms, like youtube, twitter, etc.
   • chain metrics:
   • number of transactions
   • number of holders
   • number of blocks
7. Project comparison: similar to that in the lightpaper, but where we combined with a comparison of FDV of each project as well.
8. Team: Here we have to convey the idea that Joystream fundamentally is directed by the Joystream DAO and governance structure, as such it is the current sitting actors in that governance structure that should be featured. each role may may deserve a word or two
   • council
     • feature each membership, and for each include
     • socials
     • how many times they have served
     • total amount they have earn
     • current budget
     • current council plan
     • a link to the past
     • plan & reward?
   • working group leads: similar story as for council , but also include things like number of workers hired, budget, working group plan.
   • mention Jsgensis somehow also, perhaps linking to the linkedin page or something, describing its role and the including all people in the team as member personaes on-chain.
9. Roadmap: some sort of minified view of the roadmap
10. Help: At the end of the day, speaking to someone may still be needed, so Ulrich may have ot jump into a chat to ask about something he missed, or he does not understand.
11. Content:

• Feature some video which will serve as an explainer of some kind
• carousel of recent blog posts
• carousel of recent twitter posts.

The main difficulty for Ulrich is that doing this work is very labour intensive, and it requires consulting a wide range of data sources. For Joystream it would include

• landing page: https://www.joystream.org
• token page: https://joystream.org/token
• about: https://www.joystream.org/about/
• lightpaper: www.joystream.org/lightpaper.odf
• handbook: https://handbook.joystream.org/ and its many subpages
• CMC page: https://coinmarketcap.com/currencies/joystream/
• Blog: https://blog.joystream.org
• Dapplooker: https://dapplooker.com/dashboard/joystream-mainnet-dashboard-328
• Pioneer: https://pioneerapp.xyz/
• Coingecko: https://www.coingecko.com/en/coins/joystream
• Twitter: https://twitter.com/JoystreamDAO
• Discord: https://discord.com/invite/NaNzysB5YZ
• Youtube: https://www.youtube.com/@joystream8627
• Telegram: https://t.me/JoyStreamOfficial
• MEXC page: https://www.mexc.com/exchange/JOYSTREAM_USDT
• Github: github.com/joystream/

after all of this, Ulrich likely still has a question or two - something he did not pickup or understand, which requires him to enter a chat and actually speak to someone. So in other words, this is brutal work to do at any kind of scale.

Proposal

Introduce a single page experience on the website, which we call something like Dashboard. Here are some important requirements

• Virtually all data points will need a tooltip to explain meaning and data source.
• When showing historical data, only show in $JOY, not $USD, as it becomes complex task to collect historical $JOY prices <= let me know if this becomes a bad idea based on usability.
• Make most sections or even data points into linkable page objects.
• A lot of this will need both loading states, but also error states, because some value just could not be computed due to some API failure.
• It would be good if we could facilitate some very low friction chat interaction on the page itself, to allow Ulrich to ask a question, without having to sign up or do something, and he has to get he sense that here is someone there ready to answer any question. How can we do this?

Inspo

• Tokenterminal: ttps://tokenterminal.com/terminal/projects/uniswap
• Messari: https://messari.io/asset/livepeer/
• In some of the cases above, it can be useful to do visualisations which superimpose related data into one chart, so relationships can be visible, like this: https://twitter.com/tokenterminal/status/1684519312629854208/photo/1

APIs

Powering all of this will require quite extensive new APIs, which pulls data both from lots of new sources, and pehraps also requires new mapping entirely. We should try to ship a v1 which omits data sources which are very hard to obtain in the near term, and then extend later. What will have

[leetjoy]

Order

By prioritizing information in this order, I can efficiently assess the project's fundamentals, growth potential, and overall viability as an investment opportunity.

1. Token Metrics and Performance - essential information about the project's token, such as price history, market cap, trading volume, circulating supply, inflation rate, and supply distribution;
2. Project Traction and Adoption - traction and adoption metrics, such as the number of creators, videos, comments, reactions, NFT purchases, and daily/weekly/monthly transactions and signed extrinsic;
3. Visualizations - the Dashboard could benefit from well-designed visualizations that superimpose related data into one chart. This can aid in understanding relationships and trends more effectively (reference: Lybra Finance dashboard https://defillama.com/protocol/lybra-finance);
4. Team and Governance Structure - project's team members, their roles, experience, and contributions, along with information about the governance structure and council members;
5. Financial Data - project's financials, including investment rounds, funding history, and budgets;
6. Roadmap and Development Activity - project's roadmap, upcoming milestones, and progress in development;
7. Social Media and Community Engagement - integrate the last tweets from @joystreamDAO and @joystream_mwg;
8. Security and Audits - audit reports, and risk management strategies;
9. API Sources and Data Reliability - sources of data used in the Dashboard and the reliability of the APIs;

The Dashboard will likely contain an overwhelming amount of data and information. To address this, tooltips explaining the meaning and data sources are essential.

Support Chat

Introducing a low-friction chat interaction for users to ask questions. It can help users like Ulrich get quick clarifications or additional information without having to go through a lengthy sign-up process. Certain Joystream DAO HR and Marketing working groups workers can have access to reply user's questions.

[bedeho]

I wonder if it also could be interesting to show a sort of ranked list of who's-who that follows hte project on twitter?

There its great public data on this from https://twitterscore.io/twitter/JoystreamDAO/topFollowers/ which we def can grab, where people are in different categories, like VCs, founders, funds, etc.

[KubaMikolajczyk]

@bedeho

1. breakdown of minting meaning how much was minted in thiose categories right? and the time periods here is mentoned only: all time - is it correct?
   

2. Supply in account is it something different from supply in addresses?
   

3. Is there any option to try and segment this huge amount of metrics into even smaller groups? Specifically talking about num5 here - we have more than 14 types of data - do you see a logical way of grouping them together inside of num 5 somehow - asking as its hard for me to come up with smaller groups for those metrics myself
   

4.In project comparison point num7 do you mean to have a table of all those elements that we compare in the lightpaper in the "true/false" fashion + FDV as additional collumn?

5. I need to ask also about this point - in team section where we have council point its written: "and for each include" - i assume that membership socials, times of serving, amount of earning are the only ones that links to the council members am I correct? the budget , plan, link to the past, plan & reward are things about council not its members
   

6. Additionally I need to know something more about current council plan, link to the past, plan & reward - is this data available somewhere - can you tell me more about those?

[KubaMikolajczyk]

7. What does it mean to present someone as a person on-chain?

What type of information do we want to provide except member handle and avatar about members of jsgenesis

[bedeho]

breakdown of minting meaning how much was minted in thiose categories right? and the time periods here is mentoned only: all time - is it correct?

yes lets just do all time for now.

Supply in account is it something different from supply in addresses?

no, sorry, same.

Actually "% of supply in account" does not really even mean anything.

Is there any option to try and segment this huge amount of metrics into even smaller groups?

I don't really have any strong opinion about how to visually segment these, that is sort of up to you. I think if you want to simplify perhaps just omitting things entirely can be helpful, for example dropping hvaing compelx price charts and so on, because these sort of alredy exist on CMC (coinmarketcap), so we have to be careful about how far we go in replicating it.

In summary, feel free to prioritise what you feel is most valuable while you try this out.

In project comparison point num7 do you mean to have a table of all those elements that we compare in the lightpaper in the "true/false" fashion + FDV as additional collumn?

It could be, but perhaps not hte best way to show relative value mismatch, doing something like bar chart is more potent.

I need to ask also about this point - in team section where we have council point its written: "and for each include" - i assume that membership socials, times of serving, amount of earning are the only ones that links to the council members am I correct? the budget , plan, link to the past, plan & reward are things about council not its members

yep

Additionally I need to know something more about current council plan, link to the past, plan & reward - is this data available somewhere - can you tell me more about those?

yes, but I don't think you need to knjow anything about hte plan content itself, we can just link to them as external docs, at least for now.

What does it mean to present someone as a person on-chain?

I think I just meant show memberhsips, you should probably just show the standard stuff that Pioneer shows, and perhaps add a few social links if defined, like Discord, Twitter, Telegram links,

[KubaMikolajczyk]

@bedeho
I finished first low fidelity explorations for the dashboard single-page which is ready to be reviewed ✅ The video will be a bit long 41min in x1.2 speed - but it had to cover the whole dashboard & chat functionality.

🎥 Video update: https://www.loom.com/share/b6a4d4e3178c4198a55fc40acea9de33?sid=053f3e72-6c23-41ea-a212-8225c1cff9cf

🚧 Explorations file: https://www.figma.com/file/SW6P9qk1RLha7nAfUk7ONo/Dashboard?type=design&node-id=1%3A221&mode=design&t=uurUK1p9Z84tsFEL-1

▶️ Dashboard low fi prototype: https://www.figma.com/proto/SW6P9qk1RLha7nAfUk7ONo/Dashboard?page-id=1%3A221&type=design&node-id=73-59141&viewport=1816%2C663%2C0.33&t=Scg5zAfLDq2W4jgK-1&scaling=min-zoom&starting-point-node-id=73%3A59141&mode=design

[bedeho]

Wow, this was amazing, really impressed you were able to synthesise a singular experience based on such a massive brief, and I think it gets so many things right, so fantastic.

Meta

• Yes, lets def. stick to one-page experience.
• Totally agree with removing the boilerplate header menu and footer that we have on all standard pages, this experience has one singular purpose. So lets just have as single "return to " button at the very top, in case people land directly on this page, but then drop everything else-
• I think one thing that is missing is the clear ability to link to individual sections, this is important, so some sort of "link to section" or "share section" button for each major section makes sense.
• I think in general we are overusing table format for presentation in this proposal. I think cases where we expect the number of columns to be low, or number or rows certainly even more, we should opt for cards rather than tables. Tables are hard to read, have really unflattering resizing dynamics, and just feel like a chore to look at.
• I think the hero section with video is a great idea!
• The table of content, which also serves as a progress indicator, is also a fantastic idea.

Hi-fi ideas

I know these are not appropriate for this low-fi edition, but just thought I would raise it now before you progress.

• I think that sections can be really beefed up in terms of size and perhaps some decorative visuals/illustrations/icons, to make it more inviting to keep engaging and progressing down the page.
• Could we for cards, of a certain size, that show a number metric, have place for an icon?

Sections

Ordering

The current ordering is like this

• Overview
• Social Media
• Community
• Github
• Token
• Traction
• Comparison
• Team
• Roadmap
• Content

but I suggest we reorged it to this

• Token
• Backers
• History
• Traction
• Github => "Engineering"
• Social Media & Community => "Community"
• Team
• Comparison
• Roadmap

Notice that the scope of each section is updated, and we dropped some sections entirely.

Dropped Sections

Overview

I think having an overview is a nice idea, but I don't think these particular facts deserve such prominence, and I also in fact struggle to pick out exactly what deserve to be up top in an overview. For this reason, I suggest we

• drop the overview section
• make a separate section about investors & investment rounds
• make a separate section about history
• make a separate section about

Content

In retrospect, I think we don't need this, its too much, and unless we had some super big name person we could put there, I think it does not add much. Metrics already communicate that we have activity.

Token

• Lets rename to Token, not "Token Metrics"
• Current price (missing), market cap, FDV, circulating supply, total supply, these should be up at the very top, these are more important that everything else. May also deserve icons.
• The number of exchanges will remain small still, even in 6 months, probably it will no more than 5, so I think the tabular form does not work. We only have one now. I think we should find a form which has a really nice fit for cases, 1,2,3,4 and 5, before we consider tabular.
• Token Allocation & schedule: this almost certainly deserves some sort of pie chart, as its showing values that are making up 100%. I also think these two boxes, allocation and schedule, are quite dense, so we may want to just have them on two distinct rows,
• I think we should not get into the game of making a fully fledged price chart, this requires a lot of work, there are companies that actually just deliver this service, believe it not. So why don't we just have a single mode price chart that shows ALL time price information, without the ability to customise. Lets also combine in the
• Minting & Implied annual inflation:
  • lets combine these.
  • lets only have a one number, annual inflation, we don't need to say implied, the tooltip can explain.
  • lets turn different minting purposes just into a pie chart, rather than table, where label and number of tokens is shown for each. If each purpose can have icon as well, even better.
  • We have no time control drop down.
• Supply Distribution: can we add a % of circulating supply column?

Backers

• include a card for top 6 backers (dcg, hypershphere, alliance, d1, okx, gsr), no interaction required.
• only include last round, call it "final venture round", and we add FDV valuation there, $60M, and that it was Q4 2021.
• add clip out of venture announcement to Coindesk, like you made for the other page on the website already.

History

I think this information really benefits from being shown as a timeline, rather than a table. The ideal form factor here would probably be some sort of timeline visual which starts with earliest milestone, like last investment round, and then has a bunch of milestones, but where spacing on this timeline is not proportionate to real time duration. Ideally, we could dynamically add milestones in the backend, by just specifying

• an icon
• a title
• a date: year/month/day
• a text description of a few lines

and then the website could render a nice dynamic timeline. What do you think?

Traction

• The following key metrics of #members, #creators, #videos, #nfts are so important that I think they deserve special treatment. For each, we keep the top line count & growth for last week, but we also show a bar blot for past 10-30 weeks, something like that, where it shows values of the metric as a function of time. May deserve an icon or something for each.
  • Can we add another key metric: creator reach, basically how many followers across all creators in total?
  • Lets add another key metric: NFT sales volume. I think this is not super tiny, so we may not want to display it out of embarrassment, but we will get there!
  • Creator Tokens: We don't have this yet, but we may as well do it now. So perhaps a metric for trading volume.
• Value paid to creators: drop this.
• Daily active accounts: belongs with rest of chain metrics really, drop "blocks" if there is space issues, but add "Average Block Time" which shows number of it took to finalized last few blocks on average.

Engineering

• Lets keep the following top metrics at the top, they will be aggeragte across all our repos
  • stars in total
  • commits in total
  • #open issues
  • #open PRs
  • #new commits this week
  • #repos
• Lets add a really prominent commits per day line diagram, which stretches back the past 30 days or something, it again is across all repos.
• Def. lets keep the contributor avatar list, where we can click each profile.
• Drop "updated".
• Drop "popular repositoirs"

Community

Here we are merging social media and community basically, into one.

• CMC is Coinmarketcap.
• add tweetscout score: https://tweetscout.io/search?q=joystreamdao
• HEre we def have to group things by channel, so Discord, Telegram, TWitte, not by metric (active user).
• Events should show cards with one per open event, where the event is a Discord event basically.
• Featured followers: I don't think there is a description value, and I wonder if we really should use cards here, because we depend on people recognizing the avatar and handle, the other metrics are subsidiary.
• Drop "TODAY" last posted.

Team

Lets make the presentation style for all members to support display contact information for the user, specifically Twitter, Linkedin, Telegram, and Discord. Lets assume that users may have some arbitrary subset of tehse defined.

• Subtitles, like "council", "working groups" for subsections def. need to be more prominent.
• Plan content cannot be shown, we should just link to it with a prominent button
• Council only has three members, so use cards, and prominent visuals.
• Lets drop council budget.
• Being able to navigate back to past councils is a really nice idea, but that means we need to show the period for which the current council has served in the past, and also perhaps a distinct presentation for the current council, for example because you want to say how many days they have left in their term.
• Leads must be cards, not a table, as there are max 9. For each lead we want to have their role decorated with some visual that shows which group the correspond to, and you may want quite similar presentation to this: https://pioneerapp.xyz/#/working-groups, with information about group size, budget, etc. If we can combine some very compact way of showing all the workers in each group, that would be useful, rather than having 9 distinct tables.
• Jsgenesis member should be cards also, not table.

Comparison

Looks good, but could we make this more potent by switching rows and columns, so projects are columns, and then on top of the table you make a bar chart for the FDV, which is extracted from table, and each bar sits on top of each of the columns. This way we give the FDV valuation comparison a very clear relative comparison visual, compared to just having a number in a cell.

Roadmap

Solid!

Chat Widget

• AI is premature, I think we can have solid coverage with DAO, they are already doing a smashing job on Telegram & Discord.
• I think we really cannot attempt to build a solution from scratch, we reall have to use some off-the shelf tool which can be customised suitably, in terms of branding and positioning. Can you perhaps do a review of major offerings that gives us the freedom we want?
• I also agree that top right is best for engagement, and also having really nice visual which makes you feel a real person is there right now would be great, but we have to operate within confines of what exists on the market.

[KubaMikolajczyk]

@bedeho the dashboard page low fidelity second iteration is ready to be reviewed ✅ It was a beast to go through but I hope you will like the results 🙇

🎥 Video update (34min in x1.2): https://www.loom.com/share/8714de6469a64cd2ad35dbd730f98f10?sid=784a2636-ee43-4648-b8b3-4ba1d4ffe03a

📄 Low fidelity v2: https://www.figma.com/file/SW6P9qk1RLha7nAfUk7ONo/Dashboard?type=design&node-id=445-26064&mode=design&t=G9vbMAY3Kl6YYaqu-4

⏯️ Prototype low fidelity v2: https://www.figma.com/file/SW6P9qk1RLha7nAfUk7ONo/Dashboard?type=design&node-id=445-26064&mode=design&t=G9vbMAY3Kl6YYaqu-4

If you want to check the first version the links are here: #650 (comment)

[bedeho]

Great job, I just responded on the Figma!

[bedeho]

By the way: do we have an actual section for the landing page which onboards peopl eto the dashboard? I think its needed, but not sure where to place it and how to get people enticed to engage with it.

[KubaMikolajczyk]

@bedeho thank you for all of the feedback - its implemented into low fidelity designs and its ready for a review ✅

🎥 Loom video (12min): https://www.loom.com/share/6f3269c0475c4ff1831f15bfed5f2be6?sid=fd680eee-d6f1-4698-b4cc-1d0d2e4f8ef0

By the way: do we have an actual section for the landing page which onboards peopl eto the dashboard? I think its needed, but not sure where to place it and how to get people enticed to engage with it.

Yes I think that apart of the main cta of the page being open dashbaord we dont have a dedicated section - that was postponed until we have the dashboard final designed.

[bedeho]

Fantastic, excited for the next phase!

1. The token is only called JOY, its just that it has different tickers currently, so drop the whole "where to buy joy/joystream" thing, we only refer to the token by one name.
2. The ready widget for Github would be for one repo, even if it exists as a reusable thing, we want a single wdiget across all repos in our organization.

[KubaMikolajczyk]

@bedeho the first iteration of high fidelity dashboard page design is here ready to be reviewed ✅

🎥 Video update: https://www.loom.com/share/d87c9aa280fd4e458e2faff2e5b2c172?sid=d71d0bb0-63d2-41e1-b355-a851417c7d5a

📄 Dashboard high fidelity figma: https://www.figma.com/file/SW6P9qk1RLha7nAfUk7ONo/Dashboard?type=design&node-id=585-54702&mode=design&t=wmqB01kKM6iFzRmp-4

🖥️ Dashboard prototype: https://www.figma.com/proto/SW6P9qk1RLha7nAfUk7ONo/Dashboard?page-id=530%3A19952&type=design&node-id=585-55665&viewport=257%2C2301%2C0.26&t=uIvYUbfSeUqwh9MX-1&scaling=min-zoom&starting-point-node-id=585%3A55665&mode=design

[bedeho]

Left feedback on Figma, excellent work!

[KubaMikolajczyk]

Hi @bedeho ! The dashboard page final designs are here along with all user stories and extensive RWD ✅

🎥 Final video walkthrough (40m): https://www.loom.com/share/109beb240425431b867da37447824ec4?sid=f481c7d8-3aaa-4f67-baa8-cc2a9232e51e

📄 Dashboard final figma file: https://www.figma.com/file/w458eXFjDWdJVrablD8aBs/Dashboard?type=design&node-id=0%3A1&mode=design&t=kw5S7naTPF8KTIwF-1

[bedeho]

Fantastic work, looks solid @KubaMikolajczyk , I think any tweaks we want to do at this point we can do in dev mode.