Principles for web3 product design | Ben Scharfstein (Co-founder & CEO, Stelo)

Transcript

[Music] thank you welcome to my talk thank you for having me here this talk is on designing for decentralization principles for Designing web 3 products there's this iconic Steve Jobs quote that you may have heard design is not just what it looks like and feels like design is how it works repeat that the design is not just what it looks like and feels like the design is how it works and this is the most important thing that we need to understand when we're designing so we need to make products

that work and as all of us know building in web 3 A lot of times the products don't just work but I'll give you an example of a product that really does just work now this is uniswap I would say one of the best designed products in web3 it just works I swap my tokens and it takes care of the rest the design is how it works and uni swap just works in this talk I'll be giving advice for web3 Builders on how to build products that just work generally but also specifically for all the nuances of building on top of web 3.

this talk is for designers it's for Founders it's for product managers and it's also for front-end engineers and back-end engineers and smart contract Engineers because when we look at that unit swap example the entire system is what made it work from the smart contracts to the front-end design really this talk is for Builders people that are building tools that end users enjoy a little bit of background on me I was a product manager at Google the founder of a YC backed social video chat company called room and now the co-founder and CEO of stello where we build tools to make web 3 safe and easy to understand and throughout my whole career my focus has been on building consumer

experiences that simplify complex technology and just work the agenda for this talk we're first going to start with three questions that you should be asking before you even get to building next we're going to cover six principles a web 3 user experience and I'll end with one hot take along the way there are kind of a high level three types of design and maybe there are even more but for our purposes there are three types of design there's product design and that's what the problem is who's the solution for there's interaction design how does it work what does it do and there's visual design how it looks and in this talk I'm going to cover the first two what I would call ux that's product design interaction design visual design how it

looks is very important you should build experiences that are great but it's not my area of expertise with the background in product before we even get to building we need to ask how we can tell what our success metric is before we get to designing we need to know what will it look like if we've actually built a great user experience and it's not this looks really nice and it's not this is fun to use you can tell if you've built a really great product if your usability interviews are incredibly boring and what I mean by that is you give someone the product and every question you ask them they're easily able to accomplish the task the product just works

before you start building the first question we need to ask is who are you even building the product for probably the most important question who are you building the product for I know there's a bunch of different ways to to slice this some people will think about the innovators and early adopters versus the laggards but another way of asking it is who is your customer in terms of their Persona could be students or teachers mobile native or desktop native bleeding edge or late adopters developers and users the reality is that it's not just one of these things it's an intersection of these things so it's useful to think about early adopters versus late adopters it's useful to think about is your user or the teacher or the student but it's even more useful to think about

this holistically the second question is what is the job to be done not the task that they're trying to do what is the job that they're looking to hire your product for there's this quote by Theodore Levitt and he says people don't want to buy a quarter inch drill they want a quarter inch hole so what is the thing that they're actually trying to do and the job that you're filling in their life in the context of some popular products people don't want to call a cab they want to get to a meeting people don't want to go on a date they want to find a partner but again if we take a step back you could replace Uber and Bumble with products that you would never even think of as competitors people want to go to a meeting and they can go on Zoom people want to find a

partner and they can use intramural sports so really answering the job to be done will help you think about the alternatives to your product even if they don't seem like they're doing exactly the same thing I'll give you an example of a product that I never used but my sisters did and that did a great job of answering the job to be done children don't want a doll they want a friend ape holders don't want a picture of a monkey they want a community they want status they want entertainment and you need to build your product in a way that solves this problem in their life and not the problem of how do you give them a picture but the question of how do you keep them entertained or make them feel part of a community the third question that you need to ask is what's the simplest way to accomplish

the job now I think that there is one dimension that people often think about products is powerful versus basic for example the basic version of uniswap would only allow you to swap for usdc and the powerful version allows you to make any swap you could imagine there's another dimension that we need to add here which is complex versus simple the basic version of uniswap and the powerful version of uniswap are actually just as simple they're both powerful simple tools one just has more functionality the common misconception is that there's a trade-off between complexity and simplicity across the

