Web3 UX and DX in 2024 | Eric Bishard - MetaMask

[Music] all right hello you thin hackers how you guys doing my name is Eric bashard and uh this talk is for everyone from hackers Engineers product managers designers CEOs investors average users uh smart contract developers creators basically anyone who's building a product in web 3 um there's something in this talk for everyone but it's mostly geared towards developers building the next web 3 products and that's you guys the builders uh although I am from consensus and metam mass this talk is not specifically or just about us this talk is about web 3 making it better and the concepts tools and Technologies you'll need to know about to make web 3 a great onboarding experience for the average users not just the seasoned web 3 folks so I am HTTP junkie on Twitter again my name is Eric bashard and uh I'm hdtb junkie on Twitter telegram warp cast I currently work at consensus as a devil supporting the metamask SDK and API but we also uh work with all the various consensus products um you'll see us out of the booth you'll see this at the main event uh the Devils will have these nice pink shirts on if not um I'll also have some pictures of some of our devils in the slides um yeah so in 2021 I was a nodejs devel at couch base uh and when given the opportunity to host an ethereum conference in Dubai my boss would lot would not let me do so so that's why I left couch base that was part of the Great Purge of the you know when there was the max Mass Exodus of uh I guess web two over to web 3 and uh yeah so I picked up the telephone dialed the seven digits and said hey couch Bas what's up uh you know I quit um because they wouldn't let me explore blockchain um yeah so before that before consensus in couch base um I was working with Solar City Tesla and progress software and web 2 um so I've been an applications engineer for Tesla and Solar City and then I've also been a react developer Advocate uh and a node.js developer advocate for past eight years or no sorry six years yeah so from 200 uh to 2019 kind of finishing up my web 2 career and then getting into uh web 3 with consensus and I've been here ever since um so what do I think well I think uh web 3 will continue to grow reach more and more people all over the world and that's why I'm passionate about iterating developer experience in striving for a better ux and web 3 um some of the things that we'll talk about today you know what is user experience what's developer experience how might uh developer experience influence user experience in web 3 we'll talk about some of the eips that help to iterate developer experience in ux and web 3 in 2024 and also some of the products and then some closing thoughts so I'm old so when I think of user experience I don't think just about a ux designer I think about the overall experience that a user has with a product be it a tangible or a digital good in my honest opinion user experiences everything that touches upon on your user's experience within your product period so the holistic experience everything from uh how the developer relations team talks about it how your documentation Works tutorials uh everything is part of um well that's part of developer experience but kind of everything that happens on your product is kind of the user experience so you need to be kind of clued into everything start small iterate and uh really create a great experience overall another great great resource that I wanted to talk about um that has some overlap with this talk but it's one of the most important talks that I've seen and it digs a little bit deeper into product design so I'm going to periodically have some of these screens where there is a tiny URL at the bottom and I'll try to leave the screen up for a minute so people have the opportunity to take a picture of those but also remember that this is streaming out on YouTube and uh X so if you want to go check the talk out and see some of these URLs later uh there should be no problem the the talk is recorded So on the right right here we're looking at Unis swaps connect wallet experience and the thing that's great about this and one of the eips that we're going to talk about is EIP 6963 so uh it noticed that I had metamask flask installed that's our developer version of metamask but um if I were to also have like another version of metamask and flask both installed it seems that Unis swap is using EIP 6963 already so it would have both of those wallets listed as well as some of the wallets that um they might you know all also put into their menu but let's say that I also had Rabbi wallet I had Rabbi wallet and metamask flask both installed before EIP 6963 you might click on metamask and actually get taken to another wallet that identifies as metamask um so it's a great thing kind of uh EIP 6963 we'll talk more about that but you know user experience is everything from usability how easy it is to use or onboard new users to your web or mobile product performance what's the first the time to First render and loading States how quickly data is fetched or how long transactions take and how to keep your user engaged during those periods of load um it's also how you explain your product um part of you know the user experience is the nomenclature that you use in your website um try to make it to where people that aren't super experience in web 3 don't feel alienated when they visit your product um it's also about how inter uh users interact with your product and accessibility like we're in web 3 some of the experiences are kind of bad but we have to remember all the accessibility tools that we use in web 2 and we shouldn't forget those Unis swap uh it just works it's great um here you can see one of the other screens in Unis Swap this like the settings and they've gone the extra mile to ensure people from all over the globe can use this interface in their language of uh choice and their currency but more importantly Unis swap is great because everyone from backend front-end smart contract ux designers everyone on their team PMS everyone was in lock step creating this amazing product and uh one thing I'd like to know if you guys want to stop by and see me is if you have another web 3 experience that you think is a great user experience I use Unis swap because it's been around for a long time uh and it's always been kind of I think the an example of a kind of like a shining web 3 good user experience so another point I want to make about ux is it's not practical it's not practical to Outsource your ux design and not have those ux designers know what tools and Technologies and Frameworks uh that the web developers are using you know what what UI Frameworks um what CSS Frameworks all of that your product designers uh and your ux designers should kind of uh be working with the developers to ensure that the product that ends up being built is similar to what that uh designer had in mind if your devs use react Tailwind or certain UI libraries the ux designer needs to know about that and needs to uh design for those tools this is obvious but it suggests that if you don't know your target audience if you don't know your users and what they want and you don't do the testing research studies interviews and receive feedback from your users you won't be able to build a product that is great for you your users so yeah product teams and Engineers need to build things that people want and you can only do that by having a close relationship with those users and getting that feedback constantly and iterating your product so some final thoughts on ux as you start to build your project here at uh eth Denver as you start to hack um oops some final thoughts about kind of ux is just to um start small iterate uh figure out what you want to kind of create as a user experience for your users and uh build that stuff first make sure it's functional and again only move on once you've kind of really nailed down that user experience and that flow and those you know small amount of components first and then only kind of continue and get information from your users as what kind of features you should add next so what is developer experience it's a little bit different than user experience um so it's from your docs your tutorials your articles your workshops and presentations even the presentations that I give about our products at at metamask that's part of the developer experience um it's the actual experience a developer has when building with your tools metamask comes uh to hackathons to put new products in front of nice and understanding hackers knowing that our products are kind of new they might have some bugs in them but we get that feedback and it helps to shape the product and helps us to iterate our developer experience one of the first things that our developers did at our developer relations team did at metamask was work directly with the metamask team to ensure that we could recreate all of our docs and put a new version of the docs out there that uh continued to iterate that developer experience so uh here is what a front and center uh so we're going to go through some of the different uh so this is DX uh on the right here we have wagm the point I'm I'm trying to make here is that this is a good wagy has good developer experience in their docs they have a get started they have a y wagy they have a GitHub link they have um what developers need what are the react hooks that they provide what are the typescript support that they Pro they provide what wallets do they connect to information about other products that's used to create wagm like VM uh and then a long list over there of kind of uh things that I think are just very super important that you should kind of uh have nailed down as as part as developer experience and there's a lot of it it takes a lot of time to do that so if you're building a product or a service you should keep these things in mind so how does DX influence ux in web 3 so the onus is on us as the developers of a product to know how to use these developer tools and when to use out of the boox features versus customized and more specific technology to enhance the user experience um if you have a good developer experience the developers who use your products can should in turn be able to create a good de uh a user experience for their users um you need subject matter experts and highly qualified software Engineers to build your product a lot of web3 sites that we see out there look a lot like MVP and uh they should take this into consideration and uh you know using products providing good developer experience makes it easier to create you good ux if you kind of Follow that if you create a good developer experience around your products those developers should then in turn be able to go and create awesome web 3 experiences um some products and features so this is kind of the the what I wanted to get to and we're going to go through these pretty quickly but we're going to talk about some of the eips and some of the different products out there we'll talk a few about a few of metam mas products but we're also going to talk uh I'm going to kind kind of step away from that a little bit too and also look at the Eco system and talk about some eips and products that I think are really good and have a good DX and ux out there so first EIP 6963 there's a tiny URL at the bottom here um when I was learning EIP 6963 and how it helps uh developer experience and how I can help to connect to wallets I didn't have a good resource out there so I wrote the resource that I would have liked to have down here so EIP 6963 is the multi- injected provider Discovery proposal um it introduces a different approach for discovering and interacting with uh providers so in contrast to the existing window. ethereum object the best way to think of it is if I have several different wallets installed in my browser then uh the whatever product that I'm using whether it's wagi or web 3 modal um or web 3 on board these products should be able to detect those uh those different wallets and be able to connect to them correctly and that's kind of what EIP 6963 does and I'm super excited about uh developers being able to have this technology and build it into their applications and credit where credit is due um wallet connect and uh web3 modal were the first ones as a library to implement EIP 6963 since then we have wagi the metamask SDK kind of integrates with wagi uh but you can also do it as yourself as developer you can uh I have a demo uh down here in this article that can show you how to do that from scratch on your own um next one EIP 4337 account abstraction so account abstraction is set to re uh revolutionize the way we perceive and interact with wallets making gasless transactions the standard and secure social logins the new uh Mak social secure logins the new Norm fundamentally reshaping the eum user experience again uh tinyurl.com down here uh I can't spend a lot of time talking about this I only got six minutes left but I think this is one of the better talks out out there about uh account abstraction it's a little bit old but it's a good primer on what account abstraction is and what you need to know as a developer to kind of get started using it and how to think about it cookbook. deev so as hackers here at eth Denver you might have interacted with a guy named Tyler out there one of the mentors and cookbook.

