UX Audit of Uniswap V3: 10 Usability Issues and Redesign Ideas

May 10, 2023

Introduction:

Decentralized finance (DeFi) has gained significant traction in recent years, and Uniswap has emerged as a leading player in the field. However, the platform's user experience has a huge gap. Despite its popularity, this platform is clearly not designed for novice users.

What is Uniswap?

As the largest decentralized exchange operating on the Ethereum blockchain, Uniswap enables traders to trade various cryptocurrencies without intermediaries and invest in liquidity pool to earn trading fees. Uniswap V3, the latest platform version, introduced concentrated liquidity and multiple fee tiers, enabling liquidity providers to specify a price range and users to choose their preferred fee tier.

Case study overview

We evaluate the Uniswap V3 web interface to identify fundamental usability issues. Similar to the previous UX Audit on Zapper, this study aims to share our knowledge with our community and initiate discussion around optimizing the UX of Web3 applications.

Product: Uniswap V3

Platform: Web

Template used: Heuristic Evaluation Checklist

Evaluation flow:

  1. Connect Metamask wallet Β 
  2. Swap token
  3. Invest in liquidity pool
  4. Check your position performance and profit
  5. Explore token statistics

1. Confusing modal - Transaction submitted

Figure 1: Confusing modal - Transaction submitted
Figure 1: Confusing modal - Transaction submitted

After confirming a swap on Metamask, a modal appears with "Transaction submitted", with options to "Add MATIC" and "view on Block Explorer". It's unclear what is the primary action the user should take on this modal.

#Heuristic violated: Aesthetic and minimalist design

There are four different actions inside the modal window. The information hierarchy is also strange, which can confuse users about the primary action.

#Heuristic violated: Recognition rather recall

The β€œAdd MATIC” action does not promote recognition. Users may not always recall what it means, let alone remember that it's only necessary if they don't already have the token in their wallet.

πŸš€ Recommendation:

It is helpful to understand the user's workflow when adding a new token to their wallet. Consider reorganizing the hierarchy of options or reducing their number in the modal.

2. Disable Swap - Confusing error message within CTA

Figure 2: Confusing error message within CTA
Figure 2: Confusing error message within CTA

We noticed a confusing user experience. Uniswap shows the error message within the "Call to Action" button. Specifically, when attempting to swap tokens without sufficient funds, Uniswap displays an error message within the disabled button. What is more confusing, the button text sometimes shows "Swap"; sometimes it shows "insufficient MATIC balance" or "Insufficient liquidity for this trade."

#Heuristics Violated: Consistency and Standards

Showing an error message within the CTA button violates the design principles. A button has limited space to explain errors. Mixing the primary button with different error messages and states is confusing.

#Heuristics Violated: Help users recognize, diagnose, and recover from errors

Disabled buttons don't explain what's wrong. They communicate that something is off, but very often, it's just not good enough. Some users may wonder why they can't swap the tokens without an error message.

πŸš€ Recommendation:

  • Following design principles, buttons should indicate when a user can trigger an action through a clear state (Enabled or disabled). Use a concise text label for an action button.
  • Offer clear error messages with constructive advice to help the user resolve this issue.

3. No easy way to swap tokens and deposit them in the pool

Figure 3: No easy way to swap tokens and deposit them in the pool
Figure 3: No easy way to swap tokens and deposit them in the pool

Uniswap places the token swap and liquidity pool investment features at the same level of the information architecture. While the token swap feature is easily accessible, there is no straightforward method to swap tokens and deposit them into the pool.

#Heuristics Violated: Flexibility and efficiency of use

The lack of flexibility for liquidity investors can be frustrating. If they need to swap token during the investment process, they have to redo the entire investment. The whole flow would be disrupted, and the market price and gas fees would be revised.

However, this might be a design compromise considering Uniswap prioritizes token swapping. How can we improve the user experience within this compromise?

πŸš€ Recommendation:

To enhance the liquidity provider experience, Uniswap can consider implementing the following measures on the pool page:

  • Remind users to keep enough tokens to keep up with market prices.
  • Recommend a trusted calculator (e.g., Uniswap Fish) to assist liquidity providers with decision-making.
  • Explain how the price range impacts deposit amounts and encourage users to consider the tokens they hold.

4. Misleading feature to maximize the deposit amount

Figure 4: Misleading feature to maximize the deposit amount
Figure 4: Misleading feature to maximize the deposit amount

The "Max" deposit button on the pool page can mislead users. While it allows for a quick and easy way to deposit the maximum amount of funds, users should be mindful to reserve some funds for gas fees.

#Heuristic violated: Flexibility and efficiency of use

There is no information about the "Max" deposit button. The button could lead to errors if users are not careful about reserving funds for gas fees. Additionally, the required amount for gas fees can vary depending on various factors.

πŸš€ Recommendation:

Remind users to be cautious when using the "max" deposit button. Users should be aware that gas fees can fluctuate and vary based on price range and may not have enough funds for the transaction after maximizing the amount. Providing this information to users can help them avoid costly mistakes.

5. Pool price moves out of range - Confusing transaction failure

Figure 5: Pool price moves out of range
Figure 5: Pool price moves out of range