spectrum of powerful and basic but this isn't the case in fact the best tools are simple across the board both the best and worst products are incredibly simple and so when we're looking at this graph there's really one answer of where we want to be and that's powerful and simple the best products are powerful and simple and that's our North Star that's our metric that we're trying to accomplish is how can we build powerful and simple products here are some great examples of powerful and simple products Google I simply type in my question and I get an answer in Uber I press a single button and get a ride notion has a total tool set of powerful commands but it just starts with a single cursor and uniswap allows me to

swap any two tokens imaginable but it just has two simple inputs these are all powerful and yet simple products and so throughout this talk we're going to pull out a bunch of principles and this is the first one that's incredibly important for building great web3 products with great ux make complex things simple okay so great we want to make complex things simple we know that's great but what's special about web3 what's special about web3 is that in web 3 we want to decentralize all the things from our infrastructure to our front ends this is great this is really powerful but what does decentralization really mean decentralization in my words is protocols that can be accessed by

interoperable tools built and run by anyone and of course there's a lot more to decentralization but for our purposes decentralization is protocol that can be accessed by interoperable tools built and run by anyone okay so let's take a look at the web 3 stack you know we have on-ramps and wallets and dexes and marketplaces this is just one example of a user flow of someone that wants to buy and trade in nft and the amazing part about this is that a user can pick any path they can use moonpay with Argent and one inch and blur or they can pick one of a million other paths remember decentralization is protocols that can be accessed by interoperable tools built and run by anyone what this leads to is total user

control and choice and a ton of competition in the tools that we're using interoperable tools mean more user Choice lower costs for end users and for developers and also that MVPs can be much Slimmer if you want to build an nft Marketplace you don't also need to build Fiat on-ramps and wallets and a decks you just need to focus on how you're providing value but everything has a price as Saul would say everything has a price and the hardest part about web3 ux is that you don't control the entire user Journey think about like a hypothetical user journey and we'll do a case study of a hypothetical user Journey so the case study is you're building an nft powered game called monkey run now let's

understand our user Jen has been playing mobile games for 10 years and love seeing how high up on the leaderboard she can get the job to be done Jen wants to be part of the community of serious Gamers so running through this user Journey we're going to see a bunch of different steps from setting up a wallet to on-ramping Fiat transferring swapping purchasing joining and playing and we'll walk through the tools that Jen would use and we'll extract principles specific to web3 ux that we can take from it and lessons we can learn so the first step of course is setting up a wallet and that's a contentious term the term wallet but the reality is that people actually understand what a wallet

is my phone isn't just a phone it does so much more than that but at this point people understand what a wallet does and I may get black for this but I think you should just use terms that your users understand in the context of metamask they understand what a wallet is may not be the perfect term but it's good enough you don't need to reinvent the wheel so the next principle is use terms your users understand and for some of you building what I might call a wallet maybe wallet isn't the right term but for a web 3 native user it might be so figure out what that is for your users but use terms users understand okay cool the next step is we're going to have a seed phrase this used to be in really bad experience they would give you a seed phrase say write it down and

trust you to do the rest but metamask has evolved over time and realize that's a very difficult experience and they can make it easier on you while still accomplishing the same task and so they've done that I only need to enter in three different words here a lot easier and they verified that I wrote it down after that I'm gonna go to on-ramp via coinbase and they're going to set up two-step verification for me and in both of these steps the product was really hand holding me because they've realized that there's very difficult Parts where I could fall off the wagon so the next principle we're gonna pull from this is to not trust our users to do inconvenient things that we know will come to bite them down the line if they

