As the Web3 industry grows, more and more users are buying and investing in assets on various exchanges and platforms. Asset management platforms are crucial in the crypto ecosystem, providing users with powerful tools to manage their digital assets easily and efficiently. In addition, some platforms also offer features to browse the complex and rapidly evolving spectrum of web3.
Zapper is a powerful asset management platform created by merging DeFi Zap and DeFi Snap. It initially focused on helping users enter and exit DeFi protocols directly through its dashboard. It also acted as a web3 portfolio tracker, bridge hub, and decentralized exchange aggregator. In 2022, Zapper underwent a major upgrade with the release of its V2 (zapper.xyz). It now offers an easy-to-use explorer for discoveringr trending NFT, DeFi, and DAO information. Besides that, Zapper is available on web and on mobile for both Android and iOS.
We conducted a UX audit on the Zapper web interface to identify fundamental usability issues. This study aims to share our knowledge with our community and initiate discussion around optimizing the UX of Web3 applications.
UX Audit is a method that helps identify usability issues in a user interface by evaluating it relative to the 10 usability heuristics developed by Jakob Neilson. This methodology enables people to quickly and accurately identify usability issues, even without user research data. However, it's important to note that this methodology differs from research methods such as Cognitive Walkthroughs or Usability Testing. Each methodology has its pros and cons. Therefore, we strongly recommend complementing a UX audit with other research methods to understand your users’ needs and behaviors to find appropriate solutions for your product.
Product: Zapper
Platform: Web
Template used: Heuristic Evaluation Checklist
Evaluation flow:
# Heuristics Violated: Help and Documentation
There is no onboarding to guide users on how to use the Zapper web application. When users first launch the interface, there is only limited guidance on the "Connecting wallet" step. This can be a frustrating experience for new users who are unsure how to get started.
🚀 Recommendation:
A self-explanatory onboarding experience is essential for novice users to learn an interface and understand your product's value. Including informative content and a few guiding actions can help retain users.
# Heuristics Violated: Help and Documentation
Unfamiliar blockchain terminology and the complexity of blockchain products are known challenges for mainstream users. In Zapper, there is a lack of instructions and contextual information to help users perform a task. On top of that, much of the information displayed has no explanation.
For example, there are things in Blockchain that don't align with the traditional mental model of mainstream users:
🚀 Recommendation:
There should be some basic instructions in the app, not just on separate documentation requiring locating effort. Whenever necessary, provide timely, contextual help to users.
# Heuristics Violated: Help and Documentation
The Metamask wallet option is not available on the wallet options list, and it's not clear if this is because of a bug or if it's unsupported. To use the Metamask option, users have to click on the Metamask web extension and allow the page to reload. However, most users may not know about this solution, making it difficult for them to access this wallet option.
🚀 Recommendation:
If this is an avoidable issue with the Metamask extension or blocknative, offer some guidance to users. Consider showing an inactive UI option with a short explanation when a wallet isn't available.
# Heuristics Violated: Error Prevention
The Zapper interface has an element we have not seen before - a double network selector. There is a default “Network selector” feature on the top navigation bar and a page-specific network selector. They are shown on both the Swap and DeFi pages.
However, there is no clear explanation provided about these two features, and it is unclear whether they are the same or different. If they are the same feature, why is the list of networks different for each selector? Why does it have to show twice on the page? If users misunderstand that they must select the network twice when switching between them, it could result in an error or confusion.
🚀 Recommendation:
Reevaluate the primary location for interacting with the networks and consider removing the overlap.
#Heuristic violated: Visibility of system status
During a token swap, users need to complete a token approval transaction, which incurs a gas fee. However, the details about this extra transaction are only provided in a separate document that can be accessed by clicking on the "What is an approval?" link. Users might overlook the information and only realize it after they approved the permission request. Additionally, they may not understand why they need to give permission or why there is a fee associated with the transaction.
Because anything involving a gas fee can be sensitive, a lack of information can lead to trust.
🚀 Recommendation:
Before users approve the permission request, communicate to users that token approval costs gas fees and how much it costs. This is to reassure users that they know what will happen to their actions.
#Heuristic violated: Error prevention
Although the token listing on the platform is verified based on community-listed tokens, it can still be confusing for users to see both verified and unverified tokens. In the context of cryptocurrencies, verified tokens are those that have been officially approved and listed on reputable exchanges. In contrast, unverified tokens have not undergone the same level of scrutiny and may be riskier to invest in.
If a user clicks on an unverified token, they may encounter an error message stating "Impossible swap: there is not enough liquidity." The message just explains that there is not enough trading volume or liquidity for that particular token to trade.
🚀 Recommendation:
It may be helpful to distinguish between verified and unverified tokens clearly and to provide additional information about the risks associated with investing in unverified tokens. It can simply be a tooltip.
#Heuristic violated: Visibility of system status
Zapper has a cool social connectivity feature called "Explore Wallet," which allows users to follow and watch a wallet along with the list they create. By default, users can view all the information of the popular account without having to follow it.
After following the wallet, users are brought back to the account page with only a change in button status, nothing else. There is no communication telling users what to expect after following the account. Will the account show up in their feed? Do they get notifications for any changes in the account? There is no information about it.
🚀 Recommendation:
Communicate clearly to users what happens next after they follow a wallet. The predictability of the interaction builds trust not only in the website or app but also in the brand.
#Heuristic violated: Consistency and standard
We noticed that different DeFi protocols in Zapper have different page layouts. While protocols may differ in terms of their assets and names, presenting them in vastly different layouts can be confusing for users. Imagining how difficult it can be to view and compare information on visually very different pages to decide the vault to invest in.
🚀 Recommendation:
If possible, consider a template that will work to show different protocol data.
#Heuristic violated: Recognition rather than recall, Consistency and standard
Zapper has a wallet bundle feature allowing users to group and organize wallets they want to monitor. However, many users might not understand the purpose of this feature. Adding to the confusion, there is a “Create list" feature on “My profile” page that appears to be quite similar.
When creating a bundle, the flow is something like this:
Add a bundle >> Add bundle name >> Search /select a wallet to include >> Save
When creating a list, the flow is something like this:
Create a list >> Add list name >> Search/ add an account to include >> Save
There are no apparent differences between these 2 features. Users should not have to wonder if the 2 features are the same.
🚀 Recommendation:
Reevaluate the "Bundle" and "Create List" features to clarify their respective purposes. On top of that, provide clear instructions to help users understand how to use the wallet bundle feature.
#Heuristic violated: Recognition rather than recall
The wallet bundle has the options to mark names/addresses as "Favourite" and "Following". However, it's unclear what the differences are between these two options. Both actions seem to add the address to the user's address book, with no apparent differences. This can be confusing for users who may not understand the purpose of these options.
🚀 Recommendation:
Reevaluate the "Favourite" and "Following" features, and consider making them clear and easy to differentiate from each other.
#Heuristic violated: Consistency and standard
The "My profile" page and the "Popular accounts" page in Zapper both feature two copy icons. One icon is to copy the address, while the other is to copy the account link. However, it's unclear why Zapper uses the same icons for different purposes on a single page. This is an uncommon usage of icons and can be confusing for users who may not immediately understand their intended functions.
🚀 Recommendation:
Look up the iconography in the UI design system. It helps you to understand the meaning and usage of different icons, allowing you to use them more effectively.
#Heuristic violated: Consistency and standard
We noticed the inconsistency in the design across the Zapper platform. Below are the 2 prominent examples:
The error messages displayed on the DeFi pages feature red text and a red background, while error messages displayed on the "Popular Account" pages consist of white text on a black background with a red border. This inconsistency in the design of error messages can cause confusion for users and may lead to some users overlooking or missing the error altogether.
The Swap page displays the token abbreviation under the swap section, while the "Top Token Listing" beside it displays the full token name. Such inconsistency in showing the token name can confuse users.
🚀 Recommendation:
Maintain consistency in designing a website to improve learnability. Particularly for error messages, consistency helps users quickly identify and resolve issues.
In conclusion, we identified areas of improvement that would enhance Zapper's user experience and reduce the barriers of Web3 applications for mainstream users. To achieve this, we recommend that Zapper primarily focuses on providing users with better guidance and contextual help. This improvement ensures that users do not have to leave the app to find explanations or figure out how to complete a task. Even during the UX audit, we had to do back-and-forth research to understand why specific actions were happening and what the information meant.
By providing clear and concise guidance, Zapper can ensure a smoother user experience and onboard even more users to their platform.
❗ Disclaimer: Please note that Zapper's interface is subject to constant change. Therefore, the interface you see at the time of viewing this content may look different from the one described.
✨Thanks to my teammate, Celine, for providing invaluable designer insights.
Talk to the blockchain UX experts from UXBoost Now!
Read More:
.png)
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.
