Buying Guide on Website

[bedeho]

Background

We are frequently asked how or where to buy the native token JOY. Many people perhaps are not even asking, as even that requires a good amount of effort, but even when you find out where to buy, doing it requires executing many steps properly, and you may need to do quite a bit of research still on your own. How can we make this easier?

Proposal

Make a guided experience that assists someone in how to go about helping someone buy JOY tokens.

This is a complex topic, as there are many variables at play here. There are distinct problems a user has to solve

1. Identifying which exchange to use, depending on whether their location is served, and other preferences they may have about exchanges, such as already have accounts certain places.
2. How to get their wallet solution up and running properly and how to store JOY in that solution. Some are happy storing on an exchange, some may want to store on their phone, browser, desktop or hardware wallet.
3. How to obtain USDT if they don't already have them, as you will need them to buy JOY.
4. How to actually do the trade on the exchange and withdraw the funds properly.

We have already mapped out some basic guides that cover some of what it involves to do buying on a few of the exchanges we are listed on, but this is quite preliminary still: #702. Here

This should be turned into an new page on the website, and we will introduce a new primary CTA on the website that informs users that they can learn about how to buy the token. There is already somewhat related information on the www.joystream.org/token page, but I think we should just leave that as it is as a separate reference page.

Currently we are listed on 3 exchanges, and there are 3-5 wallets, but more ways to buy and sell JOY will very likely increase over time, so the experience will have to be flexible to this.

Resources

It def. would be wise to try to look at other crypto projects that have buying guides on their websites to learn a bit about, here are

• https://xcadnetwork.com/buy-xcad
• https://wallet.deso.com/buy <= very basic, perhaps a bad example really, does not do much.

[msmadeline]

@bedeho Hello, I already designed the first low fidelity design for joy buying guide. Looking forward to your feeedback

➡Figma page: https://www.figma.com/file/DFxp2Ng9tc94QbofCf7c5U/Joy-buying-guide?type=design&node-id=20-491&mode=design&t=biqmNcpQZ0k0IuED-4

➡Loom walkthrough:
part 1 https://www.loom.com/share/1abaa875486d464badb6285274fbe086?sid=cda321ca-93fa-4430-8318-0cd730d71bed
part 2 https://www.loom.com/share/2932820ceea3436092948fc6ea6b4a08?sid=34d6b44c-a2ba-4ee3-bac8-c220a6011e5f

[bedeho]

Thank you for this proposal, this was a great start, but I also see that this is going to be a very interesting and challenging project to finish, at least in the way I intended.

Overall, I think the main issue with this approach is that it is not a step by step guide that tries to help the user from where they are to their inteded goal, with their limitations in mind. The biggest indicator of this is for example that you have separated wallets overview from the exchanges.

Let us also drop any effort to explain very general concepts to people, like what an exchange is, what a wallet is, etc. We are going to assume that the use personae really already know these, and not waste valuable space and attention which may cause people disengage from the guide prematurely.

I think your observation that using video embeds may be more effective than long sequences of images and text may indeed be correct. So lets do that everywhere.

Next Iteration

I suggest we try to go for a much more deeper guided experience in the next iteration. It is organized as a wizard which takes the user through a sequence of isolated steps, where the user is asked a question that the allows the guide to determine the ideal next point of information or action the user must engage in. We should minimize the number of choices the user has to make which are not unavoidable, so for example just listing 4 different wallets and asking the user to pick one is not acceptable. We should instead just tell them what wallet to pick and how to install it based on the right questions that determine whether a user is best served by one or the other wallet, the same goes for exchanges. I think that in this guide we should assume that OneKey support exists, and also that Changenow integration works.

So the most important step here is actually not to UI desing, its to actually design the right tree of questions and answers that allows us to figure out what the user should be doing. This can be done with a simple flowchart diagram (https://www.lucidchart.com/pages/what-is-a-flowchart-tutorial), so lets do this before we do any more design work.

Let me try to sketch out what I have in mind, so you can get started. The first thing you want to figure out is what wallet the user will store their wallet. So you can ask them "Are you comfortable storing funds on the exchange, or would you prefer self-custoday". If the user says they are happy to store on an exchange, you can proceed to the next step. If they want to self-custoday, you can ask them "Do you have a OneKEy hardware wallet". If they do, then you can tell them great, you can store there, and the later guides should take this information into account, if they don't, you can tell them this is th only supported hardware wallet, and they can buy it here. If they don't want to wait for that, they can chose to go to a next step to select a self-custoday software wallet. Now, we have to do a similar set of questions to recommend to them what software wallet they should use. This may depend on whether all the software wallets we have work equally well on all devices, browsers, etc. If we have a software wallet which covers everything, then we can just show them the installe xperience for their relevant setup. So for Chrome, we show them a video of how to install and setup on Chrome extension store. Or if they are installing on Windows, we show how this is done. So you can see here there has to be done a lot of research to map out exactly hwat our different wallet alternatives support. Then after this, you have to figure out what exchange they can use. First thing to do is just to ask them if they have a working account on one of the listed exchanges, if they do, then just direct them to that. If not, then the recommendation starts by asking how much USD they want to spend, as if its a low amount, they coud juse use Changenow, which I think accepts all countries withou KYC if the amount is very low. If it is higher, or if the user does not want to use Changenow, then you have to ask them what coutnry they live in, and then pick and exchange for them which is the easiest that supports their country. You then may need to inform them that they will have to KYC to use this exchange, if that is the case, and the video should show this. Then we get to the USDT question, where we have to ask if they hav eUSDT or enough of some other crypto that they are wiling to sell, etc.

Ok, as you can tell, this gets very complex, and also, as we add exchanges and wallets, important parts of the model may change. But ultimately, this sort of experience is what it really means to serve the user through the chaos of the crypto space. The only way we can make progress with this is through research, feedback from experienced community members/crypto users, and trial and error, until we get it right.

I suggest you try your hand at this, using a flow chart digram which very clearl yshows what questions are asked at what stag, how the anser from the user leads us down a new path of questions, and what the user is informed/presented. There shuold be no UI design for this, just the flowchart, but it will easily get big, so try to use some flowchart software for this to make it easier for yourself.