Bootstrap Your dApp UX

Tanya Cushman Reviewer:"Petra Petrovic' Swadika! We're going to be jumping into bootstrapping your Dapp UX, 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. Of course, we overpaid in gas.

This was before any Layer 2s 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 Dapp 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 mislead with interactive zero state. So here's an example on beefy. 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 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 Lido and a few others are proactively surfacing the login screen. Best practice number two, streamline options. Is anyone here designing cross-chain dApps? 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. People who are familiar with Web 2.0 will likely click on the upper right corner. 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, 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 passkey. This is a really awesome innovation that we're seeing more people adopt.

And I hope to see further streamlined 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 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. This is a missed opportunity, unfortunately, on boring DAOs part, where it's not suggesting a token or a network.

Instead, do what Uniswap 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, on bridge, there's an expert mode. And this is 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 minimize 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 insufficient funds error. Be sure to check your error messages. This is 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 Eigenlayer does by switching to a supported network in this case. I recommend progressive disclosure also to simplify the interface. Here on LamaSwap, 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 drop-off, right?

Here's another example on Beefy where it's showing the increments from 0 to 100. Probably not a widely used feature and it makes it look a little messy. Instead, check out how ThorSwap buries those options underneath the 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 RocketPool where it's using a term that probably everyone in this room knows, mainnet, 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 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 DeFi applications. 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 to that is to convey progress.

Okay. Who has used Aave in this room? Probably everyone, right? It's like one of the oldest, most popular dApps 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 Uniswap 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 Lido, which is optimistically presenting modals saying, you are unlocking, you are wrapping. 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, do 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, let's not do infinite approvals. You see this long, scary red text. This with the current constraints we're in right now, maybe a lot of this will be solved with smart wallets. 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 lifecycle in most apps. 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 ongoing is missing, right? We want to understand the day-to-day performance of investments, including returns and the yield. The patterns we see here are dashboards and notifications.

This helps people make investment decisions, what to do next. And then the history, this is all about record keeping of the past transactions, account statements and this enables accounting. It's critical that we support each step of this journey in our DAPP. So how do we support ongoing performance tracking? Let's provide APY history.

This is an example from Aave. It's very rare. I did not see many of these in my audit. Please share examples if you have them. Anecdotally, a friend of mine takes screenshots of the apps where he's invested 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 challenge you to provide better examples. 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.

Here's an example from a TradFi account. I received an email notifying me that the yield went down on one of my accounts. How do we know if we're about to get wrecked? That's kind of a core use case for a notification. And I welcome some solutions there.

Finally, raise your hand if you've ever tried doing taxes on your crypto. It's a nightmare, right? So on Uniswap, you can see that there's transaction history, but this is not a common feature in most dApps. And here on Dbank, you can see an example of aggregating statuses, but again, this is a third party, it's a little lagging, and 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 DAP today to enable better adoption and retention. I'll let people finish taking their pictures.

Please share your feedback on X. But first I want to leave you with one final idea. What could we build together if we're not building in silos? I propose that we align on web 3 design standards. Imagine a world where every dApp developer had access to plug and play components that were fully user tested, responsive, open source.

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 onboard the next billion because they would become familiar with the patterns across every single DAP rather than learning bespoke implementation. There are a number of tools that exist today. There are pros and cons of the wallet integrations and SDKs out there. Some of them are promoting certain wallets or chains, 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. Kap kunk ka. Great talk. Amazing, Rebecca.

Okay, let's ask some questions. Great talk. Amazing, Rebecca. Okay, let's ask some questions. If you guys have a question, 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 tooltips on mobile. What is this alternative? Because it's hard to use tooltips on mobile. That's a good question.

I've seen different patterns implement like a mobile version, which would be like a modal. Or like a bottom sheet, I guess, if it's a native app. Okay. Do you think wallet pop-ups... Oh, yeah, a lot of...

This is fair. Okay. Do you think wallet pop-ups... Oh, yeah, a lot of... This is fair.

Actually, what was the stat? Only 10% of the most popular dApps actually do have a mobile-optimized experience, so definitely it's an opportunity for us to build more responsive libraries. I think there are different use cases, right? There are some serious traders who prefer desktop. So my audits were desktop components, but clearly there's definitely a lot of need for mobile as well.

Sorry, the wallet pop-ups for approval. So the next question is, don't you need product market fit before you can consider UX? Oh, that is a great question. I definitely agree on that. And there was a really great talk 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. 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 users know they are using crypto?

Yeah, there are so many great topics about this. is should users know they're using crypto? Yeah, there are so many great topics about this or talks about this at this conference specifically. I think longer term as we're looking at onboarding the next billion, it's not necessarily what I shared today. It is abstracting it and making it so simple, probably likely behind a very simple interface.

Okay. Next question is about using tables on mobile. How do you approach that? There are various options, I guess. You could either stack...

I don't know. I'm not sure if I'm the best person to share this right now, but yeah, there are different patterns that you can look up. Okay. When do you think chain abstraction will be the new normal in DeFi? I wonder what's a hindrance.

What's the hindrance? I'm not quite sure about that. Is this... Who wrote this? Somebody?

What is hindrance? Yeah, like what is the hindrance of... What is preventing people from extracting the... Is somebody who asked this question here? Maybe...

What is preventing people from tracking? Oh, is somebody who has this question here? Maybe. Hmm. Okay, so this is kind of like the other question around it being, like all of the complexity being hidden.

Okay. like all of the complexity being hidden. Okay. Yeah, I'm with you. I think 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 you 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.

Next question is, should we be moving towards embedded wallets inside apps that are less portable or continue to push in portable horizontal wallets which are not perfectly suited for each app? Perfectly suitable for each app. Like MetaMask versus the wallets that you get inside of your application? Yeah, I watched one of the talks about this and I guess like right now it seems like there are some wallets like Privy and others that will create per Dapp but the vision I think is to consolidate across. The focus of this was DAP UX, not Wallet.

I think that's it for the time, for the Q&A. Thank you very much, Rebecca. Thank you everybody who asked questions and next talk is in five minutes. See you.