<p>Creating products that leverage blockchains or other types of distributed ledger technologies comes with many advantages (composability, privacy, resistance to censorship via decentralization, verifiability and trustlessness). However, it's important for web3 product designers and developers to consider the challenges that appear when users interact with blockchains, wallets and other specific aspects of these technologies. Asynchronous transactions, context switching between windows and wallet management creates confusion and friction if not handled properly. In this blog post, we'll explore some simple tips for solving these pain points. From incorporating contextual feedback to anticipating what can go wrong, these tips will help you create web3 products with intuitive and enjoyable user experiences.</p><h2>First experience and empty states</h2><h3>Don’t launch the wallet request immediately.&nbsp;</h3><p>We’ve all been there: you want to see what this new DEX is about, you open the app and (bam!) your browser jumps to a different window asking you to enter your Metamask password. This experience is frustrating. You just want to take a look. You still don’t trust your wallet to be connected to that product.</p><p>Wait until the user has had a chance to explore your product and understand what it is about. You can then prompt the user to connect their wallet at a natural point in the user flow, such as when they are ready to perform a transaction or access a feature that requires a wallet. This can help to build trust and give users a sense of what they can expect from your product.&nbsp;</p><p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fbestinweb3-lido-wallet-not-connected.webp?alt=media&amp;token=4bc9868a-9316-4046-bd0c-6e4eea384c07"></p><p><a href="https://app.bestinweb3.com/dashboard/defi/Lido" rel="noopener noreferrer" target="_blank">Explore all Lido screenshots</a></p><h3>Show data that doesn’t require a wallet</h3><p>Treat this as an opportunity to present your product in the best possible way. If possible, populate it with data that doesn't require a wallet to be connected, like token prices, volumes or anything available directly from the blockchain or other sources. For the sections that require the wallet to be connected, show a barebones structure, with thoughtful empty states. This is your chance to pique their interest.&nbsp;</p><p>An ingenious way to show what your product is about before the user connects their wallet is to “watch another wallet”. By entering an address, you’ll be able to see how the product behaves, in a read-only mode. Aave does it masterfully.&nbsp;</p><p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fbestinweb3-aave-watch-another-wallet.webp?alt=media&amp;token=e0d08c97-2a7e-4d53-9b23-f4d9840d0256"></p><p><a href="https://app.bestinweb3.com/dashboard/defi/Aave" rel="noopener noreferrer" target="_blank">Explore all Aave screenshots</a></p><p>Give them time to explore your product and understand what it is about. Once they are ready, they’ll be more likely to connect their precious wallet and interact with your product.</p><h2>Contextual and timely feedback</h2><h3>Show what happened, what’s happening, and what will happen.</h3><p>When a user initiates a blockchain transaction, it can take some time for the transaction to be processed. This depends on the network being used by the protocol. Not knowing how long the transaction will take or whether it has been successful is a perfect formula for creating FUD in your users.</p><p>To address this, you just need to walk your users through the transaction process. For example, you can display a loading indicator to let users know that their transaction is being processed. You can also provide updates on the transaction status, such as “sent”, "pending" or "complete". And if the transaction fails for any reason, you can provide a human-readable error message about what the problem was, and ideally, clear instructions on how to resolve the issue. A common practice is to provide a link to the transaction details in a blockchain explorer.</p><p>Most of the interactions with smart contracts, especially token-related ones (approve, swap, stake, deposit, withdraw, etc) can be solved following this common pattern:</p><p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fbestinweb3-feedback-loop.webp?alt=media&amp;token=0635417a-10ed-4b63-8c1d-35cfdd4cfa23"></p><p>It’s important to remember that you don’t need to prevent users from navigating away from this flow. You can create a “pending transaction” indicator somewhere in the UI, and then update it when the transaction is confirmed. Just don’t keep your users twiddling their thumbs while they stare at a loading screen.</p><h3>Chain feedback loops for complex transactions</h3><p>There are more complex smart contract interactions that might require extra context for the user, but it all boils down to the same core principle. For example, when multiple interactions with the wallet are required to complete an action, this pattern can be chained using a stepper. It will allow the user to anticipate the number of interactions with the wallet, and provide an easy way to identify the steps that are still required to go.&nbsp;</p><p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fbestinweb3-curve-stepper.webp?alt=media&amp;token=9fd67240-6a5f-47d1-a1d4-732464b4b0b1"></p><p><a href="https://app.bestinweb3.com/dashboard/defi/Curve" rel="noopener noreferrer" target="_blank">Explore all Curve screenshots</a></p><h3>Estimate cost and time of arrival</h3><p>If possible, giving an indication of time is also a great way to reduce the anxiety produced by not knowing how long the transaction will take. Even when an exact countdown can’t be provided, an estimated or average time to completion might be enough to reassure someone that their transaction wasn’t “lost” in the ether (no pun intended).</p><p>Finally, before sending the transaction, show the estimated fees. This will reduce uncertainty and potential rejected transactions. A simple breakdown of the different fees (blockchain, protocol, royalties, etc) will go a long way to provide enough transparency for the user to complete the action.</p><h2>Consider what can go wrong in the journey</h2><h3>Take care of potential "unhappy paths" gracefully.</h3><p>This could be part of the previous section, but it gets so often overlooked that it deserves its own space. The key idea is to anticipate and address potential problems that may arise in a user journey. Think of failed or rejected transactions, network discrepancies between your product and the user’s wallet, etc.</p><p>The first course of action is to enumerate all these potential pitfalls. Then, craft the recovery experience, including error or alert prompts with human-readable messages. The idea here is to inform users about what went wrong, and provide them with instructions on how to resolve the issue. For example, if a transaction fails, you can display an error message that explains why the transaction failed, what needs to be changed and how to try again.</p><h3>Avoid preventable errors.</h3><p>These preventable errors are transactions that are going to fail on the blockchain side because the smart contract requirements are not met. First, check these requirements. Then, validate them in the frontend. If there is a minimum or maximum amount, you need to have some fields selected, or you need a certain token to perform an action, the interface should prevent the user from initiating the transaction. You don’t have control over the users that interact directly with the smart contracts, but if the transaction is going to fail, it shouldn’t happen because the UI didn’t have enough checks. Don’t forget to provide enough context about what’s missing to meet said requirements.</p><h2>Facilitate wallet interactions from the UI</h2><p>If you require a user to change or add something in their wallet, create a shortcut directly from your product. They will just need to confirm the action in their wallet, and they’re done. You could help them switch networks, add a token to their assets or change accounts.</p><p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fbestinweb3-lido-add-tokens.webp?alt=media&amp;token=a390fbed-32ea-41ef-ba65-836bf1afc061"></p><p><a href="https://app.bestinweb3.com/dashboard/defi/Lido" rel="noopener noreferrer" target="_blank">Explore all Lido screenshots</a></p><h2>Summary and checklist</h2><p>In conclusion, improving the user experience for web3 products can be achieved through these simple and effective techniques. This list is not exhaustive, as general UX and usability practices still apply. Here is a checklist with the different tips mentioned in this article:</p><ul><li>First experience and empty states:</li><ul><li>Don’t launch the wallet request immediately.</li><li>Show data that doesn’t require a wallet.</li></ul><li>Contextual and Timely feedback:</li><ul><li>Show what just happened, what’s happening, and what will happen.</li><li>Chain feedback loops for complex transactions.</li><li>Estimate cost and time of arrival.</li></ul><li>Consider what can go wrong in the journey:</li><ul><li>Take care of potential "unhappy paths" gracefully.</li><li>Avoid preventable errors.</li></ul><li>Facilitate wallet interactions from the UI</li></ul><p>Save a ton of hours (and chain fees) in research and benchmarking. Check <a href="bestinweb3.com" rel="noopener noreferrer" target="_blank">bestinweb3.com</a> for examples of the most important crypto and web3 products out there.</p>

