Ryan Angilly ~ Blocknative Dapps Are Cool, Dapp Users Are Cooler

[Music] on yet oh it is on alright I'm gonna give everyone who wants to leave 15 seconds before I start talking I'm just kidding you guys should stay this would be really fun I got some fun stuff to tell you things like right in my field of view alright so today we're going to talk about gaps but more importantly we're gonna talk about DAP users because that's what we all really need in the space is more users my name's ryan Angele I'm a co-founder of a company called Bluff native you probably haven't heard of us we got good old-fashioned Fiat funded about a year ago and we haven't exactly been in stealth but we haven't had much to say until now we're using if Denver as a bit of a jumping-off point for our first product we build depth usability stuff so that you don't have to the goal this workshop is to help make your daps at least a little bit more usable now I'm not gonna show block native too much until the end but I do want to give you a little bit of context for our history because I think it's really helpful when someone's speaking to know where they're coming from so you can decide for yourself whether or not to ignore me about a year and a half ago we started building blockchain games so we wanted to build an e rc 7:21 trading game where you could trade cards complete sets win prizes and don't worry too much if you can't see the details on these right just right hand side it's not super important the details are important but what is important is that when we did some gameplay sessions we got like 12 people on a Google hangout it was abysmal people were kind of chatting out-of-band asking hey did you send the car did you complete the set like what's coming on and it just was really hard so we added a bunch more features did it again same result people just weren't having fun so he talked about this for about a week and then we added this new thing on the right hand side and again don't worry that you can't read it all it's important there is that it was this omnipresent sidebar in the ended app and what that did was just give an event stream for like what was happening on the chain so but it would do it in plain English so it would say something like you know Neil is sending the Battelle card to Ryan right that's a pending transaction right Neal you know successfully sent Vitalik card to Ryan right and and we just added this simple thing and we did another gameplay session and the game it was night and day right the game was really fun to play so the light bulb went off I'm 36 okay I'm ancient in this room and my two co-founders are in their 40s and we remember this this game this story from the early 90s right we remember in the early 90s when product companies are building products then they'd have to stop build a whole bunch of infrastructure because stripe wasn't there all these companies weren't there to support them and the only companies that came out of that alive or the companies that actually pivoted to selling that infrastructure and what we realized is that usability this isn't the case in kind of web 2 but in Ford Apps usability can be thought of as an infrastructure layer right we're all building the same stuff right so we thought about this for a better part of a year really diving in to figure out kind of where in the space we could make a contribution kind of put our flag in the sand and that's black native right so I'm gonna I'm gonna tell you about what we've learned about usability over the past year and I want to give you four key takeaways for this talk one is I want you to have a better appreciation for how hard your job is this might sound weird but it'll make sense later I want you to be able to think about usability in a more structured way I want to give you a tactical usability checklist and then we're gonna do some pattern walkthroughs if there's time kind of showing you some good patterns of usability that we found in our research so your job is really hard I think anyone building gaps knows you know that your job is really hard and I don't think anything I'm about to say is gonna be something that you didn't already know but I want to like surface it up so that you think about it right because it's it is a big deal web 200 people go out and they build a product right the people that use that product they know what emails are they don't passwords are they know what password resets are and credit cards and CDs they know these things right our users don't know what private keys are they don't know what all these weird terms are and in addition to that that kind of cultural leap that they have to make you also have to build all of your onboarding right our users in the right browser using meta masks on the right network you have to build transaction notification right tell them when transactions are pending when they're successful you have to do a lot of you know relatively common sense parsing of meta máscaras to explain to users what's happening you have to tell them if the network is congested if if they're games even like running at it at a good speed right now you can do some gaseous summation stuff and then you can also do what we've started to call a transaction support and it's just like some good practices that we found like if a user tries to do a transaction twice on a walk twice in a row warn them that they probably need to confirm the first one first right it's things like that so so your job is really hard the next thing that I want to kind of give you is a way to think about usability and a more structured way if you ask a hundred people to talk about blockchain usability you're gonna get a ton of different anecdotes back at you right um because usability is the most overloaded term in blockchain decentralisation is the most incorrectly used word in blockchain but but use abilities the most the most overloaded one it applies to so many different areas so I started thinking about how to present this and when I really don't a building this usability hierarchy I realized it wasn't really possible because there's not really a hierarchy in the same way that you have like an OSI model for network architectures but I'm gonna do it anyway because I think you'll remember it better as like a meme so I'm gonna call it a hierarchy but then just cross it out so you know that I'm actually saying this is this is a direct analog but to give you some ideas of what I'm talking about when you ask people about usability you're gonna hear hey it's really hard to operate a node right so this protocol operator usability you're gonna hear hey it's really hard to convey to people how congested the network is right there's Network usability issues you're gonna hear you last year at Denver poly was giving out these little paper wallets with 250 poly right so you can have a paper wallet you can have a ledger usb-stick wallet and you can have meta mask which is piece of software that you install into a browser and we call all those things wallets and we expect users to understand that right they're just confusing from a nomenclature perspective there's a funding usability issue it's hard to get your first like bit of of ether right and if someone just sends you tokens and you have no ether and you don't know that you need to have ether to send that token somewhere else it's just it's confusing there's security usability people don't understand that when a window pops up saying you know metamath wants to connect to your wallet people might worry that that apps gonna take all your your ease right this sounds crazy to us but this is not crazy to you know kind of the the goal of like everyone using these dabs right and there's smart contract usability the fact that we call these things smart contract is very confusing to people and the fact that they now are calling each other right you have dabs calling Dex is calling all these other things as an issue and then at the top here I have as a separate thing DAP usability right and the thing that I want to really highlight here is that even this faux hierarchy it's really that's really not the case because it's not really a hierarchy where you just kind of go down through layers of the stack your DAP is going to depending on what it does selectively expose users directly to different usability issues in all these different areas right now the reason that I'm like really diving into this and the reason that I want you to be able to think about this stuff is that I feel like the them one of the most important things for a product manager is to actively know what the things you're not doing right so it's really easy to want to go build something write down all the features and go build it right but the really good product managers they build this whole landscape of what could be built and then they just pick a few things to build and what I want you to be able to think about coming out of this this talk is thinking about usability and understanding that there are some things that you should deal with because they're you know very connected to your to what your dad's doing and there are some things that are just the reality of the world and you shouldn't burn energy trying to you know boil the ocean right now right so hmm I'm going a little fast this is the first time I've given this talk and I have a couple extra minutes any questions now any feedback and he just thoughts in general and what I just said it's fine if not you can find me later but I wanted to give the opportunity yeah yeah so the question is when I refer to DAP usability am I just talking about like the front end yeah I'm talking about the thing that the end user like uses right what their experience is the pixels they see kind of the information that is again conveyed to them yeah yeah all right okay cool so did a little googling before this this talk and I googled DAP usability checklist and I couldn't find anything and I thought that's gonna be useful thing so we built one block native and so it's a github repository this link is very easily findable if you just go to block native comm and click around and you'll figure it out but it's just a it's just a one markdown file on one file repository and it just has a checklist of things grouped together in various ways that you can just to think about it's not meant to be prescriptive it's not something where we're saying you must do these things if you're building a DAP it's certainly not exhaustive so we're excited to get people to you know comment on this thing send us pull requests we'd like to actually build this into like a community thing where you know you can be at a hackathon any bit cool like what things do we want to do what things don't you want to do or you can be in a product planning meeting and you can actually really kind of attack this thing I think it could help a lot okay so now I want to spend a little bit of time just kind of walking through we came across some really good products over the year that we were looking into you into DAP usability and one of them is fun fair you know fun fair is a like a gaming gambling site and it's like part on chain part off chain we're not affiliated with them at all I'm not shilling for them they don't even know this is like in the talk but they've done a really good job at building out with some custom stuff around all these usability things that I'm talking about on the DAP usability stuff so first thing you did is you know when you come to fun fair and Safari they have this entire like fully dedicated page wizard experience that like walks you through right installing the right browser installing meta mask it walks you through like authorizing that a mask it walks you through making sure you're on the right network and make sure that you have the funds that you need to play so it actually will make sure that you have both rink B eath because it's like a rank B test net app and have some of their token which is called test fun and I'm only showing this because I think it's it's just it's interesting to realize that these people like this is this is a full-blown product endeavor to build this thing right it's not just a couple of like JavaScript alerts and it works like they have a lot of users on this stuff right relatively speaking of course but but it works and so going forward they've really I feel like they've knocked this out of the park so this is what happens before you actually submit a transaction right it's all very plain English right how much test fun would you like to play with how quickly would you like to start playing slow medium fast right they're not talking about gas price they're not talking about how you know they're not talking about blocks or anything the only place they mention anything blockchain II is when they mentioned the gray down here but I think it's really important and it's it's easy to overlook how I think someone really went out of the way to figure out like how to do this in plain English I think that's something that a lot of DAP teens can forget about in the moment they just cool they'll throw in some very common kind of like hacker nomenclature in a place where there really should be more kind of like soft language right I'm so great job here when you submit a transaction and the meta master window pops up they actually keep a modal on the screen and they tell you to go look for it right and if you don't confirm or reject fast enough this little thing starts floating in the top right corner of the screen like pointing at the mask icon right and so again like they just really have like gone out of the way to build this whole this whole thing and then lastly you know when the transaction is pending the transaction is not pending they are setting up your game on the blockchain right and that little pink arc that looks like it's broken it's like a spinner that goes in a circle right so again just some really great examples of of some patterns that I think are worth knowing about now crypto kiddies takes a slightly different tack where they just have a series of modal's which which works really well they don't have like a big wizard we kind of know what where your state is in the wizard but these Mobile's that pop up if you come to you know on Safari to crypto kitties you get this mole saying switch browsers once you switch browsers it says install meta mask and they have a bunch of the other kind of standard stuff um but I couldn't resist doing it they're not perfect right so impossible to read but under the orange button on the right bottom there's an error message in pink and it says oops looks like this transaction is invalid what actually happened here was I went up to meta mask and I switched networks over to kovin and then I clicked by now and so I'd not even crypto kiddies that cryptic kitties decided that was so much of an edge case that they weren't going to deal with like warning people to switch networks back right and so it's just an example of you know maybe it was an oversight I like to think that they did it on purpose just cuz I didn't feel like building it because they're pretty pretty sharp over there but just just just an example of how easy it is for things to kind of slip through the cracks and why I think this should be like a layer of infrastructure that's just kind of common across all DAPs right that's a little bit so as I said like I'm from a company called block native and we built this thing that with just a few lines of code which I'm not going to get into it'll give you like one line onboarding right so you call line eight once you do all the other stuff and that'll make sure that the user is completely on-boarded into like your like the network that you want right I will share these slides later too if you want but the what will happen is we will actually pop up some you eyes to like walk them through the whole process right from from like soup to nuts and then you know we will return you know success once once there like the user is on the right Network has eath if you want them to etc this is what it looks like my my night mode just kicked on I was probably kicked down a while ago didn't it this is what it looks like hard to tell what's going on here because of the resolution but the left side are two screens that pop up to onboard users the bottom right hand corner is a set of Little Toaster notifications that we will actually throw onto the screen on your behalf when transactions are running around and you get all this with a very very lightweight integration it's blocked native com I'm Ryan I think that was quicker than I expected so I'm open to questions we have a booth upstairs we want to come see a demo of what we built and I think that is it questions no cool yeah he's gonna ask you to use a microphone I think yeah so thanks for the presentation I was just gonna say that a lot of the usability issues have got it over the way some of these fundamental primitives and the blockchain world work like meta masks and it takes you you have to remember those twelve words in the seed phrase and you have to write it down and most users are not used to stuff like that and I think some of the usability work for example Austin is doing around burner wallets and meta transactions and all that stuff they also go some way towards addressing a lot of these things so I guess the question I have for you is that I mean I think I think I think of it like a walk fee for Salesforce you know this is like a guided tool do you see that do you see it working more like that in terms of a stop-gap arrangement that gives people a guided path because the fundamental usability changes have to be done at the infrastructure level for this to go anywhere so to me I wonder this is more like a kind of a bandaid on top of something that's not working because a band-aid he said yeah yeah yeah I mean it's good questions so yeah I think you know what what we chose to do was was to not boil the ocean from day one right because as you say like this is this is a community effort to get everything really humming along I think that what we're trying to do is we're trying to free up DAP developers to build more functionality to demonstrate value to users to force them to use stuff more to them kind of like put pressure on the other usability layers right so the the goal here like yes there has to be a lot of other stuff done and other layers to make this much more transparent much more seamless but I think that that our focus is just making it a little bit easier for DAP developers to just be able to push their space forward without us all having to burn cycles kind of like spinning the wheel and I will say this is just like our first product so there'll be some other stuff coming down the pike that are in the same space but not just this thing so I should probably just read the docs but how customizable is the onboarding flow do you are you able to pull out just certain steps if I want to just use some of your components but not the entire flow can I just rip out some pieces or or can I customize the you cannot customize it I don't know if you'd I'd love to like it loves to talk about details I don't think you'd want to unless you're unless you're DAP already does like one or two of the steps and you wanted to do like three of them you know the three another five so so basically what'll happen right now is is we will figure out what you have and what you don't have and start at what you don't have so like well just kind of like when you call on board we will just kind of go to the place in the workflow where where you're blocked right so there's kind of like a readiness assessment that we do internally and it's it's relatively sequential right so like you have the right browser then you have metamath then you're authorized and bow alright so so when you call that onboard function we just kind of like go down that pipeline and we just will pop something up at the first point that that we realize that you need help so it's not customizable but it might just behave well enough for your use case but that's later what's him I was just curious do we get any call backs back from that onboarding flow to see if the user drops off what step they yeah actually so that's a good point that um that I was supposed to say earlier and my CEOs were mad at me but um so we have this in this you have this entire like analytics back-end to this thing so the whole flow is sending like an event stream back to a server it's as anonymized as we can make it like we're not we're not doing like Waldo dresses and balances and things like that but we are storing events like you know this user you know tried to do a transaction but didn't have enough eath right or this user started a transaction but then cancelled it right and so we do have this entire kind of like analytics back-end that we think is gonna be have a killer feature for some like larger companies but say could you guys even just use that yourselves to a be test and increase how many people get through your guys where's the dad out only to each company here yeah yeah we've had a lot of av-test talks yeah we could I think once we have enough traffic we'll be doing some some a/b testing Matt yeah thanks all right all right everyone I'm Ryan block native we're up there user stuff we got a ton of bounties bunch of money just use our stuff and show us how awesome it was or show us how much it sucks and doesn't matter we'll still give you money if you do it in the coolest app so check out our bounties thank you