The token price can change during the liquidity pool investment process, which can cause the pool price to move out of range. As a result, users may face a failed transaction on Uniswap.

#Heuristic violated: Help users recognize, diagnose, and recover from errors

There is no message or warning to inform users clearly of what caused the failed transaction. This can cause frustration and confusion because users must redo the entire process without understanding why.

Β  Β  Β  Β  Β 

πŸš€ Recommendation:

Figure 6: Example of warning message on Uniswap pool page
  • Display a visible warning message in the interface when the pool is out of range. The message should prompt users to update their price range, e.g. β€œThe market price is outside your specific range - please update your price range”
  • Since this is a common scenario, consider including this in documentation to educate users.

6. Unclear error message for a new pool

Figure 7: Unclear error message for a new pool

On Uniswap, users can create a new pool if one isn't already available. However, when users select a non-existing pool, it shows an error message. The message reads: "This pool must be initialized before you can add liquidity. To initialize, select a starting price for the pool. Then, enter your liquidity price range and deposit amount. Gas fees will be higher than usual due to the initialization transaction.

#Heuristic violated: Help users recognize, diagnose, and recover from errors

The error message displayed in this scenario is lenghty and not easy to understand.

πŸš€ Recommendation:

Provide a clear error message that explicitly indicates that the pool is unavailable, and give advice that caters to novice users and users who wish to initiate a pool. In addition, consider using hypertext links to connect users to another page with explanations and steps to create a new pool.

7. Inconsistent display of price range - Pool & Position Pages

Figure 8: Inconsistent display of price range on Pool & Position Pages

The pool page in Uniswap allows users to set up the price range based on USDC per MATIC, but the pool performance page displays the price range in the format of MATIC per USDC by default.

#Heuristic violated: Consistency and standards

This inconsistency in information display can confuse users.

πŸš€ Recommendation:

Maintain consistency in showing the information so users can comprehend it easily.

8. Missing Y-axis in price graph

Figure 8: Missing Y-axis in price graph
Figure 9: Missing Y-axis in price graph

It is common to interpret a graph with a horizontal (X) or vertical (Y) axis. Uniswap removes the Y-axis from the graph to make the interface look minimal.

#Heuristic violated: Match between the system and the real world

This decision could disrupt the common behavior of users interpreting a graph. Users may find it even more challenging to interpret the graphs without these common reference points as they increase the timeframe.

πŸš€ Recommendation:

Figure 10: Graph from CoinMarketCap

Reevaluate the way Uniswap present the graph. Make sure to include all the important elements that users need.

9. Lack of guidance and proactive help on interface

Uniswap caters primarily to experienced users with its minimalist design. There is lack of instructions and proactive help to guide users in navigating its interface. They assume all DeFi users to know way around Uniswap.

#Heuristic violated: Help and documentation

Firstly, this may present challenges for new DeFi users and users who are unfamiliar with Uniswap's features and processes. Without clear instruction and proactive help, Uniswap potentially excluding and frustrating those who need guidance. Even advanced users can encounter issues. They will need in-context help and guidance on the interface.

πŸš€ Recommendation:

  • Include basic instructions on the interface, rather than relying solely on separate documentation that requires additional effort to locate.
  • In additionally, offer timely proactive help to users when necessary. Remember to keep help content relevant to the context, concise, and easy to scan.

10. Confusing card component - Mixed onboarding and navigation purpose

Figure 10: Confusing card component on Uniswap homepage
Figure 11: Confusing card component on Uniswap homepage

On the homepage, the card components seem to serve as an onboarding, but the component is also serve as navigation. Β 

Onboarding: The "Buy Crypto" and "Build dApps" cards lead to instructions,

Navigation: The "Swap Token", "Trade NFTs", and "Earn" cards direct users to feature pages.

Additionally, the "Build dApps" card is irrelevant to the homepage.

#Heuristic violated: Consistency and standard

Users expect similar elements to behave the same in a website.The inconsistency can cause confusion.

πŸš€ Recommendation:

  • Be clear about the primary personas and goal of the application users. Ensure that the components designed are tailored to their needs.
  • Remove the β€œBuild dApps” card component from the home page because it is irrelevant to users.
  • Be consistent in using the card component. User can be easily confused if some cards lead to information and some navigate to the feature.

Conclusion

To sum up, our analysis revealed specific aspects of Uniswap's design that could be improved to enhance the user experience. While the platform adheres to the minimalist design trend, it falls short of meeting users' needs. To address this, we recommend that Uniswap provide better guidance to its users proactively and reactively. Proactive support would involve offering contextual information when necessary, while reactive support would ensure that users can locate documentation easily when troubleshooting. By implementing these recommendations, Uniswap can enhance its user experience and remain a preferred decentralized trading platform.



✨Thanks to my teammate, Ashley, for providing invaluable designer insights.

🧐 Have more questions on the UX of DeFi products?

Talk to the blockchain UX experts from UXBoost Now!
‍

Read More:

‍

About the Author

Valentinie Wong

Valentinie is a UX researcher with a background in Cognitive Science. She has experience researching different industries, from E-government services, credit bureau, UX learning platforms, blockchain, food delivery, etc. For her, there is nothing more rewarding than seeing how user research can inspire and shape products that solve real user problems.

‍

‍

‍