PeteWilliams
commented
1 year ago I think we need a bit more clarity on what the requirements are when a user first arrives at Console. There's a lot of things we could do, but it's important not to put too much in the way of the user getting into Console.
I would suggest the following as priorities:
- Give the user unobstructed access to Console - on first visit they're there to see what the product is, not necessarily to trade straight away.
- Give a brief introduction to what Console is and what it does
- Show a legal warning
- Guide towards connecting wallet and depositing funds
- Help them understand how to use Console
Suggestions to meet these goals:
Introduction to Console
On first visit, the focus should be getting them into the trading app, ideally on a market they have some interest in. The current design supports this with a modal over the trading view with a brief list of the top markets. We could add a couple lines here to introduce Console:
There is a separate ticket for how this should look when there are no markets.
Legal warning
If possible, rather than showing the warning as soon as they arrive at Console, we should delay it until they go to connect their wallet. Therefore ensuring they have seen it before they can trade.
Wallet/deposit guidance
Showing this in an initial popup is likely to be too early and would be dismissed and there's no obvious way to bring it back. As such, I'd suggest we use the empty states of the Collateral tab and the Portfolio page to guide them.
Collateral tab. Show this as the selected tab by default when you first visit - positions, orders etc will be empty anyway - and show content with a high-level explanation of how/why they need to deposit collateral.
Once the wallets are collected, could then show the deposit button:
On the portfolio page, the 'connect wallet' content could be shown in the tab to prompt them to connect:
Understand how to use Console
As part of https://github.com/vegaprotocol/frontend-monorepo/issues/576, I'd propose adding a link in the header which provides some sort of support content. Currently, it looks like the best place for this to go would be https://docs.vega.xyz/testnet/concepts/trading-on-vega
If we add further Console educational content, such as guides/tutorials, videos, etc, this could become a modal which shows the various content/links rather than just a link straight to docs.
We could also include some of this content in the welcome modal, eg:
Misc
Other things that have been mentioned but I suggest we leave for now.
Incentive promos It feels like the vega.xyz site is the place for a full incentive list to live (especially as not all will be possible to do in Console), but perhaps Console could promote relevant ones as and when. For example if we move towards notifications popping up in the corner, they could get one of these when a new incentive is launched, linking to the website.
Versioning Version history/release notes don't seem important enough for a landing page. I'd suggest the network/node switcher or status bar mentions what version is running and links to GitHub/release notes from there. For any major updates where they need to be aware of a change, we could also use notifications.
Stats Not sure what sort of stats we talking about or what the user need for them is, but again would suggest the status bar might be a better place to link/open a state page from.
Connect wallet For new users, I don't think they'll be looking to connect their wallet immediately, and the above suggestions for empty panels should help them do it further down the line, plus the work to add a connect wallet button to the ticket. For existing users returning on a new machine, I think they will dismiss the welcome dialog and look to connect their wallet from in the trading view as they had done previously.
Challenge
Can we improve the first use experience of trading to get people up and running more quickly and easily e.g. in context links / guidance - make your first deposit - whilst making it clear what markets are live
Tasks
Probably makes sense to refine https://github.com/vegaprotocol/vega.xyz/issues/246 as part of working this out
Sketch
Miro:- https://miro.com/app/board/uXjVOs_PBKk=/?moveToWidget=3458764535554690708&cot=14
Additional details / background info