Crypto UX and Bridging User Mental Models to Developers

So if you love UX, this session is for you. We all know that user experience in crypto is quite challenging to get it right. And oftentimes, developers and real users do not actually see things the same. In the next session, we'll be learning how to design the right user experience of crypto applications on the topic of crypto UX and bridging user mental models to developers. So I'll give the stage to our lovely speaker Christine Erispe, core member of EAST63 and developer at Waifu project.

Welcome Christine. Hi, so I'm not sure if developers are already aware with some UX practices, but if a lot of developers are here, then perfect, because the audience for this presentation are builders who are just beginning how to understand UX in crypto. OK. So many good Web3 ideas gets lost with bad UX. Even though your ideas are really brilliant, if the user doesn't understand how to navigate through it or how to go through the functionalities, then, yeah, that will be lost.

All the efforts will be lost. So in many cases, there's a mental model mismatch, there's overwhelmed lack of direction, or sometimes lack of feedback. And we'll tackle how to address all of these things in the latter slides. So right now, you have two users. Before, we are only catering to crypto-native users, where the users are like us.

We already understand what they want. They want more information, more context, more customizations. But right now, we're already gearing towards the mass adoption stage of Web3. So we're also catering to non-crypto native users, which are your regular mom and pops, your aunties, even people who haven't really understood what the blockchain is. So how do you design for both users?

And crypto natives, we already understand. So I'll focus more on how to design for non-crypto natives without losing the crypto native users. So, yeah. There are a few things about Web3 that many non-crypto natives don't understand. For example, how to navigate through browser extension wallets.

Like, when you want a transaction to happen, they have to look outside their screen. They have to look at the browser extension, which is not natural with how we regularly navigate the internet but that's how it works with web3 right um also transaction fees they have no concept of gas and all of that signing and approvals and of course the um of course the speed will always be much slower than regular internet because we're using a decentralized infrastructure. So, of course, there's AA to address that, but we'll get to that on the next slide. But with these things, it translates to different UX flows, like how do they set up their accounts. In regular Web 2, you just sign up with your email and then you get a verification code on your email and then that's how you set up your password.

But in Web 3, it's different. You have to download the browser extension wallet, set up your address, keep your private keys and all of that. Also, the write flows are different. If you're going to transact or write on the blockchain, it's different as to when you're going to write on a regular database. Security flows and feedback flows are also different.

Like account recovery, it's very different with Web3. So post-AA, even though we have Paymasters, we have account recovery, we have everything that the user needs to not use a browser wallet, you will still have to do a lot of things to be able to connect to your users and communicate to them the value that your application gives. Like, for example, explaining Web3, I'm a huge advocate of letting your users know that your application is using blockchain and what's happening behind. Because if they understand the value of, say, self-custody, It's not a very obvious feature that they can just see through using your app. But if you explain it to them, then they will have more motivation to go through the process of using your app.

Another is creating better interaction design. I'll get to it later. And then of course, you will still have to deal with the speed because our infrastructure has limits. All of this we're going to address on the next practices. So the first one I would suggest is to lessen the cognitive gap.

Whether you're using AA or not using AA, you always need to use tooltips like this. For example, I just use Slack, for example, but you can also use this with the centralized application. Like, for example, Slack did mention that direct messages are private one-to-one. So you can also explain to the user that their messages are private and cannot be tampered by anyone. So any feature or benefit that your application has for being decentralized, explain it to the user during onboarding so that they can understand the value.

So yeah, mention the technology during onboarding and also use simple words for the copy. A lot of users get overwhelmed when they landed on the first page of the website because there are a lot of terminologies that they don't understand. Maybe if you're targeting crypto natives, then that's fine. But if you're also targeting non-crypto natives, then maybe a simple FAQ at the bottom of the page will help or even just using simple words for copy like for example if you're if you're using terminologies like on ramping just tell them on wrapping is buying crypto with fiat or what's what's another term that I didn't understand when I was you? Atomic swaps.

I don't understand atomic swaps at first, but then I realized it's directly buying from another user, from another chain. So we can just use simple words without, if you can use simple words without jargon, then do so. Yeah, lessen the cognitive gap so that the user's mind doesn't short circuit when they're navigating. Another one is to give them better heuristics or give them a better approximation on what the process is like so that they can understand where they are. This one is debatable.

I designed this during one of the pop-up cities in Chiang Mai. This is the one of the most complex user flows in Web3 which is the token approval. So you can just pop a modal during the process so that they can understand that their browser wallet will open. They can understand that this is a normal process where they approve the application to spend the tokens. And then where in the process are they?

Like, I put mini bars that has three mini bars that lights up whenever the user finishes the step. So if they're doing some multi-step process, then giving them some visuals on where they are in the process really helps. Another one for giving better heuristics, I think, is what most application developers miss, is that they shouldn't need to connect their wallet to be able to see what the interface of your app looks like. Some applications don't show the interface of the app until the user connects the wallet. It's bad experience in terms of the user doesn't have any more context on how the app will function.

So it will be best if you can show your front end even before the user connects their wallet. So last one, I think. Another practice that you can easily implement is progressive disclosure. So give them the information piece by piece. Like this one I based from, of course, Uniswap is one of the easiest swaps to understand.

And how they do it is that all the contacts with the transaction, they hide it under an expandable drop-down button like for example they only show the exchange rate at the bottom and the gas fee but then if you're a more advanced user and you want to understand the slippage the network costs and all of that they don't want to overwhelm the new user so they put it under an expandable drop-down like on the second screen. Another one for progressive disclosure is that don't give your users so many buttons in one screen, just give them one clear call to action within the screen. So for example, we have a lot of we have for example in a list of LP pools, we have a lot of LPs then give them a way to filter through all the LPs, if it's for degens, if it's low risk. So give them some options, or give them a way to easily understand how to navigate through your site. But disclose it progressively and give just one call to action for each page.

Oh, yeah, there's one more thing you can easily implement, and this changes the perception of speed for your application. Even though blockchain may be a bit slower than centralized systems, then you can always give feedback. If they have sent a transaction, just pop a model and show how the transaction is going. Like this one, I got it from Orbiter. They have this model that shows how your transfer is going.

And if you're a more advanced user, they have a little link to view it on the either scan or blockchain explorer. Another one is Uniswap. If your transaction is processing, if your transaction is successful, then they give their feedback. One more thing is that when the user doesn't connect with the right network, usually it shows in the button, but it's better to also show it at the next logical step so that they know easily that they're on the wrong network and can switch it. So yeah, as an industry, what we can do is to have a consensus on the design because different applications approach UX differently.

And it might help to form the habits of the user if we have like a certain standard on how we do onboarding, navigation, transaction flows, and all of that so that our users can have some estimation on where they can find certain things and certain functionalities and what to expect when they're interacting with the centralized applications. This is what I'm building with waifu. I'm creating an open source design system for anyone building dApps so that they can easily create front ends that are specific to Web3. Yeah, let's yelp together about crypto UIs because I think this really matters in this era of adoption. Just scan the QR code to connect with the project on Telegram or if you just want to know more, visit the site waifuproject.

tep. Yeah, thank you so much. All right. All right, thank you.