deev is doing a lot for developer relations and developer experience in the web 3 space cookbook lets you find any smart contract protocol and library and you can access chain uh quick starts and fine-tuned AI chat Bots to explain unfamiliar Concepts in web 3 uh developer resources are often scattered Builders need to learn many different Technologies and many docs to build a good dab so cookbook Aggregates all this information and these resources and makes the learning process a lot easier uh also he built a chatbot for the uh it's kind of an unofficial chatbot for the East Denver uh hackathon but it it's great and it answers the questions for hackers so that he can kind of offload some of the work that he's doing uh you know and help more hackers and give them access to that chatbot and I just think that cookbook. deev is doing a lot for developer experience and developer relations uh in 2024 so check them out cookbook. deev uh this is a a little bit of a can't fit too many screenshots on here but uh go check out cookbook. deev and I think it's a really great resource to start to learn the ecosystem and all the different tools uh gelato networks um I'm just pointing out like uh really good user experiences out there and uh and they have a great developer experience also so as a developer you want to be able to kind of rely on Automation and reliable infrastructure so developers can focus more on building Innovative features rather than managing repetitive tasks or their own custom infrastructure um enhance user interaction by automating smart contract executions it provides users with a smoother and more seamless experience go check out gelato network if you haven't used it before it's like the backend for web 3 I don't know AWS for web 3 horrible probably analogy but um here are some of the different services that they offer and I think they're doing a really great job as well metam Mas snap so we're going to get into a few of the things that we have that we're trying to do to make uh a better developer experience in 2024 and one is metam mass snaps we launched this back in September uh through interoperability metamask snaps can expand the wallet's functionality uh think of snaps kind of as plugins for metamask kind of as that plug-in uh for Chrome or extension for Chrome is to Chrome uh snaps kind of R for metamask allows you to extend the metamask API uh catering to users engaging with non- evm chains you can manage your Bitcoin in a metamask wallet in a sec secure manner through security snaps implements measures such as checking uh receipt addresses against known fishing databases and simulating transactions to determine their potential outcomes and basically just ensuring that users have a clear picture before confirming any transaction that's just a few of the things that metam Mas snaps does and uh here are some of the team that we'll have here at eth Denver zad Sab is our uh zad Saab is our developer relations uh guy for metam Mass snaps Christian Montoya also and then Franchesco you see all these guys either at the booth down here or at the main event at our metamask in Linea Booth also zad's going to be uh he's going to be dejing I think in the chill room uh they they turned me down but whatever he's going to be there it's going to be great so go check him out there too uh the finally the metamask SDK so the metamask SDK is a library that provides reliable secure and seamless connection from your dap to not only the metamask browser extension but also gives your user the option of connecting to metamask mobile uh also with mobile and unity games you can connect directly to or through a QR code to metamask mobile and by integrating the SDK into your dep uh millions of metamask mobile users can connect to their preferred metamask client and again on web they extension so this is just a little bit of a a screenshot here when someone clicks on the metamask button if you have the SDK installed they have the option of clicking on desktop or mobile and if they click on mobile from the web uh uh you can scan this QR code with your phone it'll connect seamlessly and kind of uh you'll be able to approve all the transactions right through your phone uh also we're working with like the metam Mas portfolio team to make SDK better so they are testing it out they haven't launched it yet but kind of they're going they're putting it through all the paces and they have a huge laundry list of all the things that we need to do to make it a better user experience so working uh great with them but if you haven't checked out metamask portfolio check that out you can do swaps you can do Bri in staking all that um that's it thank you my name is Eric bashard htb junkie on Twitter telegram uh warp cast everything and uh good luck building here at eth Denver thanks a lot everyone