Improving Ethereum DApp UX: Insights from a Seasoned Web3 Designer | YoungHwi Cho | ETHTaipei 2023

foreign hello everyone um my name is co-founder and designer of hunt town I actually prepared my Chinese introductions just right before but I completely forgot but I may try um uh thank you yeah I guess today you guys all like you know here for kind of technical uh back technical content about all the GK Roll-Ups and then or the device section it was like a full of technical specs uh my session is the probably the only user experience matter I'm not sure how many ux designers there or product designers or any designer types of designers there one two three just three yeah developers any types of Developers okay uh project Founders or marketers it's really actually good competition like we can just just like launch a hackathon here now like we can Team off um so I actually uh been in this industry as a product designer over uh so far almost eight years and then before that also I have about four years of uh like a web 2 product design so in total like almost 12 years of Designing and then yeah I was like in the beginning in the junior level it was terrible designer and then after I launched the launcher more and more I kind of have lots of lessons learned so today I'm gonna share about my lesson learned with you uh probably my methodology maybe not be the correct answer but you can actually have some into your product um before I joined web3 I actually started from web 2 product like a kind of social application called bark this was kind of actually funny app like and everyone can become a dog character and then they can bark each other within 1K like anonymously it's kind of like a metaverse right and surprisingly it's like more than 10 years ago but they're still users using it even in Taiwan I found a couple of users here uh yeah it was a really funny app and then after that uh how many people still remembers team blockchain here nobody Jesus in back to 2017 there was a blockchain called steam there was one of the actually most top 10 famous blockchain it was like a social types of blockchain and I was fascinated by that Vision so we certainly jumped into web 3 and then we made uh steamhunt.com which was like a kind of wealthy product hunt on top of steam blockchain and then uh at back then back then 2018 it became world's seventh largest yeah but at some point or because of Steam blockchain not my glory and then after this uh I suddenly come up with like some protocol Design This is my first ever awesome ethereum protocol design called never lose that money or like uh as a kind of personal Trader I'm actually a terrible Trader like uh whenever I buy something and then my friends like a really freaking out like oh my God project seven purchased something this is like a top and then yeah it was top and then it's sliding down and whenever I buy something and then my whenever I sell something and then my friends really like uh like a exciting oh my God this is a really good time to get in and then yeah it was like a bottom point so for people like me I had to just hold it for a long time right so that's why I made this like this is like uh when you put like when I put my five ethereum for over 10 years lock up condition and then if I break my O then I have to pay 10 penalty and the penalty goes to another holders like as a bonus so that yeah obviously I don't want to share my precious ethereum to other people so so you know this is like a really good method like a protocol to make users holder for a long time and after that I suddenly started to have lots of interest in the more like a front-end users like a people like me who cannot do code I can do a little code but it's not a production ever and also uh for the normal people who kind of jumping into referee so I made mint stock club which is like a bonding curve base the token launching platform uh like you know when you launch your token it's like a more difficult part is to make the stable the kitty pool right oh and it takes a lot of money but by using bonding curve weight then you don't need to create your physical liquid because the bonding corporates the single automated liquidity report so you just focus on your token consumption uh after that I also launched dixell club.com which is also no code non-fungible token launching platform even without any design efforts so this one actually become quite popular in Korea lots of lots of artists and a lot of people actually use this for their membership nft or they're like a Dao in a community down things and then the event tickets and after that oh my God I becoming like a tired because like I keep launching launch and launching what if we make some Community to make all the website builders in one place to help each other to make something together not just by alone so I made on to that town just like over three guilders built we have three Builders Guild uh so yeah as you can see I actually designed more than dozens of products per year including the product not launching uh so obviously over the eight years I have a lot of lessons and I bring here uh just eight the most important lessons I can have and also I think this lessons also can be applied for non designers especially uh developers you guys really should know this because you you you're coding and then maybe you're quoting will affect rejected to designer because designer mostly does not know about the technical background so they're gonna just like uh whatever they do like their developers as you do they just design it so that's how it happened in this world so you guys should also know about this lesson learned all right my first the most important part of my design principle is that the not just for GS designers everyone especially the developer they really should know your targets very very deeply or especially for designers actually because I don't know why but designers tend to first of all not to know much about the technical background of the product and also not users because they uh maybe we can see how they become designer or usually they go to the design school which is really fancy and then they kind of are trained to become like a executive craftsmanship like you know like an artist they learn a lot about design skills and art and then they work for as a designer and then they went to like a web free design and then this is what happened like this kind of pressure to sell not design something whenever they design something and then they people challenge their guy or people are not using it people are not putting the money into it also you guys have to focus salesman so which is kind of kind of frustrating for for designers but which is really important actually designers must know the users extremely deeper deeper way like like uh if you're doing D5 uh project then you should be a decent by yourself like me I mean involuntarily I became a designer like uh when I'm launching the nevertheless the money before that yeah I put a lot of them like not a lot on my own money into lots of different like at stake in the department protocol and then some things got rocked uh you know and scammed and then uh just like a you know profiting down and then I became inventory design but once I become decent I could I could start to understand like what points making them like a happy or meaningful or frustrating so those part is really important for designer to understand so yeah understand your users deeply is the most important rule but rule number two and many many people actually are confused about this concept making something simple is not getting rid of really really many people actually confused about this Concepts so for example I found that this hilarious photo on the internet like some professors are office and then it looks really really messy right so I want to like how how even does he can find something here from right uh so some students are really wanted to have his work right so he cleans up everything like this ah and then yeah obviously the professor of Memphis must be super angry like even he could not find something here you know it's because it's not his way or so this is the key Point making simple is not getting rid of uh making simple is making it clearer for the users confusion is the is always the terrible thing but complex matter is not terrible thing and then as a designer Ural is to make complex thing to be ordered so that not to be confused that's the key so for example uh whenever you go for some designer session in the web3 and then you know as a terrible examples of ux they always talk about this you know why because they don't know what it is they don't know what it is and then all the interfaces are too complicated for them so they think that oh this is too difficult for the normal users we have to change it so they're kind of slashing trying to down and then making more modern fancy design like an apple Google things that would be failed because curve has their own design purposes for their targeted users because this is more ordered like a very not to confuse their users this is the key uh also many designers designers or text blur uh personally I love blurs interfaces but they attack a lot because as a NFC collector there are too many interfaces in the one pages and it's really hard to find something that they have to interpret but this is also targeted only for the pro uh Trader for nft especially the blur token farmer so yeah the key is that do not try to get rid of something to make it simple that's not the key always always try to be make a clearer for your users so that you can reduce their confusion that's the simplification simplification okay rule number three um also for me I really hate multitasking whenever I do the multitask and then my brain froze oh it's not like a computer right but most of the users are really does not want to multitask but for some reason it's not the website product has a lot of multi tasks in one Pages for example uh uh synthetics teams here probably not right like they're uh yeah obviously their protocol is targeting for very high-end users right but still whenever you try to along with their website or their app or everything like he's like this side like a there's something different task here and then they always talk about another Concept in the below or the side they always try to kind of make it simpler or I mean by their way but it's actually more confusing because they request me to understand both Concepts at one page uh I love the idx because yeah I got air jobs there's generous but uh devices looks very clean right it looks kind of actually very beautifully designed but the most annoying part is that whenever I try to do something they always that there's some popping up there and then those pop-up notifications is something not related to what I'm doing uh that's really annoying sometimes because uh sometimes there's a very important pop-up notification there and I was doing something and I had to catch up that at the same time this is multitasking so as a designer it is important that uh try to separate the one test in a one Pages this is really important um the rule number four is actually related to the wallet interactions because uh back to 2017 actually most of the DF was like this when you access the webpage they certainly show up the wallet connection of like just automatically powered up and if you don't connect your wallet even they did not display any data uh back that time it was actually quite difficult uh if you don't connect your wallet and you cannot actually call the data from the blockchain but now there are lots of solutions like AHS for them like I'm sure you can use that uh but still there are many many uh DFS like a suddenly uh like a user is trying to just uh like uh scroll down and then they keep annoying them by unrespectedly hit from the metamask or wallet connections so as a developer actually you really should not uh put this like that you have to wait the users until the point of the sign up or do trying to do something then you have to put this not in the beginning this is kind of nowadays this is kind of really lazy things to do another thing the signature request that's the really really annoying thing for normal users because for example this is openc uh open C uh in openc you can just connect your wallet and then you're just like yeah exporting your page and then blah blah blah and when you access some page like a create the nft or something like that so that uh like a some interface that have to be interact with the centralized server right then they suddenly pop up this signature request and it's really scaring messages uh most of the users just click the sign probably but this is terrible uh ux uh so so how can we improve this actually coinbase probably uh uh uh study a lot about these kind of small matters uh so when they uh so when you go to the nft.coinbase.com they actually put a Rolex oh where is it always on the is this behind that there is a button they don't say button like a connect they say sign up actually or so when you click sign up and then yeah you connect the wallet and right after you connect the wallet they just pop up the signature because right away so even though the user may not interact with your centralized server they still get this request maybe there's a pros and cons because it's too much but in in terms of the user experiences this is better because they don't need to be confused they don't need to be unexpectedly hit by that uh this is my project hunt down there is a some page that you have you have to verify your membership nft or to use our services uh so then sometimes you can just tell them what's gonna happen so we just say that okay first one you connect the wallet and then you have to sign the message which is simple sometimes you need to separate them but by telling them so that they can expect their interactions okay rule uh number five and many designers love to be challenged uh like a creative way so they really try to make it very beautiful always like it makes 3D facts or something like that to kind of torture developers uh to make it but in my point of view visualization supposed to be used only for reducing cognitive loads of the users not for pleasing them so for example uh is there anyone who used terrion wallet Tyrion just one oh interesting too uh I personally really love tyrion's uh Tyrion Wallace design because they do this they do not use visual part uh for just like you know pleasing look they do to reduce my way of using brain so for example when you see usually wallet uh history uh they're just dumping into the table view in general and in table view even they don't classify which generation is for which generation is for like you know they're just dumping in the table by the hierarchical order right jerion does not do that they design in a pathway so you don't need to uh you don't need to like analyze those data you can just like a following their path and then even they classify each each transaction so you don't need to like deeply look inside you just like oh this was my the ticket minting transition oh there is my it's really easy to look over so this is like a very designed for cognitive ease which is the key part um this is there another product I just brought up because the uh there are there are crew three dot XYZ and then there are uh there are loads of quests in the one pages that they maybe think a lot about how to minimize their brain usage right so they found out this way so they classify the different color and then use the icon to tell user that the okay this Quest is not unlockable for you at the moment but you can do this first and then come to this one but I don't need to read those docs because those color and classification is really clear for me to think in that way um okay rule number six actually I kind of a little bit speeding off because I want to actually have discussion after my uh presentation I love to have some q a and then discussions so I'm kind of speeding up so please understand that um ux design actually does not just for apps and web but for some reason many designers uh really hate to do something other than ask them web website design um I think this is because of the design schools design schools just train them to make something like an artistic way or like a product and they some sometimes this like a defined product just for the website application those software things but especially in web 3 that's not at all um so I asked Chester PD so what is the web3 designer Webster us designers adopt description even touch the body says that like everything about like product design or which is like a website a mobile app or their user flow and interfaces none of them try to think about the other part of the app and web but in Webster it's really important for you to design other side of the part of your product so for example so yeah this left side is the hunt Town's website uh so this is not just splash Pages because there are lots of functions it's directly connected to Discord so I had to organize the Discord API uh uh to to Splash in in a very nice way and I put a lot of effort on actually designing and Discord experiences and maybe some designer may ask what can you design Discord because this code is just itself right now I cannot even change the color in the background right I'm not talking about visual thing what you need to do as a designer you have to think about your users onboarding your endpoint so when you go to Discord and then when they see first channel you have to design it and then after they hit that and then they go to another channel right or you have to design the land The Landing thing and then once the user landed at some point then probably add other users have to interact with the person right you have to design that too so actually ux designer is like a more like a captain of willing your product entirely because you have to connect all your endpoint of the product you know one unified thing so you should know also about that area not just for the ads and web design we are almost there rule number seven uh lucky number yeah I didn't understand that too sorry um the users actually I know not just user human brain is not really perfect so when when they use something they cannot remember entire experiences they only remember one most memorable pick positive pick or a negative pick and then they also forget everything and then just remember the end point so memorable pick end point then you have to see it that moment in your design so for example oh yeah this is just about the peak and Rule you got refs you got left in my opinion is really like a specialist for that or actually it's not one minute left uh it's just 22 minutes I have 30 minutes right yeah okay oh he she said that one minute left oh you got left I think in the yoga left uh there's a pro designer who always think about this so they actually put very memorable moments over your design flow especially dookie Labs I mean many people think that the Lucas game was very well designed but I personally I really fascinated how they onboard the user and then give the airdropic the douche test pass and then bring to them to the game and then feeding the other you just jumping on your competition and then make the memorable pick which is the key uh so their user flow is kind of the kind of movie and then there's always like a hit point um it never lose the money uh one of my products so there is also a memorable pick in that so for example this is my screen so I hope I'm holding five ethereum uh for 10 years since uh this 2020 December 16th and then I tried to let them know how much your gain who's gaining from your whole point at the moment but still you have a you have this much left so this gives you lots of thought so making your brain work for the memorable or making them feel something which is important because then they can remember the moment and more tricky part is that you also have to think that the is this like a first visit or second visit to retaining users and then even third visit one month's retaining users their memorable pick can be different because once you have more memorable pick than the previous memory pick will be just forgettable so you also think of a kind of more complete way okay the last rule that I actually learned is that the uh all your design efforts should pleasing for on the laziest users level not the smart and not not smart I don't like the word like a more diligent users like they they love to use their brain like it turns to be like many developers actually like to do that like they love to dig out the product right but the most normal people They don't want to use their their brain power to consume something so whenever you design something then it's really important to set your level to the most latest user so for example uh I wrote a kind of interesting uh POA and ft website actually this is one of my products also Dixit Club you can uh free to get it it's just a free meeting of course and I'm not gonna scam you this is for experiences purposes uh when I designed this product the circle is targeting most uh end users very common user even who doesn't know about network connection and the gas fee concept those kind of things so what we designed is that first of all this is a bipoli contain and then probably the first user who has the wallet and there's the ethereum is the main Network right then they have to change the network so once you connect your wallet and then we detect the network and then we just add polygon Network right away by clicking the button and then change it and then after that we check their balances and then if the wallet is a new user and there has no magic balance that we send very small amount of metric automatically so that the user does not even understand what the what the heck is the Gatsby things so yeah just experience the user experiences that I designed and then I think this is really important to uh put your level into latest latest user uh so this is my humble eight lessons if anyone wants to just take a picture you are free to do that oh and I think that even developers also should know about these eight things because it's really beneficial for you to cool something and then you think about these eight design rules okay um my last message that I want to say is that the not just project designers if if you're a Founder you should be a Storyteller you should be really Storyteller not a visual teller visual teller is not good storytelling is always the best because that makes your users very impressed and then they stir their knees um tonight I have a fun Side Event actually I organizing called Avengers because I'm here alone I'm not with my team so I had to do something fun side events so what I organize is that the we just gather a team and then hopping around the side events together and then after the Side Event we're gonna just go to bar hopping near there and then I'm gonna pay all the drinks and beer for the night so yeah if you're interested in you can just sign up this one all right thank you so much uh do you have any question please ask any question after this thank you [Applause] um due to the time limits we can accept one question is anyone yeah into the budget space because this is a we need to learn to decide a better adapt to onboarder users hey hello uh I want to ask that from your perspective like compared to web 2 development and web 3 development what do you think is the key difference in or like this kind of stuff yeah um this is a really good question because uh actually the biggest difference this is not about like our own change direction or blockchain interaction thing is about the uh the the total population of the user you can test out so in if you're in the web too usually you follow the design process traditional way so you do some user interview and then find out the glitch part and then do lots of better tests the A B test you know there's lots of methodology right that cannot be applied to the web3 because there are no users that much even the the the whole total users who has uh at least 0.

01 ethereum in the world is just 21 million addresses uh 21 million in the world so even you cannot think about a B test in the web3 design so that's why uh it's really hard to find out which interface is going to work for this Target because you don't have any method traditional methodologist I think this is the key differences between web 2 and okay so you have to develop your own methodologies not the traditional way of design process in this wonderful talk thanks again thank you thank you foreign