Swapping tokens with defi products

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 Coingecko by 24h trading volume). 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.

TL;DR:

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.

Key takeaways

1. Know (at all times) where you are in the process.
2. No surprises, especially when it comes to fees.
3. The product should do the heavy lifting.
4. Avoiding pitfalls and managing recoveries.

What analyzing 20 DEXs looks like

The criteria for this case study has been the following:

• 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:
• Uniswap v3 (Ethereum).
• Curve (Ethereum).
• Balancer v2 (Ethereum).
• OpenOcean (Ethereum).
• PancakeSwap v2 (Binance Smart Chain).
• Uniswap v2 (Ethereum).
• Uniswap (Polygon).
• Uniswap (Arbitrum One).
• 1Inch * (Ethereum).
• DODO (Ethereum).
• Sushi (Ethereum).
• Uniswap (Optimism).
• Orca (Solana).
• Jupiter (Solana).
• Trader Joe v2 (Avalanche).
• Slingshot (Canto).
• Quickswap v3 (Polygon).
• SUN.io (Tron).
• KyberSwap Elastic (Ethereum).
• SpookySwap (Fantom).
• Perform a simple swap of around $10, between two stable coins, usually between DAI and USDC (when DAI isn’t available, use USDT instead).
• Use the web apps on desktop, as the only tab on Google Chrome, on an approx 15Mb symmetrical internet connection.
• Use Metamask as the default wallet if possible. If not, the first recommended wallet for the protocol.
• The number of clicks starts counting right after the wallet is connected.
• The time is calculated from the moment the wallet is connected until the successful notification of the confirmed swap.
• The input token for the swap must not have been authorized previously. If this is required by the protocol, it will generate a fee.
• Transaction fees were checked in Etherscan and respective blockchains explorers for an accurate amount in the native token.
• 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:
• 1 ETH = 1,590.13 USD
• 1 BNB = 308 USD
• 1 MATIC = 1.12 USD
• 1 SOL = 24.16 USD
• 1 AVAX = 20.11 USD
• 1 FTM = 0.458854 USD
• 1 CANTO = 0.40296 USD
• 1 TRX = 0.062111 USD
• The “time to interactive” metric was taken from PageSpeed Insights from Google.
• The UX scores are calculated using our Swap Tokens UX checklist.

The underlying network matters

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.

Speed of use

This graph shows the number of clicks required to complete a swap, from the least to the most amount of clicks.

This graph shows the time, in seconds, to complete a swap in each of the products analyzed, from fastest to slowest.

Fees and costs

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:

• Network fee for approving a token (usually only the first time or for a certain amount)
• Network fee for executing a swap.
• Liquidity provider fee. This fee is usually included in the exchange rate that is presented to the user.

This graph shows the total fees required to perform a swap (including approving the input token if required), from cheapest to most expensive.

How performant are they?

The following graph shows the time, in seconds, that takes for the different products to become fully interactive, in both desktop and mobile.

Overall UX score

Using our Swap Tokens UX checklist, here is how the different products rank against each other, from the highest UX score to the lowest.

Building a better swap product

1. Knowing where you are in the process.

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.

Explain advanced features

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.

Multiple transactions

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.

Pending transactions and loading states

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.

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.

For a smooth transition and saving some clicks, the confirmation toast for pending or successful transactions can disappear automatically.

Successful transactions

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.

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.

Balance in the input token

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.

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.

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.

2. No surprises, especially when it comes to fees

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.

Consider the different types of fees

There might be multiple types of fees. The most common are:

• Network fee for approving a token. This usually happens the first time you are swapping a certain token and up to a certain amount.
• Network fee for swapping two tokens.
• 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.
• 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.

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.

Confirmation step

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.

Break down all the fees, provide accurate estimates and display them clearly before executing a swap.

3. The product should do the heavy lifting

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.

Select the tokens quickly

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.

Additionally, a button to change the direction of the swap (from USDC > ETH to ETH > USDC) can facilitate the process.

Enter the amount quickly

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.

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.

Access the latest transactions

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.

Text interface

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.

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.

4. Avoiding pitfalls and managing recoveries

Nothing erodes trust in a product more than committing mistakes or finding pitfalls that could have been avoided.

Guarding users from scam tokens

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.

Prevent reverted transactions

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.

Show errors or alerts in a human-readable way

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.

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.

Token Swap UX Checklist

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.

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).

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.

If you want to check it out for yourself, you can download it for free in PDF or access it in Google Sheets.

Conclusion

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.

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.

Footnotes:

• 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.
• 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.