Onboarding People into Web3: How UX can Elevate your Product — ​Predrag Lapadatovic | Adria Studio

okay it's working um hello everyone uh my name is p and I'm a co-founder of a design studio called and I'm also a co-founder of a small uh web three design left World crypto design and today I'm here to talk about the user experience in web fre specifically tackling the problem of onboarding and how well executed onboarding can Elevate user experience and um also make more uh conversions so the core onboarding problems a lot of web3 products are facing is that uh the websites do not convert that's the first one the next one is that websites and products are not beginner friendly this is especially important for web to users that are are totally unfamiliar with web 3 potential users don't understand your product your product has no proper onboarding flow potential users don't know how to use your product and lastly your product is too complex to use in full capacity and before moving to the next slide I would like to address a common problem that is actually quite common and um is that the product doesn't look the same as it's presented on the website so just imagine like ordering something online and when you finally get it you get something totally different and this is happening on a daily basis um that the people are using screenshots from the design from figma on their websites but when the visitor clicks on the launch app button they get something totally different because the product is not developed uh entirely so my advice here no matter how far the development went use the accurate screenshots because otherwise you're essentially lying to your to your users and you don't want that so on the next slide we'll address the first three points here and I don't know if you like Reddit but I like Reddit a lot and there is this subreddit called that's CL me like and it's a great subred where you can learn a lot about very complex uh topics in baby language and um I don't say that we expect 5 year olds to use web free products but I strongly believe that we need to be able to explain uh what our product offers in very simple uh language so everyone even someone who is totally unfamiliar with web3 can understand what your product has to offer so just imagine you're not feeling that well right and you decided to visit the doctor and they diagnosed you with give me a second so they diagnosed you with viral ritis I think so at this point you're probably thinking that you got some kind of cancer or something while in reality you just catch a common cold so that's how Web Two users feel when they land on your web3 website because they are told toally unfamiliar with the webing go so the second problem is that there is a huge um disengagement from the web to users we are leaving so much on the table because they don't understand what we are offering therefore they just leave the site and the problem is the problem is that um web 3 isn't fully adopted and it's still developing but the same as web 2 overtook web one one day web 3 will overtake web to as well and I think we are doing such a bad job on teaching people how to actually um we're actually having doing a bad job teaching them about web three and doing even worse job on converting them from web 2 to web 3 and I think we should um work a bit more put a bit more focus on that because as mentioned we are leaving so much on the table and here on the bottom left there is a tiny I don't know how to call it perhaps line graph whatever so this is something I have up absolutely no proof of being accurate it's just my assumption based on my experience and um knowledge so this red color in there if you can even see it represents the web 3 ogs the blue color that represents the people that are actually uh have a good web three knowledge basic actually green represents the people with basic knowledge of web three people that may have their wallet maybe have a few transactions uh perhaps some nfds and know what wagi stands for and the gray color represents the people with zero knowledge about uh web three and once again I think that this gray area should be the main um point of focus in the future of uh web3 uh web sites and products so of course there there are a ton of solutions to these problems but we need to start start somewhere and I believe that some of these things on the right are perfect to begin with so to begin with use Simple language wherever actually whenever possible avoid technical jargon unless necessary use fqs and loeries to answer to the most common questions and actually you can explain this complicated terms and jargon in the glossery itself and lastly use infographics and diagrams to explain uh complex um complex um processes in simple terms using simple graphics and language everyone can understand because just think for a moment if someone who is totly we three uh Noob uh lands on your website and reads all these web3 lingo they will definitely not move forward and check your app and we actually want that because at some point we want this graph to be all if not red then at least um blue because right now in 2024 this graph is full of blue for web to if not even R so that's the that's tomorrow that's the future and we should uh work on it okay so let's assume uh that they actually decided to give your product too and click on that um Connect app connect wallet pardon or um launch app button the one thing that you should uh remember here is that you still haven't convinc them uh to use your product uh you only made uh one step and it's a very good step you made them to actually click that button but you still need to do a lot more to actually convert them from just someone who are you know looking around uh to actual users so the situation that is happening every day is that people even after clicking that button that launches the app uh the first thing that they get when they launch the app are a ton of features a ton of cards a ton of buttons a ton of numbers a ton of inputs a ton of uh freaky words that who knows what mean and that's when they are probably just staring at their screen thinking what app this is and why why am why am I even here and how to actually use this thing and the problem is that you have in most cases only one chance to convert uh this person from visitor to user and if you don't have a proper onboarding flow uh you'll probably never hear from this user again because you lost that forever so before moving to the solutions I would like like you to remember one one of the golden rules of ux and that is that each process should have as little steps as possible so if something can be done in two clicks do not ask from the uh users or visitors whatever to make them so potential solutions for these uh problems are well to begin with to do the very same as we mentioned on the the previous slide make sure you have you use the language that everyone can understand the next one is incorporate guided tutorials this can be this stepbystep tutorials like these popups on screens like explain uh your most important features and navigate them to the UI explaining how they should go from the point a to the point B uh in the most convenient way next is to use tool tips progress indicators check boxes whatever and these are all Native old web two components nothing new noty but by using them we can ensure that we are giving um providing actually better understanding uh to the uh visitors because by using tool tips we can explain them a complex terminology or um or perhaps how some feature Works uh by just and they just actually need to hover some specific element to get that information because obviously you cannot put all the text uh on one page and progress indicators and check boxes things like that are great for um letting them know where they are uh in the process so let's imagine that some kind of flow uh has uh let's say five um different steps in some kind of model it would be it would be great for you to let them know that they are on step three so they know that uh they only have uh two steps uh left until the end because it happened a lot I I'm not sure which one but one of the most popular um form Builders perhaps tally or t form I'm not sure so they're actually asking you do you want to show the progress indicator on the bottom and I don't even know why is this a question because by using progress indicators user can uh actually know how much they have left so I remember that one time I it took me like 30 minutes to complete uh a wait list uh form because they asked me a ton of questions and only knew that I need to like populate 30 inputs and 200 check boxes I would never do it so um next is to ensure ensure clear feedback so whenever user um does any action when the action ends you need to provide them with the feedback no matter if it's good or bad you always need to tell them uh how the action completed okay uh if it's good you need to tell them that the action was successful and to provide them any links or information that may be relevant uh to that action and if the action failed if something went wrong it would be great if you can provide some guidance on how that issue can be resolved so they can do it again and uh complete it successfully and lastly it's a great thing if you could offer demo environments so people can play around uh test um your features and product without uh being worried that they'll mess up their assets or whatever so if we completed all these steps successfully I think that now we can finally call these people or visitors or potential users the actual users now we just need to ensure that we give an extra push and ensure that they stay our users long term and they don't leave uh after after a few days or months so of course there's a ton of ways to do this so here are just a few ways how can what you can do actually to to ensure to give your best that this is going to be the case so first is to provide the tailor experience and the first thing is beginner friendly application or maybe the better term is simplified version of the app and I think that binance is doing something something like this they have like this uh complex application uh with a ton of features but if you click that tiny button in navigation they will switch your UI to the simplified versions uh version because there are two use cases for this first you again need to be aware that they there are a lot of uh not necessarily NS but people that have very little knowledge about web 3D and they will only get confused and discouraged to use your product if uh they have to face all of these features right and the second use cases sure maybe I know a lot about uh web 3 but I don't care about your offensive features I just want the core the most important features and that's good enough for me so just don't show me anything else the next thing is you can train AI to learn about the user Behavior you can also use uh screen monitoring tools such as fot jar to uh essentially learn about the user anticipate their actions and make better ux decisions in the future next is educational content and this is just something that goes on top of FAQ and glossery uh so to begin with documents uh actually docs uh are great but if you can even provide a videos uh that's even better because people are uh visual creatures and we like to to see everything right in the um image and video form and lastly um I think that no no product no serious product should operate without uh the support today we have that let's say lack that we can train AI to uh handle the most common problems but also we should have a human dedicated support uh to to to to be there to to handle the most complex problems and before we wrap this up I would like to mention two more things so another Golden Rule of ux is to actually be consistent so you want to make sure that you use the same same wording across the website so for example you don't want to use cab uh on one page and taxi on the other page elevator on one page or and lift on another page things like that you want to make sure that the colors are consistent uh that your primary CDA is always the same color that you don't use for example a red uh unless uh the action is uh dangerous right so the next thing is that we should not forget about the accessibility because if we don't make our products accessible we are using a ton of potential um users because not everyone has a great site and eyesight and not everyone can hear uh well if you are using sounds in your products so by making sure that our products are at least somewhat somewhat accessible uh we are actually reaching a lot U larger pool of potential users and um I think that's it yep that's it so um yeah you can reach me on on telegram if you like to to chat about uh anything if you like uh dream about this presentation and you figure that you have any question you can reach me out there and if you would like to check any of products I'm working with these are the links that that can leave you there and that's it for me if you have any questions [Applause] don't be a stranger if you have any questions seems like you explained it perfectly let's give it up one more [Applause] time I have a question coincidentally um you mentioned training AI on user Behavior do you have any experience in that and if you do all right then forget I asked anything uh no uh do I have any experience on training AIS no I don't uh but I I working with uh companies that um are actually doing that very successfully and uh if your question is about training AIS to actually uh reply to common problems uh then it's pretty doable because you know a lot of people are actually NES and they will ask uh very basic questions like how to send the money from one wallet to another and that's something that even untrained CHD can answer and essentially uh what we can do is first of all just limit the range that CH CHD is using and then make sure that we are watching user Behavior Uh in some way and add that new knowledge new information to our uh chat boot also by using hotar we can learn about uh if you know about hotar this is a tool that is essentially monitoring your uh user Behavior you can see how their uh cursor is moving through the screen and also you can uh get reports you can get documents and you can just plug in uh that information in chat boot so um that way you can learn and it can provide better replies to the questions in the future and we have this same watch it's nice I can tell you're a designer thank you [Applause]