Bootstrap Your dApp UX by Rebecca Kacherginsky | Devcon SEA

[Music] swanik we're going to be jumping into bootstrapping your dapex but first I want to ask two questions who here has struggled to make a complex crypto app feel simple to new users and who feels that resource constraints on their team have made it difficult to create an ideal user experience if you face these challenges you're not alone together we'll be discussing how we can Implement best practices to help you overcome these challenges and bring the next billion on chain now before we dive into Solutions allow me to introduce myself you might know me as the crypto bride about three and a half years ago I exchanged nft wedding rings with my now husband on ethereum mainnet uh we used of course we overpaid in gas this was before any layer twos existed but you know what they say love is priceless and about me professionally I've been designing and leading teams for the past 15 years most recently I led the design of coinbase Commerce where I help businesses use crypto payments now as a defi design consultant I help businesses that are tackling the same challenges that you're facing so with that let's dive in to how we can bring those next billion on chain to guide us I want to introduce you to a framework that I developed through analyzing dozens of popular defi apps I call it the DAP funnel it outlines the key stages people go through when interacting with decentralized applications from their first interaction to transacting and Beyond the stages are connect configure transact and track each stage represents an opportunity to either engage people or lose them let's begin with the first stage connect this is all about connecting with a wallet as I was doing my research I discovered that where to start is often unclear best practice number one make connect obvious let me start with what not to do don't don't mislead with interactive zero state so here's an example on B you can see that I can enter an amount to deposit but the button is disabled and I don't know what to do another common mistake is is what we see here on pancake swap where somebody comes in wanting to do an action such as swap but the call to action button says connect wallet so any kind of benefit to surfacing this interactivity is negated by this disconnect what's better is how Zora and Lio and a few others are proactively surfacing the login screen best practice number two streamline options is anyone here designing cross chain DBS awesome here's another example of what not to do don't combine Network selection with wallet selection it's just too much information it could be handled in multiple steps save time by implementing a ready-made wallet plugin there's so many options out there that will simplify your onboarding another great option is to combine the disclosures with your wallet connect screen um people who are familiar with web 2 will likely click on the upper right corner and they're logged in account don't do what curve does and a few others that instantly log out it's quite jarring disorienting and instead um offer an interstitial menu this is an example from arbitrum bridge where people can access their settings and other options rounding out this topic of connect consider using a pass key this is a really awesome Innovation that we're seeing more people adopt um and I hope to see further streamline techniques as we move forward all right moving forward to configure this step is all about setting up the transaction it's about selecting the asset entering an amount and choosing a network and sometimes configuring more advanced options and here the two themes are too many choices being overwhelming and using technical jargon can can intimidate users let's start with personalization Pop Quiz do you notice a difference between the logged out stage and the logged in stage if you answered no you are correct uh this is a missed opportunity on fortunately on boring Dow's part where uh it's not suggesting a token or a network instead do what unisoft does here where it's suggesting tokens in my wallet and even suggesting prior searches from previous sessions so it really feels like they know me another thoughtful approach is personalizing by Persona so look at here how blur has two different user types there's the trader who wants a more information dense View and The Collector who wants a more curated experience similarly similarly on bridge there's an expert mode um and this is great great if you feel like you might be alienating some of your power users by simplifying too much this way they can easily access those more advanced features starting with good defaults should minim the cognitive load but what happens when people encounter errors we need to enable better recovery and hopefully prevent them let me start with a great example of error prevention here on Hop it's suggesting a minimum amount for me to send so I don't get an insuff insufficient funds error be sure to check your error messages this is a a really great example of how somebody may have forgotten to translate this into something that makes sense explaining what happened and what the user needs to do to fix it and double check that what you're saying to fix it actually works instead deep link into the wallet to overcome that issue recover here as igen layer does by switching to a supported Network in this case I recommend Progressive disclosure also to simplify the the interface here on llama swap the slippage options are visible at all times which it makes the interface too cluttered and it can increase the drop off right here's another example on beefy where it's showing the increments from 0o to 100 probably not a widely used feature and it makes it look a little messy instead check out how Thor swap buries those options underneath the m Max button so for the items that are visible in your interface I recommend showing some education providing more context to increase confidence in the transaction so let's avoid using jargon here's an example from rocket pool where it's using a term that probably everyone in this room knows main net but it doesn't map to an option within most wallets so instead use straightforward language tool tips are a great option to explain in detail everything that a transaction it uh has I also recommend including a confirmation screen that gives the user an opportunity to review all of the details before moving forward assuming all the details in that transaction look good we're ready to transact this is the core of all applications um it's where people authorize access to their funds and transfer it's critical that people feel safe here unfortunately lengthy approvals can scare and confuse the best antidote antidote to that is to convey progress okay who's used a in this room probably everyone right it's like one of the oldest most popular d out there but unfortunately it uses buttons in a very non-standard way this is not the best component for showing a multi-step transaction you see how they appear and disappear without any kind of confirmation what's a better pattern is what Unis swap does a stepper right it shows what are the actions that are required what are the status pending and confirmed I also recommend showing in context feedback through toast messages as Aerodrome does here don't misrepresent status so here's an example from Lio which is optimistically presenting modals saying you are unlocking you are wrapping uh but it's before I've even had an opportunity to confirm in my wallet so it's not really accurate and it reduces my trust in their system instead uh do as as moonwell does which encourages once I've reached the pending status to continue using the application okay this one's a little controversial but rounding out the transact phase um let's not do infinite approvals you see this long scary Red text uh this you know with the current constraints we're in right now um May maybe a lot of this will be solved with smart wallets uh but until then let's use exact amounts so that it maps to what the user entered into the system and it's also more secure now the final stage track this is all about monitoring the status so people know what happened and what they can do next here we observe limited access to historical and ongoing performance here are the three stages of the tracking life cycle in most STS There's real time ongoing historical let me break it down for real time we covered that in the previous section transact and this is all about in the moment when you're investing you receive that feedback right but on going is missing right we we want to understand the day-to-day performance of Investments including return returns and the yield uh the patterns we see here are dashboards notifications um this helps people make investment decisions what to do next and then the history we're this is all about recordkeeping um of the past transactions account statements and this enables accounting it's critical that we support each step of this journey in our debth so how do we support ongoing performance tracking let's provide apy history uh this is an example from a it's very rare I did not see many of these in my audit please share examples if you have them um you know anecdotally a friend of mine takes screenshots of the apps where he's invested uh to see whether or not his apy has gone down which is not ideal let's also summarize the portfolio insights this is from Aerodrome a dashboard that shows kind of the return and the emissions and other things that I earned this is definitely not the best but I I challenge you to provide better examples um I want to leave rounding out this ongoing performance topic I feel like a missed opportunity here is push notifications for crypto I think there are a few Solutions out there but it's very much lacking um here's an example from a trafi account I received a an email notifying me that the yield went down on one of my accounts um you know how do we know if we're about to get wrecked that's that's kind of a core use case for a notification um and I I i' welcome some solutions there finally raise your hand if you've ever tried doing taxes on your crypto it's a nightmare right uh so on uniswap you could see that there's transaction history but this is not a common feature in most apps and here on dbank you can see an example of aggregating statuses but again this is this is a third party it's a little lagging and it the source of Truth should be on your dap itself all right so we covered all of that woo so here's the big takeaway here I hope that you can Implement some of these best practices in your dab today to enable better adoption and retention well I'll let people finish taking their pictures um U please share your feedback on on X but first I want to leave you with one final idea what could we build together if we're not building in Sil I propose that we align on web 3 design standards imagine a world where every dap developer had access to plug-and-play components that were fully user tested responsive open source right it would enable greater efficiency you could focus on your core project area it's a proven model we've seen this with Android and iOS and also the very popular bootstrap framework and finally it's ecosystem strengthening it would help on board the next billion because they would become familiar with the patterns across every single deck rather than learning bespoke implementation there are a number of tools that exist today um you know they're pros and cons of the wallet Integrations and sdks out there you know some of them are promoting certain wallets or chains um but I think we need a neutral community-driven solution so I'm looking for people to build this together with me front-end developers designers researchers please reach out if you'd like to be a part of this thank you so much kapuna great talk amazing Rebecca okay let's uh ask some questions uh if you guys have a question uh you have to you you have to use the code to post it on the app and I will read it out okay let's start with the most voted question so first one is about using tool tips on mobile what is this alternative because it's hard to use to tips on mobile it's a good question um I've seen different patterns Implement like a mobile version which would be like a modal uh or like a bottom sheet I guess if it's a native app okay uh do you think wallet popups so are this is fair you know actually I uh what was the stat only like 10% of the most popular daps actually do have uh a mobile optimized experience so definitely it's an opportunity for us to build more responsive libraries um I think you know they different use cases right there's some serious traders who prefer desktop um you know and so my audits were desktop components but clearly there's uh definitely a lot of Need For Mobile as well so sorry this the wallet popups for approval or but um so the next question is don't you need product Market fit before you can consider uxix oh that is a great question I I definitely uh agree on that and there's there there was a really great talk um yesterday about how to quickly validate ideas by just really mocking up two parts of the flow the point of Discovery and then the point of value um and then you can decide whether or not to build the middle of the product experience so it could save you potentially a lot of effort okay the next question is should user know uh they are using crypto yeah there um so many great topics about this uh or talks about this at this conference specifically uh I think longer term as we're looking at onboarding the next billion it's not necessarily what I shared today it's it is abstracting it and making it so simple probably likely behind um you know a very simple interface okay um next question is about using tables on mobile how do you approach that there are various options I guess uh you could either stack I don't know there I'm not sure if I'm the best person to share this right now but yeah they're they're different patterns that you could look up okay uh when you think uh when do you think chain obstruction will be the new normal in D chain I wonder if it's a h what's the hindrance I'm not quite quite sure about that I guess is this who wrote just want to somebody what is hindrance oh yeah like what is the hindrance of what is preventing people from distracting is somebody who asked this question here maybe oh okay so this is kind of like the other question around it being like all of the uh complexity being hidden okay yeah I'm with you I think it there's that is the future and I think we'll see a lot of advancements when Petra is upgraded in q1 so let's stay tuned I think what I shared today was focused on the technology that's available right now what can build today but that's definitely soon and then later I think is the standards where we kind of as a community agree on the best practices and how to implement common patterns okay uh next question is should we be moving towards um embedded wallets uh inside apps that are less portable or continue to push in portable horizontal wallets uh which are not perfectly suited for each app which are not what perfectly suitable for each app yeah like metamask versus um you know the wallets that you get inside of your application yeah I I watched one of the talks about this and I guess like right now it seems like there you know wall some wallets like privy and others that will create per uh dep but the vision I think is to consolidate across okay the focus of this was dap ux not wallet so okay I think that's uh it for the time for the Q&A uh thank you very much Rebecca thank you everybody who asked questions and uh next uh talk is in five minutes see you okay