don't do them whenever I set up a new wallet I never want to write down my seed phrase but I've lost enough seed phrases to know that I should but it's even better when the wall it forces me to do it I rarely set up two-factor unless I'm forced to but it's great that coinbase forces me to don't trust your users to inconvenient things if it's going to bite them down the line if they don't the next step is we're going to transfer from coinbase to our metamask we're going to swap that eth for rap teeth and then we're going to go purchase an nft and I want to call your attention to the red boxes in each of these screens that are highlighting the dollar amounts five years ago this wasn't the case but the ux has converged to a set of conventions that make the products easy to use and

when there are good conventions that a lot of people are adopting and you should understand you should use them as well because there's probably a good reason sometimes there isn't but there might be and if you can figure out that good reason and make it easier for your users the next principle don't reinvent the wheel okay moving on to the next step this is the metamask confirmation screen when I go to wrap my eth and this is quite a confusing screen I'm not exactly sure what I'm doing whether or not it's safe and this is where we're going to pull in my product stello which will interpret this and make it easy to understand you need to make sure you're presenting the right information for the user for the context that they're in

now there may be some users which need more information for example developers may need a lot more information about the transaction but in this case most users just need to know what's entering their wallet what's leaving their wallet and whether or not it's safe so the next principle is present the right information the next step is that Jen is going to join a Discord just to verify her assets and then she can go on to talking within her community and going back to the principle of understanding our users and what their job to be done is we know that Jen wants to be part of community of serious Gamers so if we just left her at the nft or we missed out on having her join a Discord we'd really be missing out on what the job to be done

is for Jen which is to be part of a community of serious Gamers so it's really important that we use all the tools at our disposal to build an experience and that's one of the really big benefits of web3 is that it is about community and about entire end-to-end experiences so the next principle is build an experience it's not enough to just build a tool you need to build an end-to-end experience even if that entire experience isn't on a tool that you've built it can be part of the user journey and the flow that you create okay cool and the last step and this is the easy one is to play a great game there's got to be a better way you know all of these fragmented tools they may

be an experience but they're not a great one and one of the most exciting developments that we've seen is the ability to take these interoperable tools and build them into more integrated experiences so here's an example on openc of integrating uniswap directly into the experience and additionally you can buy wrapped eth with a card so integrating the on-ramps as well the power of the modular components is that all of these tools can actually just be one experience I can set up with magic link on-ramp with moonpay swap with the unit stop SDK purchase with a white label openc experience and play the game all within the monkey run

experience I still only had to really focus on building the game but all of these other experiences can be integrated into one application through the power of modular components built on top of decentralized infrastructure remember make complex things simple if we can take all these experiences and put them into one that's taking a complex user journey and making it much more simple okay great you've launched the product but your job isn't done the job of building great products doesn't end at the launch you need to land it after launch you need to do three really important things you need to make sure you're measuring success and measuring the right things

you need to talk to your users and understand how you can make the experience better and you need to iterate and improve how do you actually do those things when you're measuring the right things make sure you're simplifying it down to the most important thing you can which is to measure the value that you're bringing to your users and you can do this by understanding the job to be done and the value that you're creating in their life so measure value to your users talk to your users and you do that not through building up an entire custom chat integration don't reinvent the wheel just meet your users where they are whether that's on Discord on Twitter or on Snapshot meet your users where they are and talk

to them and lastly iterate but don't inconvenience them one of the difficult things about building smart contracts is that there can be hard to upgrade but you should make sure that you plan an upgrade path in advance whether that's building an upgradable smart contract or making it so that you don't need to rely on hard coding in one specific contract address plan an upgrade path in advance and that probably shouldn't include your users having to go burn and mint a new nft okay taking a step back to what we learned today we have six principles for web3 ux the first is to make complex things simple the second is to use terms that your users understand

the third is don't trust your users to do inconvenient things don't reinvent the wheel build an experience and present them the right information if there's one thing that you can take away from this talk it's this slide make powerful and simple products make powerful and simple products okay I promised a hot take so I will give it despite the fact that this talk was about building great user experiences I will say this amazing ux won't make your product valuable but bad ux can make your product useless thank you [Applause]

[Music]