To improve the user experience of web3 products, designers and developers should consider the challenges users face when interacting with blockchains and other distributed ledger technologies. Strategies for improving the user experience include providing contextual feedback and anticipating potential issues.

Simple Tips for Improving the User Experience of Your Web3 Products

<p>This case study analyzes the journey a user would have to go through when swapping two tokens, using each of the top 20 DEXs and DEX aggregators (according to <a href="https://www.coingecko.com/en/exchanges/decentralized" rel="noopener noreferrer" target="_blank">Coingecko by 24h trading volume</a>). This case study will focus only on the atomic swaps, not on the limit order functionality. We will study the good, the bad and the ugly, and we will end up with a checklist with the recommendations to build the most user-friendly DEX for token swaps.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fcase-study-1-logos.webp?alt=media&amp;token=3c534c78-d686-49b8-8e92-3245ce9666cd"></p> <h4>TL;DR:</h4><p>The product is limited by the blockchain it uses. When it comes to the fastest, easiest UX and cheapest, the winner is Jupiter, a DEX aggregator operating in Solana. It serves as a great example of what a potential mainstream DeFi app could look like.</p> <h2>Key takeaways</h2> <ol> <li>Know (at all times) where you are in the process.</li> <li>No surprises, especially when it comes to fees.</li> <li>The product should do the heavy lifting.</li> <li>Avoiding pitfalls and managing recoveries.</li> </ol> <h2>What analyzing 20 DEXs looks like</h2> <p>The criteria for this case study has been the following:</p> <ul> <li>Test the top-20 DEXs and DEX aggregators (according to Coingecko), using the blockchain that was mentioned on their top-20 list. Here are the products that were analyzed:</li><ul>     <li class="ql-indent-1">Uniswap v3 (Ethereum).</li>     <li class="ql-indent-1">Curve (Ethereum).</li>     <li class="ql-indent-1">Balancer v2 (Ethereum).</li>     <li class="ql-indent-1">OpenOcean (Ethereum).</li>     <li class="ql-indent-1">PancakeSwap v2 (Binance Smart Chain).</li>     <li class="ql-indent-1">Uniswap v2 (Ethereum).</li>     <li class="ql-indent-1">Uniswap (Polygon).</li>     <li class="ql-indent-1">Uniswap (Arbitrum One).</li>     <li class="ql-indent-1">1Inch * (Ethereum).</li>     <li class="ql-indent-1">DODO (Ethereum).</li>     <li class="ql-indent-1">Sushi (Ethereum).</li>     <li class="ql-indent-1">Uniswap (Optimism).</li>     <li class="ql-indent-1">Orca (Solana).</li>     <li class="ql-indent-1">Jupiter (Solana).</li>     <li class="ql-indent-1">Trader Joe v2 (Avalanche).</li>     <li class="ql-indent-1">Slingshot (Canto).</li>     <li class="ql-indent-1">Quickswap v3 (Polygon).</li>     <li class="ql-indent-1">SUN.io (Tron).</li>     <li class="ql-indent-1">KyberSwap Elastic (Ethereum).</li>     <li class="ql-indent-1">SpookySwap (Fantom).</li>     </ul><li>Perform a simple swap of around $10, between two stable coins, usually between DAI and USDC (when DAI isn’t available, use USDT instead).</li> <li>Use the web apps on desktop, as the only tab on Google Chrome, on an approx 15Mb symmetrical internet connection.</li> <li>Use Metamask as the default wallet if possible. If not, the first recommended wallet for the protocol.</li> <li>The number of clicks starts counting right after the wallet is connected.</li> <li>The time is calculated from the moment the wallet is connected until the successful notification of the confirmed swap.</li> <li>The input token for the swap must not have been authorized previously. If this is required by the protocol, it will generate a fee.</li> <li>Transaction fees were checked in Etherscan and respective blockchains explorers for an accurate amount in the native token.</li> <li>The dollar cost is calculated by multiplying the transaction fee presented in the blockchain explorer (in the blockchain native token) by the price of the token on the 30/01/2023 in US dollars. With the following prices:</li><ul>     <li class="ql-indent-1">1 ETH = 1,590.13 USD</li>     <li class="ql-indent-1">1 BNB = 308 USD</li>     <li class="ql-indent-1">1 MATIC = 1.12 USD</li>     <li class="ql-indent-1">1 SOL = 24.16 USD</li>     <li class="ql-indent-1">1 AVAX = 20.11 USD</li>     <li class="ql-indent-1">1 FTM = 0.458854 USD</li>     <li class="ql-indent-1">1 CANTO = 0.40296 USD</li>     <li class="ql-indent-1">1 TRX = 0.062111 USD</li>     </ul><li>The “time to interactive” metric was taken from <a href="https://pagespeed.web.dev/" rel="noopener noreferrer" target="_blank">PageSpeed Insights</a> from Google.</li> <li>The UX scores are calculated using our Swap Tokens UX checklist.</li> </ul> <h3>The underlying network matters</h3> <p>The user experience can go as far as the intrinsic limitations of the chosen network allow. Products using L2s or “performance” blockchains allow for faster and cheaper transactions. There is also material impact in the UX, as different architectures allow for bundling transactions into one, having direct effects on the number of clicks needed to complete the swap.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fnetworks.webp?alt=media&amp;token=8242a8dd-34a6-4586-b5fa-378d91a6c3b3"></p> <h3>Speed of use</h3> <p>This graph shows the number of clicks required to complete a swap, from the least to the most amount of clicks.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fnumber-of-clicks.webp?alt=media&amp;token=6aa307be-cd03-44cf-b39c-3c6a1535d1e7"></p> <p>This graph shows the time, in seconds, to complete a swap in each of the products analyzed, from fastest to slowest.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Ftime-to-complete-swap.webp?alt=media&amp;token=b4a65bfa-0754-4f15-adff-412a1a3b52e1"></p> <h3>Fees and costs</h3> <p>There might be different fees when executing a swap, depending mainly on the underlying network. They will depend on multiple factors such as congestion of the network, current price of the network token, as well as how well optimized the smart contracts are. The typical fees are:</p> <ul> <li>Network fee for approving a token (usually only the first time or for a certain amount)</li> <li>Network fee for executing a swap.</li> <li>Liquidity provider fee. This fee is usually included in the exchange rate that is presented to the user.</li> </ul> <p>This graph shows the total fees required to perform a swap (including approving the input token if required), from cheapest to most expensive.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Ftransaction-fees.webp?alt=media&amp;token=9cadd7c0-075a-4e48-a0c5-f886ef009101"></p> <h3>How performant are they?</h3> <p>The following graph shows the time, in seconds, that takes for the different products to become fully interactive, in both desktop and mobile.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Ftime-to-interactive.webp?alt=media&amp;token=abc80320-63ce-4cb9-a1a0-a9b133b4048c"></p> <h3>Overall UX score</h3> <p>Using our Swap Tokens UX checklist, here is how the different products rank against each other, from the highest UX score to the lowest.</p> <p><img src="https://firebasestorage.googleapis.com/v0/b/bestinweb3.appspot.com/o/blogPostImages%2Fux-score.webp?alt=media&amp;token=638b8b2e-e351-40ae-abc2-ab99123c9dfd"></p> <h2>Building a better swap product</h2> <h3>1. Knowing where you are in the process.</h3> <p>It is essential that users are informed and aware of the status of their transaction at all times, and that any errors are communicated in a clear and human-readable manner. Misleading or unclear information can lead to confusion and frustration, especially when you are dealing with your own assets. The goal here is to reduce uncertainty, and provide enough useful information for users to understand the status of their transaction at every single point of the journey.</p> <h4>Explain advanced features</h4> <p>Consider the various options and potential confusion points that may arise during the swap process. One key aspect is to clearly communicate the functionality of advanced settings such as "Auto Router API" or "Expert Mode". This can be achieved by providing a tooltip with a simple explanation for each option. Additionally, the concept of “slippage” or “price impact” may be unfamiliar to some users and might require some description or links to additional resources.</p> <h4>Multiple transactions</h4> <p>This is heavily dependent on the underlying blockchain the product uses, but multiple transactions might be required to perform a swap. In this case, it is important to clearly show the steps in the user interface and to guide the user through the whole process. A typical pattern here is to use a stepper.</p> <h4>Pending transactions and loading states</h4> <p>Presenting data that comes directly from the blockchain might require some time to load. In these cases, avoid default labels, such as "not enough liquidity" while the data is being obtained. Instead, indicate the "loading" or "fetching" status with a UI indicator for this purpose.</p> <p>After confirming a transaction on the wallet, show an indication of a pending transaction, ideally with an explicit label like "Swap pending", and provide a link to etherscan or other blockchain explorers. Update the UI accordingly if more actions are required from the user.</p> <p>For a smooth transition and saving some clicks, the confirmation toast for pending or successful transactions can disappear automatically.</p> <h4>Successful transactions</h4> <p>When a transaction is confirmed by the network, provide a notification, toast, etc with a readable message like "Swap completed" and a link to the network explorer of choice. Also, update the visible balances in the UI.</p> <p>A great example from (XXX) is to clear the amount of the origin token’s field. If not, you might throw an error message to the user, literally after they have completed a swap.</p> <h4>Balance in the input token</h4> <p>If the balance of the origin token is 0, the field should highlight that and prevent the swap, or even the token approval from happening. Why would you want to pay fees to approve a token that you don’t have balance in? It might even be a good idea to just allow the user to select a token that exists in their wallet.</p> <p>Highlighting the input token field and disabling the swap or approve button should also happen when the amount exceeds the balance. A great opportunity to earn some extra fees is to provide a link to buying crypto with fiat. From the 20 products analyzed, only DODO is taking advantage of this.</p> <h5 class="ql-align-center">Clear communication of advanced features, transaction status, and error messages is key in reducing uncertainty and increasing user trust and understanding in web3 experiences. Ensure that this information is easily contextual, human-readable, and accurate.</h5> <h3>2. No surprises, especially when it comes to fees</h3> <p>One of the advantages of DeFi vs centralized products is the transparency and auditability of the elements that exist on-chain. However, due to different factors like network congestion and token price, fees can only be estimated in advance. To prevent unwelcome surprises, it is essential to provide these estimates before the swap process is initiated, including any additional costs in case of needing multiple transactions.</p> <h4>Consider the different types of fees</h4> <p>There might be multiple types of fees. The most common are:</p> <ul> <li>Network fee for approving a token. This usually happens the first time you are swapping a certain token and up to a certain amount.</li> <li>Network fee for swapping two tokens.</li> <li>Swap rate: provide an estimate of the swap rate, along with a link to the price chart for further information. This rate might change often, so it is recommended to provide some indication of the period the swap rate is available for, and an indication of the updated rate. If the swap operation is done using multiple pools, we provide a breakdown of this information in a simple and digestible way.</li> <li>Liquidity provider fee. Some exchanges might deduct a percentage of the amount swapped in order to incentivize liquidity providers directly. This fee is sometimes included in the swap rate, making it virtually unnoticeable for a regular user. A more transparent approach would be to disclose this amount next to the swap rate estimate.</li> </ul> <p>In case there are different swap options available, such as fast vs cheap, a cost estimate should be provided to facilitate the decision between the options.</p> <h4>Confirmation step</h4> <p>A good practice is to show a confirmation step before the swap is executed. This will include all relevant information such as swap rate, slippage, gas fees, liquidity provider fees, etc. Some exchanges allow the user to disable this step, by selecting the “Expert Mode”. If that’s the case, be sure to notify the user of the implications of this option.</p> <h5 class="ql-align-center">Break down all the fees, provide accurate estimates and display them clearly before executing a swap.</h5> <h3>3. The product should do the heavy lifting</h3> <p>In order to facilitate the swap process for the user, you can implement several features to streamline the experience as much as possible. The goal is to help the user complete their task in the least amount of time and clicks.</p> <h4>Select the tokens quickly</h4> <p>The most frequently used tokens should be selectable without having to search or scroll, by just having a group of buttons at the top of the token list. Then, the list for selecting the input token should be ordered by descending balance. Another potential shortcut could be the implementation of a favorite tokens list where a frequent user can curate their own list of tokens.</p> <p>Additionally, a button to change the direction of the swap (from USDC &gt; ETH to ETH &gt; USDC) can facilitate the process.</p> <h4>Enter the amount quickly</h4> <p>Entering the amount by typing on the keyboard might be too much effort when you just want to swap the entire balance for a certain token. For those moments, providing the “maximum available balance” option will save a few keystrokes. You could even go more granular and offer a 25%, 50% and 75% option. This can be particularly useful for users who intend to provide liquidity to a pool and need a pair of tokens in a particular ratio. It's important to keep in mind that if the network token is selected, the maximum amount should be calculated taking into account the estimated gas cost for the swap.</p> <p>And in case the user wants to start again, or enter a different amount, a button to quickly clear the field and reset the amount to 0 is another desired shortcut.</p> <h4>Access the latest transactions</h4> <p>For those moments when you want to double check some information about the recently completed swap, a list of the latest transactions should be easily accessible from the swap view. This provides an easy entry point to see all previous transactions, track their history and dig deeper in the network explorer if necessary.</p> <h4>Text interface</h4> <p>As a bonus point, consider creating a command-line type interface for more advanced users. This will allow them to enter the desired amount and token in a format such as "10 DAI to USDC", and speed their process significantly.</p> <h5 class="ql-align-center">Speed and convenience matters, especially for recurrent users. Shaving a few clicks here and there will make the whole experience significantly better when you have to repeat the same process over and over again.</h5> <h3>4. Avoiding pitfalls and managing recoveries</h3> <p>Nothing erodes trust in a product more than committing mistakes or finding pitfalls that could have been avoided.</p> <h4>Guarding users from scam tokens</h4> <p>To protect users from potential fraud, only allow them to select tokens from pre-approved lists from trustworthy sources. This ensures that users are only able to swap for legitimate, reputable tokens and reduces the risk of accidentally selecting a scam or fraudulent token.</p> <h4>Prevent reverted transactions</h4> <p>Smart contracts have conditions that must be met for the transactions to go through. These conditions are known and should be validated in the frontend of the product, preventing transactions that would fail. Token amounts, ownership requirements or other conditions must be carefully considered and notified to the user through the UI with clear and contextual messaging and well crafted flows.</p> <h4>Show errors or alerts in a human-readable way</h4> <p>Important to present errors in a human readable way, with a path to resolution. For example, if there's an error regarding the inability to estimate gas, indicate how the user can set it up on their wallet; If there is not enough liquidity in the pool, be explicit about it, etc.</p> <p>Also, consider the interactions that happen with the wallet and match the text in the UI with the action that was taken. For example, if the user rejects a transaction directly from their wallet, provide a notification with a simple message indicating that the swap was canceled by the user.</p> <h2>Token Swap UX Checklist</h2> <p>For scoring the UX of the 20 DEXs that were analyzed in this case study, we created this checklist, based on the key takeaways presented above. The list is ordered following the typical swap flow, where you select the tokens, enter the amount and execute the necessary transactions.</p> <p>Each of the items have an importance factor using the following scale: 1 (nice to have), 2 (important) or 4 (vital); -1 (small problem), -2 (medium problem) or -4 (big problem).</p> <p>Then, by answering "Yes" or "No" for each item in the list, a score is populated based on the importance factor. If the answer is "Yes", the number of points that appear in the "Factor" column will be added to the "Score" column. If the answer is "No", the score for that row will be 0. The total score is the summation of all scores.</p> <p>If you want to check it out for yourself, you can download it for free in PDF or access it in <a href="https://docs.google.com/spreadsheets/d/1-pKtCOQVqL11pjVEdC1stguqocGnLlYpElbDNJnlyYg/edit?usp=sharing" rel="noopener noreferrer" target="_blank">Google Sheets</a>.</p> <h2>Conclusion</h2> <p>There is an opportunity for DeFi to dethrone the current financial incumbents, and even the non-crypto fintech disruptors. However, these products still have a few quirks that prevent the general public from using them regularly. Building user experiences ready for prime time will facilitate the next wave of adoption into DeFi.</p> <p>DeFi products will be limited by the underlying blockchain they are built upon. Jupiter, a DEX aggregator operating in Solana stands out as the fastest, easiest UX and cheapest product of the group. It can offer a window into the future of mainstream DeFi products.</p> <h4>Footnotes:</h4> <ul> <li>Nothing presented here should be considered financial advice. The purpose of this case study is to understand the benefits, drawbacks, limitations, and opportunities that exist when building DeFi products, and to provide guidelines for building better experiences.</li><li>ApeX Pro was in the top 20 DEXs. However, because it’s more of a derivatives exchange, and doesn’t offer atomic swaps, we analyzed the DEX aggregator 1inch instead.</li></ul>

For DeFi to go mainstream, it needs to offer a user experience that can stand a fighting chance against centralized exchanges or alternative fintechs. Will there be cheaper, faster and better DeFi products than centralized alternatives?

DeFi going mainstream by offering cheaper, faster and better products than centralized alternatives: Swaps

Swapping tokens with defi products

Simple Tips for Improving the User Experience of Your Web3 Products