Designing Ethereum UX for Humans - Considerations & Tech Stack with Jason Goldberg and Benjam Bollen

ready okay cool so today we're talking about designing Krivda user experiences for humans so talk about user experience design and how to build products that people actually need than they want than they use I'm Jason Goldberg and this Benjamin Bolin we are two founders of Peppo by OST we've been working together since early 2017 and Ben's been working a lot of problems and we've been trying to solve since 2014-15 and I've been building web 2 apps since 1998 the first project I worked on was a well chat rooms you might have some of you heard of it well chat rooms I then built several 200 companies and learned a lot about product design along the way so to start off talk a little about the UX prizes that were gonna be having for hackers today or this weekend we have three prizes one is best overall UX the second is the runner-up for best overall UX that is completely technology agnostic we don't care what you build on we're just looking for great UX innovations problems to be solved and then we have a third more specific prize the best wallet web wallet innovation so we're looking for innovations around how to enable better experiences around web wallets when it comes to the user experience and security we'll talk more about that at the end of the presentation so let's talk a little about how do we design user experiences for humans and what do we mean by this well the first thing let's start with what are humans and so I think we all have a little bit of experience in this domain but you know as product managers as engineers developers we often think very functionally but humans are more emotional and so when designing product is very important to think about not necessarily just what function that the user wants to accomplish or what tasks they're trying to accomplish but what is the actual job that they want to get done which is very emotional usually you had some ones when they decide let's say you know I want to get my car and drive to Starbucks to get a cup of coffee it's not the functional aspect of do this do this this it is I want coffee and I'm thirsty and I want caffeine to perk me up that's the emotional aspect is you know that I want to feel that jolt of energy that helps me through my day and so as as product designers and engineers we need to think about not just what functionally users trying to get done but what is the real goal of what they're trying to accomplish when they use our application otherwise they won't use it and users are very needs driven and this is whether you're dealing with an end consumer or you're dealing with developers or user product you know everyone's got something they're trying to accomplish it's typically very emotional they're looking for whether it's more convenience or something helps to get the job done faster or helps them to get more enjoyment or a more pleasure or to learn something but users are very very needs driven and from now you said the other side of it what is the user experience this is where there's often a misperception user experience is not designed so a lot of people think that user experience I think about graphics and pixels and imagery and icons that's not user experience that's graphic design user experience essentially is problem-solving it's identifying a pain point that someone has and helping solve that pain point or another way I like to put it is user experience is finding people who are stuck and helping them get unstuck and that could be a consumer who is trying to accomplish something it could be a developer or trying to accomplish something and just taking the number of steps that it takes for them to get that thing done and shortening it by let's say five to four to three to two to one to help them get that thing done better one of the clearest ways you can find if someone if they actually have a real need in a use case is if you see people who are building little hacks in order to get things done so you have people who are stuck and they want to get the job done so badly that they build their own solution and so this we often see this exact actually in crypto where you see people who let's say there are the early crypto adopters and they somehow they get some tokens through some application or through service and so hard to cash out though so they're stuck right but what do you see them to do is they go through five different Hoops in order to get unstuck so they'll move let's say their token and to die and their die into coin base and then coin base they'll bang cash out too or maybe I'll get from some other exchange it doesn't have kind of fee up here and they're looking for and they'll move that into into coin ba so then cash that out into something they get it to their bank account even though it takes three days and they might go through five different steps to get done with them when I get done and then anything from a product designer or an engineer our job shop here how do we help them get unstuck and kind of take the hack they're doing and just make that whole press stuff compress that whole thing so if you see people for instance that are let's say you know I think we all know like onboarding is a complex problem in our community or a key management but we still see people going through all these different hoops when you see people that are doing their own hacks in order to get it done that's a area we can you can just kind of step it and say okay can we build something to help them get unstuck and have them rely less on hacks and more on product or more on our technology so another way I like to put it is that a great user experience results in pull rather than push and the idea the whole concept here is that most of the time we when we build product unfortunately what we do is and I've done it myself is we have this great notion of kind of a problem needs to be solved and we then build our best idea of what that solution that problem is and then we get you know we spend months and months developing something and then we push it out on people to try to get them to try it so we say here try many product we do let's say a product hunt or hackathon and we try to get people to try and keep it or try it and most the times people don't use it all right and and the reason why is because we're pushing the product at them rather than getting them to pull it from us and the only way to get pole is to actually talk to people and have them be part of the solution from the very beginning so it's identifying the problem and the building kind of the solution to the problem based on what the end user wants whether it's a consumer or developer figuring out very specifically how to solve their problem not our idea of what their problem is and then getting them to want that solutions are bad and be part of building above us are bad that they're actually pulling it from us and saying you know please use your product if you're doing user interviews or you're talking to say people who might be users of your product one of the best early indications is when you're describing the potential product to them and they say when can I use it or can you let me know when I can try it that's a little bit of pull and then when you give it to them and they say does it do this and then you say well tell me why you want to do that and they start explained their use case then you're getting pulled then you're getting them to build a product for you rather than you just pushing the product on them and then the summary of all this and we're getting is showing some some products is to way looked about is great UX is basically product that solves a real pain point to help people get unstuck so you have identified something where the product we've developed has a pain point that is not just something that's in our head but something we validated in the community is validate with real potential users we understand what that pain is they've helped us to understand it and develop it and that when we build this thing for them they're so excited for they pull it from us because it helps them get unstuck and helps them do better when they're able to before or another way to put it before I show you is that everyone has to switch from something so you think that when someone uses your product they are inherently switching permanent some other product or they're switching from say complacency or doing nothing but they're switching from something they were a finite amount of time the people have in their day that they have to take some of that time and give it to you and you're trying to figure out what is it that you're building that's going to say okay I'm gonna spend more of my time in your product and what I was using before because it helps me you know get unstuck and solves a need that I have so the last thing is you know you've hit great UX is when you've kind of delivered these Wow moments that you have a product where people you know they're opening up the box and they put it in their ears and they tap the button and say wow this thing just works I didn't have to connect anything it just simply works or I see I talked to my Alexa and asked her what's the weather today and wow it's like it you should tell you something that you didn't expect that that it's possible at this you know a I machine couldn't could no it's that there's wow moments of kind of unexpected delight that also give you that convenience to help you get your job done get a better faster easier so today I want to show you some examples through the pepper app of how we build some crypto UX and the point here is not to do an advertisement for Peppa Peppa pose an app that we launched at DEFCON about four weeks ago I guess three weeks ago and the idea here is to show that the types of things that are possible when you talk to users and you think through the experience first and then the technology second so one of the hallmarks of like how we built our company the last four years is we've always started with the user problem and the your conversation and then said okay therefore what technology stack do we build or what technology decisions or an architecture standpoint do we take but we always start with the user problem first so when the first thing I'm going to show you is the onboarding to the pebble app and so the best way to show it is if everyone here just downloads the peple have so it's live in the App Store and on Google Play and you can be logged in to the app create your own wallet with a noncustodial wallet with a six digit PIN recovery in less than 30 seconds so if you have an iPhone or an Android this is the interactive part of the workshop you just search for Peppo don't worry you're not giving us any information here sarah pepperidge whenever an experience I'll walk through it but everyone just the spirits the onboarding experience inside the app so while you're doing that I'll show you how people are using Peppo and so this is from DEFCON 5 [Music] so we built an app to showcase the wallet SDK that we developed that enables you to embed in a theory and wallet seamlessly into any application and from the very beginning we said we want to show that we can create an experience where it's adapt that feels like an app and really for people not even to even know that it's adapt if they don't want to and in order to do so we took several design decisions that then resulted in technology architecture decisions and showing you this so as you're thinking through things we're not saying you know build this we're saying you know think through these things as you're building your apps we've had you know some some great you know kind of you know early users who kind of said things like Simona from bounties that's the first day that feels like gonna happen we had decrypt to kind of you said that this app shows that blockchain is actually ready for primetime but ultimately it's the users that matter most and the the key decisions that we took with the app well actually the purpose the app so the app is 30 second video updates from people who creating really interesting things in crypto and so it's developers makers designers enthusiasts just talking about what they're working on providing updates and then we have a crypto component which I'll show you in a second is that while you're using the app there's an embedded wallet you can tap on a ACA reinvented like button and every time you tap the like button transfer the tokens seamlessly from you the other person you can also ten send people to opens directly personal person and the tokens are used for curation they're used for personalization using them soon for bond curves other things I'll show you how this all works but first how many of you have gone through the onboarding one two three four five school so the first thing when the onboarding is we took a decision to have the initial onboarding the initial signup be through Twitter and in the future will enable other ways people to connect but Twitter was basically we built an app for the cryptic community and we talked to them and where's the place where crypt of people hang out the most on Twitter so rather than forcing them to do something everyone to do some different we took the decision based on the community so it will be very easy for people to log in with Twitter the second thing is we wanted to make that claiming of a wallet to be as simple as possible without people really feeling have to think twice Oh what is this signing up for so if you look at the screen here the first thing we did is we give people a welcome gift so they claim the wallet and then we give them basically six digit PIN is all you need in order to secure wallet with recovery from smart contract if you have questions on how we do the six digit PIN recovered from our contract we get into it and then the next thing so when you set up your wallet you we put a private key on your device and then we put another key other keys in your device which are session keys which are interact with an Oso safe multi-sig and the session keys are able to execute small value transactions for you or basically basic instructed to you by your by your key up to a certain limit to for a certain period of time and this is a really key innovation because it enables is that the user doesn't have to manually sign every transaction they don't have to open up another browser or go to another app or use a meta mask or something they can just tap the like button and it instantly transfers a token Ben you a talk for a second about the elements here um and I was supposed to use this even though yeah so also just because this is a hackathon I'm just repeating the main point so we want to find great UX innovations and we're not putting any technological constraints so you don't have to use our stack but our stack is fully available so we built Peppo with the full open source stack that you can find and i'll point you to to those places as well so there's a wallet SDK for iOS and Android and it does all this key management that we were describing here right so it deploys ignosi safe multi-sig a session contract we're like a IP 1077 for like the session key meta transactions the wallet recovery module to do gnosis all those things are handled by the sdk you just have to integrate it but still it's a hackathon so you can probably build a full app so that's why we're not putting any like technological requirements here but then under session keys yeah like it's another point is that we don't want the user to pay for gas right so that also allows us to spend the tokens whereas people just pays for the gas why we're also able to pay for the gases because all these contracts run on layer 2 on top of it theorem which makes it a lot cheaper for us to like fund the gas or the deployment of the gnosis safe contracts etc we can do this at scale because it's reduced costs I'll go into like where you can find all that stuff later so if you look at the experience we're showing up here right now the user is browsing through the app like any other say web to experience then they tap the P button here the inverted heart and is transferring your token from one person to the other just by tapping the button you there's me you can click on someone's profile as well and from their profile you can click the P their button button there and you can send any amount you want so base you can price it in dollars or you can price it in the in the token within the app and there's a price Oracle that converts it you see the transaction happens in milliseconds were you saying basically optimistic UI we basically once we have enough information in our side to know that the transaction is likely to pass we basically execute the transaction and then we only would alert the user afterwards that the transaction happen to fail so the user has enter wait but we have 18 seconds or 5 seconds or 3 seconds for block confirmations where immediately once we have the first signal from the backend of the transaction should pass we're then basically processing the transaction on the behalf of the user and this is another one those elements where you create that I said those wow moments whereas anyone who's ever you know used crypto and is used to waiting and waiting and waiting the first time we see them to kind of do this they go wow alright and they say this is really really fast and but yet it's still on a blockchain it's a public blockchain where all the transactions can be are being been finalized so the crypto as I said is being used for a number of things within the app so it's the another thing that gets to like you know solving an actual pain point or use case for the user it's not just about having a wallet it's actually having crypto make the app experience better and more engaging for users so in this case every time you are tapping the P button to send some tokens it's actually helping train the algorithms and personalization and I'll security content for other people so it's creating more signals and less noise to be able to get people more relevance and then as I said we're adding over the next few weeks ways to be able to use tokens for things like messaging to be able to say how much you want to pay to have some s to pay in order message you whatever to videos and as well for people to share in the rewards from content getting popular as well so if I support an article or some content or a topic and that lets say it goes viral that it's not just the original poster but they haven't won any support so you can also earn from from that so and then another part of the UI is actually making the whole thing usable and part of making it usable is we took the approach of creating an app that is first regulatory compliance so it's basically regulatory and FinCEN compliance so it doesn't require money transmission licenses in the current format and then the next step was getting it approved by Apple and Google and it's actually the first crypto power app that's approved by Apple in the App Store and it has in-app purchase you can top up your tokens using your Apple pay in the app as well as we've worked on a very creative solution for cash out so people can take their tokens in the app they can convert them to stable tokens called we call them unicorns because it's part of our community and and then once you buy your unicorns you can then actually cash out your unicorns today it's for a variety of you go pepero comstor variety of gift cards so our use of research again we talk to users and they told us that anything under 200 bucks a gift card is just the same as cash and if they can get an Amazon gift card they care about that just as much as say getting Fiat in their bank account and if they get actually two hundred dollars let's say or $100 Amazon gift card they'd much rather have that then say you know pay a 10% transaction fee if gonna go over five percent reduction for your lose our loss and going to Fiat so this was again following the users and giving a user centric solution but also one that actually works with the app stores and so is regulatory and FinCEN compliance and provides user value so and then all this actually is on a nizam blockchain and so the what we're showing here is the we provide a wallet SDK that anyone can build their own pepper with and maybe been you want to talk through some of the particulars here maybe not I mean we're definitely available for any of the questions you might have but basically the thinking is that you have an identity contract which is the multi-sig so for any device you have you have one public address in and a multi six so it's one out of n if you you can scan with a QR code and add multiple devices and it will just then add the device keys of the other devices in the same multi-state contract and then there's sort of an interaction contract to interact with with the paper coins and that deals with the session keys right so so we already talked about this if you're interested in how you can do this like add layer two then also just come talk to but it's a different talk but maybe I would like maybe a moment where I can go to yeah yeah so we if you do want to like try out this or after the hackathon so if you want to run against Robson then you can go to platform to OSC calm and you can like just click register now you register and it basically walks you through to like setting up the whole token so you can get started very quickly so it will deploy a token contract on Robson the necessary contracts for the layer to scaling set up your user contracts for on the layer two side and then you can just start integrating the the SDK and there's also server-side API for like orchestrating users and so then then then secondly like we've taken some effort to also describe cool so it links to deaf OST comm where we sort of describe how we taught and why the design choices that we made for like this SDK right so so the idea is really to try to make web to applications that that that function on a blockchain or give you access to applications then the SDKs are all open source and a few so there is an iOS one and Android one and react native one for iOS and Android you will find that there is a demo application which has like these pep popcorn tokens so it's a full app you can like fork play around with for iOS or Android but again like I think for a hackathon this is two biggest cope so it's the next slide yeah so so specifically well what we really want to achieve here is just as a community and contributing to this right is how do we get crypto into hands of people that don't know anything about crypto and how do we get them to use it so that they can start transitioning over and so I think when when the reason we're right now mobile only is because with the SDK we can use a secure Enclave on Android and an apple to like manage these keys properly the biggest problem and the biggest challenge is like how do you do a web wallet properly so we've last year introduced this idea of a burner wallet that it's ok to store a private key in local storage but it's a lie it's a high liability environment and so I would love to see any push and ideas and innovation of how do you either do some hybrid form of having a web wallet experience that you secure with a mobile experience or maybe use smart contracts to backup this web wallet or there's an initial point where the user can start on a web wallet experience but then terminate from you know like persists probably that better like with by now having some money in it and deploying contracts and making that a proper web wallet experience or persistent one so so that's really something that I think would be awesome to see and so I suggested some things that are potentially interesting so there's a burner wallet there's also a project that I like a lot Hedgehog that audio start code they currently don't really allow you to deal with a lot of value but they are very nice with setting up like a username and password for initial entropy and recovering that entropy meta mask has now these plugins or snaps or that you can also play around with and and maybe like integrate code so that the web wallet experience becomes better maybe there's a session key in the web wallet and I just under the hood talks to me the mask the whole time to sign the safe nose to safe guys they have an extensible architecture where you can write modules for safe contracts so like basically anything go crazy but this is what I would love to see and we'll we're happy to give you like money for it if you come up with good ideas of how we can push like the web wallet experience forward web only or web like hybrid with a mobile logging in or backing up that would be awesome to see so we do have a submission form for the UX prize any project can submit to it but we do ask you to submit the form so we can hear about what problem you're trying to solve and how your team went about trying to solve it so it's not about the code you submit it's also about the explanation of the user problem and going back to the designing crypto experiences for humans so that's it any questions for anyone yes yep so right now I like I was sort of saying only on mobile so they're the ownership keys of the multisig right they're stored on a secure Enclave and you can only access them with six-digit pin or the biometrics the SDK can get it out of the secure Enclave no yeah it's definitely like so so also we feel very much then like there's we need to build for the future right like no offense but like a custodial solution isn't the one that's going to work for seven billion people so just forget about like if you come up so maybe there are some requirements if you build some custodial form solution I'm probably not going to give you I'm gonna work so every user of the pepper app the first thing you do is secure your own wallet you're putting a private key in your device right then and we don't have any access to these responds at all yeah I mean it's encrypted in the secure Enclave on the client side right but the session keys for example they're less securely encrypted on the client side yeah I mean should be everywhere on etsy.com if you don't find it then like the episode or comments like super-high level for like integrating the SDK but like let's talk afterwards so yeah so so there's two points to speeding up the transaction speed right so first of all the layer two solution the way we were able to extend the EVM is because we run an again a canonical BFT so like a supermajority vote on the smart contract side on top of layer one etherium so the side chain gets finalized and then aetherium has a higher level of committing what has fine finalized the way we get to the sub second confirmation time is because it's not so much the block confirmation data transaction got accepted into a block it's whether is this transaction valid and given everything that I know about like the mempool will this likely succeed or not and so that's what we also as a relay err evaluate when you use the SDK we take the transaction first of all like is it validly signed sure but then do we see anything that will have you not be able to have the budget so we do pessimistic caching we just like calculate the worst case scenario for everything that we've seen now will this transaction still succeed yes or no and so if that would still succeed then we're already on the connection to the web wallet say like yeah this will succeed because but like 99.99% into some history of the chain because as a user I don't care in which block it gets I care that it will get into a block and so as if we feel that we're like 99% sure that it will succeed we'll be sure to push it into a block like it spreads over the network anyway so it will get included okay I think our times up do one last two peple of everyone so thanks everyone for coming out for the signing crypto experiences with humans and good luck with your hacks and we'll see you on cup of cheers everyone