Empowering Devs: A Practical Guide to User-Centric UI/UX Design in Web3– Sundaram Jha

so uh welcome everyone to the workshop it's mostly going to be me talking and kind of less handson but still hoping to get a lot of learnings across in over the next uh 25 minutes or so uh we're going to be delving deeper into the ux and UI and product side of the space so yeah to get started who am I so my name is Ja I go by XYZ online and I specialize in uxui design I've been uh doing it for uh four years in the space so today we'll dive into practical ways you as developers can Implement user Centric design principles into your daps to enhance the user experience without really sacrificing the uh functionality so just to get an idea of how the audience is how many of us here are developers by the show of hands okay and non- tech people like sales marketing okay awesome yeah hopefully we'll have our learnings for everyone here that's uh that was my idea while designing the slides so the goals of this Workshop is uh uh we'll start with the importance of ux in web 3 from there we'll cover the core principles of user Center design that you can apply to your own projects next up we'll uh take a close look at some bad and good examples in action including a very detailed uh breakdown of metamask and rainbow wallets uis kind of comparing them see uh who does it wrong who does it right and finally I'll share some practical design tips to end the workshop and we'll wrap up with a quick Q&A so feel free to note down any questions you might have as we go awesome so uh let's get started what's what is ux in web 3 so what exactly does ux mean in the context of of web 3 unlike web 2 which focuses on the Simplicity and user friendliness of flows web 3 introduces entirely New Concepts like wallets gas fees private Keys decentralized apps like all those jargons that you see around smart contracts and stuff like that and uh many of these terms aren't really familiar to the average user and our challenge as builders in the space is to uh take this new complexity that's associated with the space and make it digestible so in web 2 people are used to having seamless interfaces there's a lot of money a lot of research has been done in the last 10 years to get the ux to where it's at right now so people are used to having seamless interfaces like banking apps or or uh social media platforms that uh provide instant feedback and very smooth interactions because there has been a lot of research and resources that has been ped into to make uh how the ux is in web 2 at the stage where it's at right now but web 3 since uh it's still like a very new field it's often very very fragmented and the user flow that's out there can be very very intimidating still and the challenge right now is that uh we need to move away from this complex Tech heavy interface is to A system that invites and welcomes everyday new users and that's why uh this is one of the things that's going to help us on board the next million users like that's been a Jag in every project uses that or you're going to on board the next billion users to the space but the ux isn't good there's no way a average everyday user feels even invited to use your app or project so there are three main user personas as I see it in web 3 right now so it has a variety of users from early adopters to mainstream users and understanding these personas is very crucial for designing an interface that works for everyone so you kind of have to know who you're really catering to you cannot make it for everyone like it's a very big challenge so knowing who you're designing it for who who you're making your product for is one of the uh very important early steps you need to take let's go through early adopters first first they're very Tech heavy they expect very Advanced functionalities and uh they're very Adept on uh navigating the complexity associated with your app because yeah they early adopters they are always looking for new CH challenges and stuff like that and uh the way the space started a few years ago especially when I got involved back in 2020 2021 most of uh the user base that was there in the famous apps at this at that point were adopter so there was no need for them at that point to kind of focus on design doing good ux and stuff like that because the adopters that were there at that time were very Adept technically so even if they were given like a very basic HTML landing page they could still make it work until the back end worked but that's not the case anymore now there has been lot of resources being put in there has been a lot of money being put in as well and we as a space needs to need to grow and get more new people in who are not early adopters so that is where the real challenge of making a good user experience come into play comes into play second our Tech enthusiasts uh uh often they might not be aware of nuances associated with your uh app or project but are very keen to explore around they'll definitely need some guidances but still really really appreciate control over what's happening and what's going on in your uh project and uh third and the main thing is the mainstream users that is what we are uh uh looking to on board like that's who everyone talks about mainstream users getting the next million users on boarded and mainstream users they need Simplicity they are often confused by all the jargons all the technical things like private keys and gas fees and nons and everything that that's being used and complexity can often very often scare them off like I've at multiple points done a lot of user research as a part of the projects I've been working with and this has come up one too many times that uh all these us of jargons not explaining what's going on behind the scenes and everything really scare these people off and often a person who was supposed to be your first user just drops off just because of that so a great uiux a great user interface and user experience should serve all of these personas by being very adaptable and intuitive so what I mean by adaptable is that you know who you're catering to make sure it's a very conscious thing while you design your applications while you design your user flows while you do your information architecture be very conscious about that and make sure it really hits the mark maybe do some user research look at what they want look at uh what they would appreciate what they would not like and then adapt it to them that's like a very s short way of getting started with your project now why ux is critical in web 3 now it's a no-brainer question but still like let's uh go over that so the ux right now in the space can be the difference between the success or the failure of your application or the project why because uh all these blockchain based actions like signing a transaction or inter in with a smart contract are very intimidating intimidating to users who don't know who don't understand what's happening in the background like I started being uh with with a very non-technical background when I was just starting out and these things took me a long long time to get started because all of the times I Associated these hard things as uh the the the uh issues that are out there and these scare people off so users need to trust the process and if they are unsure they'll just drop off so making sure that uh what you design what you create what you build it needs to induce trust in uh who you are building for and trust is like Paramount right now like people like you basically have control over their assets their monies and everything and that is where the real challenge comes into play as well because it kind of uh uh appeals to a human emotion because if I have some of my own skin in the game I need to trust you that you are uh managing well managing it well for me and uh users need to trust the process and if they're insured they'll uh drop off and this can very often lead to very slow adoption rates of your app and that's what we are seeing with more than half the projects in the space right now is it starts off pretty well and just Third Day onwards it just drops off so you don't so the the first part is to get users into it that's uh one thing but getting them hooked onto it getting them to use it is a completely different ball game altogether so many web3 platforms still uh struggle with retaining users because of their confusing uis and this was one of my biggest takeaways from etcc in Brussels in July I tested out a lot of apps for people I was doing like a free consultancy thing for projects and uh it's it's good that lot of projects now are kind of focusing on UI their UI looks good but once you think of yourself as a user and you dug deeper into it it just makes no sense it just is the same old thing about the jargon same old thing about the complexity the the I candy thing like the only focus on the I candies and not the actual ux side of thing so remember that web 3 is still in in its early stages and the designs we create right now can Define the future of the entire ecosystem hello guys join join in just getting started yeah so uh yeah so that's ux in web 3 yeah let's go over some uh example so I love hating on metamask it's one of the biggest things in the space right now it's very unfortunate that most of the new users who come to the space get started with metamask and that is the first experience they get I feel sorry for them so uh this is what a typical transaction confirmation page looks like in metamask and uh as you can see the language here is cryptic we see terms like gas limit estimated fees amount plus gas fees and these terms like are native to the blockchain world but most confusing for most users like when I was just starting out I remember like I didn't do my first transaction for three straight months just because of how bad it it all looked and I was how unsure I was so I had to have like a developer friend with me who was making me understand okay you put confirm gas fees means this you put in some money this is this gas fees is nothing but a transaction fees they should just call that so that is what we are dealing with in the space right now of course they've uh done some improvements over the last few months but still not there so the average user probably doesn't understand what gas fee means and uh they they they might think it's a random extra charge or something and there's uh no clear explanation of of how this really affects the transaction like I was talking to a guy here uh yesterday and he was just a new student who was just getting into everything and every time I meet a new person I'd like to like do this kind of user research with them on how they think uh the space is and just as a point of view of a new person right and of course he got started with metamask as well and even though metamask has done a lot of changes it's still not evident it's still out there as one of the shest user experience ices ever so yeah and the average user probably doesn't understand what gasp means and uh the numbers like the max fee and total are complex and they're displayed in both crypto and Fiat adding to that confusion so this is not just overwhelming it's actually dangerous because users could uh mistakenly approve transactions without fully understanding uh the costs or risks right because uh in order to do anything you have to uh understand what's the what's the risk that's associated with it and also what's coming along like that's one of the main points of user experience design is that you keep users aware you keep them very aware of what's happening what's going to happen and uh use like some uh psychology some templates we'll look into it uh later in the presentation but yeah and the impa impact of this bad UI on user behavior is that now imagine a user interacting with uh uh with this interface right they either give up or proceed with very a lot of uncertainty like neither scenario is great like even if they are confused that's not a good ux if they proceed with uncertainty that's even worse because you risk letting a user drop off right and uh when users are unsure they either abandon the transaction or yeah they either abandon the transaction because when they do it uh it costs your dab and developers potential engagement and revenue as well so just from a business point of view it's bad from a ux point of view it's bad from a developer point of view it's worse yeah it's it's a not a good SC scenario at all so uh or they often make errors as well leading to a fail transaction and that's uh that gets added to the complexity and this whole thing this whole shebang creates a friction for Mass adoption of blockchain tech because you explain a critical role exactly here in bridging that gap of people joining in being a newcomer to the industry and actually getting started now this was a bad example let's take a look at a good example of uh the same thing the same transaction flow is I love uh the rainbow app I don't know if you've uh seen it around but yeah let's uh contrast this with the same process of rainbow wallet noce notice how clean and simple the interface is as compared to this whatever this is so take a good look what you'll do there and uh this is the rainbow app so rainbow replaces these cryptic languages with uh very human friendly explanations terms like speed up and uh slow down are exp explain transaction speed instead of jargons that we talked about like gas Fe and stuff like that and the calculation is still there like it's it's it's still there like in metamask but the UI itself presents it in a much more digestible way to the user and uh the primary focus is on user action so either you approve this that is signed or cancel the whole whole transaction and that's a big ux thing that you don't you know bombard users with a lot of choice with a lot of things maximum have like two things things you want to have them do is usually proceed or cancel and make that look very uh Primary in a primary way so the primary focus here uh is on user action of sign and the secondary focus is on cancel but the details are still accessible but uh you know as you see here like uh there are a lot of details everywhere and it's the same here the details are accessible but they are hidden for those who don't need them so if I'm a new user I'm a I don't know a product designer who is going through the flow I don't need to always check the hex or like the deepest technical details every time maybe if you're a developer it makes sense for you so this is what I mean by catering to your users so rainbow knows that their users is are everyone even non-technical people as well as deeply technical people and that's where they came up with the idea of hiding behind the details for uh those who don't need them yeah and uh that's where we have the worse and good UI and rainbow has a very clean visual hierarchy as well and the primary action of signing the transaction or canceling the transaction is front and center and all additional information that is uh there is a secondary thing throughout the UI and metamask on the other hand doesn't prioritize user action as well it throws too much information at you you have like so many things going on there's some error going on here just like a random thing that's not even explained the buttons aren't that uh big of a attention grabber as well so Rainbow's a clean uncluttered design reduces this user anxiety that we are talking about and improve the trust that we talked about which is very essential when dealing with these financial transaction because trust is the pad Mount thing especially when it comes to financial transactions because you're dealing with someone else's money and money is the thing people care about so yeah now what's the impact of this bad UI on the users like there has to be some impact right so the consequences are that users who encounter confusing interfaces are more than likely to abandon your app in turn uh just letting your revenues down letting your user base down and a confusing UI also leads to a very high error rate so people might accidentally send too much crypto like I've been seeing it in my Twitter feed for a while that things are going on and someone mistakenly sent five E to someone they didn't intend to and using the wrong wallet or interacting with the wrong smart contract so at the end of the day bad ux hurts your retention rates and your reputation as well and users won't come back if they don't trust your platform and how you make user trust your platform is through a good ux and really doubling down on that so how do we solve that here are some core principles that I like to use of this user Centric design in web 3 so just a recap of what user Centric design is you keep users as the Paramount thing you design for them so users are at the center of every decision you take especially when it comes to the product the information architecture the Flow side of things and uh these are the five core principles of that so let's shift gears and talk about how we can do better so first one's empathy now what's empathy it's uh always designing users with with the user in your mind putting yourself in the user's shoe see how they think how they act how they might react to your app they might not have the technical background you do so really putting yourself in their shoes Simplicity is second it's it's about reducing the unnecessary complexity focusing on what the user needs to accomplish and removing anything that distracts from uh that goal now this goal can be a business goal this goal can be a user goal this goal can be just just as a product goal like you can set up a goal and simplicity will be a very nice way for you to like lead towards uh that particular goal and third is feedback it's one of the most important things and that's what we are missing in the space right now is because uh yeah so feedback is basically keeping users informed at every step whether they're confirming a transaction or waiting for it to process giving them realtime feedback also what a feedback is is a iteration what we call iteration is that we do something we test it out with the users see if they like it if they don't go back to the drawing board change things again and do the same thing over again and that's what we are missing in the space right now because what I see in projects is that the whole product development workflow is very linear so it starts with uh coming up with the idea smart contracts happen uh uh products made audits happen and then people figure out oh this is not something users actually want and now it's uh very hard to go back to the drawing board and change things up because smart contracts already done is one of the most expensive things ever to change that so getting design in the room early on is a very uh uh looked like very underrated thing and it's one of the things that can just make or break your thing because once you have designed in room early on it's much more faster and much more cheaper to just test it out with the users create a figma prototype see how users react to it and just change what you want later on so feedback is that uh uh keep users informed at every step whether they're confirming a transaction waiting for it or uh uh giving them real realtime feedback of where they are accessibility is also something very underlooked on so your designs should be usable for everyone so I use usable and not catering to everyone so catering means your user base is someone different if my user base is genzies who are just getting into the space and I'm designing for them that's a different thing accessibility is for example if I have a visual imperity right so uh that means like attention to color contrast or font size and alternative input methods like this could also uh it's a very human thing to integrate in your uh apps and the biggest thing for me is consistency like as as developers like I was a developer for a long time and I know it's very hard to do designs create Design Systems and one of the biggest cheat codes I found to actually do it and do it right was consistency so what that means is users should always feel confident that your interface works the same way across different pages so if you're using a particular button element just make use that throughout your app don't change it if if it's black and white sure let it be use the same element throughout use the same patterns and terms throughout your app it shouldn't change and that's one of the cheat codes if you have like a set of certain elements like uh uh input uh uh you know input uh ways or uh some certain elements some uh uh text stles that you're using so that's like create like a small style guide or a design system shouldn't take a long time takes like 1 hour to begin with but then after that it's so scalable that whatever ever you do with your app in the future it's always there it's always growing and that's one of the biggest cheat codes to not start with having a design on board even as developers you can do that of course Tailwind exists stuff like that exists but there's something about creating your own custom elements that sets your thing very very apart from uh your competitors for sure so principle one let's go over the all of these five a bit more in detail so empathy is about putting yourself in user shoes so in web3 that means means recognizing the most users won't be blockchain experts and you need to provide clear instructions and a path forward at every stage of interaction walk them uh through each step of a transaction for example think about how complex processes like uh staking or or or yield farming can be broken down into simpler understandable and very manageable steps and uh a good way is to always ask what's the user goal what might confuse them and how can we offer more support and through these three questions like uh you've already got empathy side of things sorted out so if you ask what's the user goal what might confuse them and how can we offer more support you are done done with the empathy part Simplicity is arguably I think according to me one of the most important principle because the goal is to make the interface so intuitive that user can complete the task without thinking too hard so the idea is to not make any user think hard at all like just think of them as I don't want to use the word but just think that users are stupid they don't know what's going on they shouldn't think uh that hard so avoid overwhelming users with technical jargon for example instead of showing a full breakdown of gas fees and what's going on show them a simple slider of transaction speed and then explain what happens if they choose a slower or faster transaction right and a good test for uh Simplicity is that asking yourself can your app be used by someone who has zero web3 experience if the answer is no simplify it further it's not there yet third one's feedback so the transactions as we know are are not instant at all and users often have no idea especially the new ones what's happening behind the scenes and that's one of the problems I had as well because uh I I remember the first transaction why I did on my own was uh sending some eat over and uh that was like at the peak of bull market and uh the the the transaction fees was high the waiting time was a lot and I was so scared that I was going to lose all my money because I had no idea what's going on thank you metamask so without feedback users may think the app is broken leading them to even cancel the transaction or try again which which in turn like causes even more confusion and potential errors later on so it's it's very important to uh provide confirmation at uh every stage so users know what they've just done and what will happen next and accessibility it's a key part of good ux so you want to make sure your app is usable by everyone including users with disability for example color contrast is critical for visually impaired users for example what I mean by color contrast is there's a few really good color contrast checkers online that's won by Adobe and you can use that uh in your app so what I I mean by color contrast is for example if a a background is yellow a blue text will not do well it won't sit right on the eyes it will hurt your eye up font size is very uh important aspect as well so make sure your text is large enough to be read comfortably on all devices including mobile and it's like also a personal thing is that uh whenever I design I make sure I design apps mobile first because lot of our users are coming through mobile first of all that's what I've been noticing as a Trend so make sure you design mobile first you can do it you can not but what good it does is that you have a very good idea of all the sizes and everything that you can just carry over because if you have mobile set web version is just a broader thing you can just like add some more space and that's it but going the other way around doing website uh sorry uh desk version first and then the mobile adds a bit more complexity that's a just a personal uh uh trick so accessibility isn't just about compliance it's uh about ensuring that everyone can use your app which ultimately also expands your user base and yeah the biggest one consistency if if your approv button is blue on one page and green on another users may like second guess whether they are performing the same action and that's what I meant by consistency if you have a certain button of a certain type and if it's a primary button just use that throughout your app the same way and consistency in layout and design patterns is is uh especially very important in web 3 Because as users become familiar with uh specific interactions like signing transactions they should experience the same flow across different screens and interaction The Experience should be the same and uh design consistency is also about building trust so when users see familiar elements and predictable flows they feel confident navigating your app and uh consistency also also really reduces the cognitive load on the user on a human brain so the more predict predictable your interface is the easier it becomes for users to focus on their task instead of figuring out the interface itself because that's one of the problems I see with developers that they think of design as very art very creative thing it's like a graphic thing oh it should look good on this page but it's not uiux is more about consistency more about using the same patterns than about like graphic design or making a good art or aesthetic and stuff so again a big thing is uh using PL language in your UI like I cannot uh yeah focus on it as much because plain language makes your interface more accessible to users who aren't familiar with the tech a lot of web3 apps still use terms like nons hash or even gas and stuff like that without really explaining what they mean now while these are important for developers they're confusing for the average users obviously because when the users face uh these kind of jargons they're likely to either abandon the app or proceed without fully understanding what's happening and both are bad outcomes so instead instead uh translate technical terms into uh simple actionable language for example instead of uh saying gas fees say uh transaction fees it's just a one word change but it makes a lot of difference the goal really uh with this is to make the experience feel intuitive and human even when dealing with a complex and and seemingly hard technology like the whole of web 3 and another big uh thing that I might recommend is visual hierarchy so as you noticed uh how big of a difference uh just changing the sizes of the text does it's uh visual hierarchy basically means uh uh how you guide users attention to the most important parts of your interface so in web3 where there's often a lot technical information good visual hierarchy ensures uh that users don't really feel overwhelmed by details and it helps them focus on the primary task for example if uh the main goal is to approve a transaction the button should stand out the most while secondary information like transaction details or gas fees should be less prominent and that's one of the problems we saw with uh metamask there's no visual hierarchy it's uh most of the things are the same uh font size same thing it's very hard to diser you have to put in a lot of cognitive load to know what's going on there so using font sizes uh colors and and especially spacing to create a hierarchy is a good practice larger Bolder text draws the Eyes First follow by smaller and lighter text and by creating a clear visual pathway you help users make decisions much more faster and with much more confidence and that in turn again builds up your trust a good thing big thing is uh error handling as well and errors as we know are very inevitable in the space especially when uh users are interacting with the blockchain and networks that may experience delays or you know require specific spefic inputs the the key to good ux is how you handle these errors so instead of showing generic error messages like error 4 or three explain what went wrong in human terms for example if a transaction fails because of insufficient funds don't just display an error message and uh be done with it say something like your wallet doesn't have enough funds to complete this transaction please add more funds and try again and put a primary button there where they are led to the flow where you add your transaction you add money to your wallet so good error handling helps users recover quickly from mistakes and prevents them from feeling frustrated or lost and if they're feeling frustrated or lost again it's a loss of Revenue again also a big thing is to provide clear options for users to correct the error for example if a form field is incorrect highlight that and offer a suggestion for the correct format and if a transaction goes wrong if the fund isn't sufficient lead them to the flow where they can add more funds in the wallet so some hidden features for advanced users so web 3 often uh yeah caters to both beginners and advanced users as we took a look at the wallet apps and a very good approach is to hide Advanced features behind menus or options so beginners are not overwhelmed and that's one of the biggest good things rainbow did was that they hid all the advanced things behind tab and all the main things was the only thing that was uh right front and center so for example show basic transaction details by default but also allow Advanced users to expand a section for more granular controls like gas fee customization and stuff like that so this Progressive disclosure often uh this approach ensures that beginners can use the app without feeling intimidated while power users still have access to all these functionalities they need so you you don't need to uh uh tell all these power users to off they they should be kept in mind as well it's just that you are uh finding like a common ground between the beginners and power users so by keeping these Advanced features out of sight what you do is you essentially reduce that cognitive load we were talking about on new users and make the interface look much more simpler and more approachable as well so instead of dumping all things all at once you have it like more laid out more structured hidden beneath tabs so it feels much more uh approachable much more simpler and also a big thing is the interaction design in web3 and this is often very overlooked and in my opinion it's if you do it right it just takes your uh interface like up at least three points so a good interaction design is essential for making your app feel responsive and intuitive so every action a user takes whether it's hovering on a button whether it's clicking a button approving a transaction or even interacting with a dab on a ho they should have immediate feedback for example if a user clicks on approved transaction don't just leave them haging there show them a loading spinner a progress bar or even a simple message like a transaction is processing and uh without this immediate feedback users will think the app is broken or something going wrong or that their action didn't register leading to again confusion or repeated actions so this interaction design makes your app feel much more alive reducing that uncertainty we were talking about that users may feel while interacting with slower processes and micro interaction is again one of these uh things uh there are small but subtle animations or feedback mechanisms that make your app feel much more polished and user friendly it makes it look much more bougie so for example when a user hovers over a button it might change color or animate slightly to show that it's clickable or when a transaction is successful you could show a brief confirmation animation so these small touches really really help users like that's I've been seeing a lot cuz I do freelance and contract work and whenever I've done these uh small micro interaction things the feedback has been much much more positive like the users think okay this is much more polished if i h on a button it has a nice shadow effect it changes colors it's literally just like five extra minutes of CSS change but that's a lot of lot of uh good points to it so these small touches uh help user feel much more engaged with your app giving them again confidence uh that their action is registering and especially in web 3 where users are often dealing with longer transaction times or unfamiliar processes these micro interactions uh uh provide reassurance and they create a more human and interactive feeli which essentially is important in making the whole Tech feel accessible to a wider audience and also feel human in in the end and again let's go real-time feedback as well so without clear feedback users are left wondering what if if they action was successful or the app crashed so always provide some form of real-time feedback whether it's a progress bar or spining loader or even a notification that explain what's going on behind the scenes for example if a user submits a transaction show them show them the steps it's going through like awaiting confirmation transaction pending on the blockchain how long it might take so this transparency reduces frustration and keeps users informed during what would otherwise feel like a uncertain or confusing process and uh yeah so some closing remarks and some takeaways from all this thing so we've covered a lot today it was almost uh 40 minutes now first always design with user in mind design with the user uh uh uh keep yourself in the user shoe empathy is the key make sure your interface is intuitive simple and accessible ask if uh it is something uh uh that someone with very less experience can use use feedback both in terms of real-time interaction and error handling to keep users informed and engaged and also user feedback on the app what they're talking about it if they suggest some change if they have some confusing some places keep experimenting with it and iterating your app's design and uh finally remember that uh consistency and simplicity are your best tools for reducing friction in any interface you do they like cheat code to it so with these principles in mind you can actually go ahead and uh build your project from now on that are not only function functionable but also very enjoyable for users as well and uh I like to end with uh this quote by Ben shopin is that amazing ux doesn't make your product valuable but bad ux can make product useless and that's something to think about that's it thank you so if you want to connect anywhere let me know if you want to get access to the slides I'd be more than happy to share it to you just drop me a text on either Twitter or LinkedIn should I go through them yeah