Solving 7 Major DeFi Pain Points With Web3 UX-2023

Decentralized Finances (DeFi) have been gaining mass reach since 2018 but it is still not ready for them. For mass adoption, how easy should the application’s User Experience be? “Well, it should be smooth enough so my grandma can use it.” -Izzul Syazwan, a Web3 UX advocate. 

DeFi, which exists as a promising alternative to traditional finance, faces seven key challenges that hinder its widespread adoption:  

  1. No Guided Tutorials
  2. Money laundering and Safety Measures
  3. Tutoring on Gas Fee and Implications
  4. Wallet Delays 
  5. Error Messages with no clarity
  6. Missing Stability Visualization
  7. Knots of Networks

No Guided Tutorials

“We fear what we do not understand” 

Jargon like DAPPs, DEX, gas fee, slippage, etc. is too technical for non-tech savvy people to begin with. And seeing crypto platforms that are graph-heavy with blue UI–straight out of futuristic movies–can feel ‘alien’ to older generations. 

Blue Dashboard Screen
Screen DeFi UX

Letting the user blindly walk around the complicated platform, figuring things out on their own or getting tangled in jargon is daunting. 

UX Solution:

Walkthroughs or guided tutorials for first-time or returning users help them understand the flow, following updates or complicated steps to perform rather easily.  

Transferto.xyz

TransferTo includes some video tutorials on hover. In the clip above, you can see a video explaining how to disconnect your wallet. One step beyond a standard tooltip.

Another engaging strategy implemented by StarGate is to let the users switch to walkthrough mode and to guide them on the time it takes for the token to exchange by providing a cool animation. 

Stargate

Money laundering and Safety Measures

With everyone allowed to participate in DeFi, it is very easy for criminals and terrorists to launder money and finance their terrorism and criminal operations. It should be controlled and under surveillance. However, some UX operations to tackle the Money Laundering:

UX Solution 1: Decentralized Identity and KYC/AML Integration

Implement decentralized identity solutions and streamlined KYC/AML processes to ensure user accountability and compliance with regulations, while maintaining user privacy.

UX Solution 2: Enhanced Transaction Transparency

Develop user-friendly tools that enable users to easily trace transactions, addresses, and interactions, enhancing visibility and enabling quick identification of suspicious activities.

UX Solution 3: Collaborative Governance

Establish decentralized governance models involving stakeholders and regulatory bodies to collectively set rules and standards, alongside real-time reporting features for users to flag potentially illicit transactions.

Check out our detailed UX Audit for Metamask

Educating On Gas Fee & Implications

Swapping tokens and getting declines due to not having enough fees to complete other transactions can be a frustrating situation. 

UX Solution:

To make your swapping experience smoother, educate the users on how much gas fee will be consumed additionally how much is left/ if it is enough for another transaction or not. 

Balancer offers a helpful feature. When you swap some of the native tokens, like Ethereum, Balancer calculates how much will remain in your wallet after the swap. It also checks if the remaining amount will be sufficient to cover the required gas fees for future transactions. This information is presented to you through a simple progress bar and message displayed in traffic light colors.

By providing this user-friendly interface, Balancer ensures that you are aware of the implications of your token swap. You can easily see whether you will have enough tokens and gas fees to continue your transactions after the swap. This way, you can avoid any frustrating situations of being left with insufficient funds.

Wallet Delays 

The challenge of wallet delays in updating balances within the Web3 ecosystem poses a significant hurdle to mass adoption. While early adopters might tolerate such inconveniences, mainstream users expect seamless experiences. Current excuses like “building the future of finance” no longer suffice. Decentralized wallets, connected to various protocols, struggle with delayed balance updates due to technical complexities, fostering fear and uncertainty among users.

UX solution:

Enhancing network performance, improving user interface communication by providing timely notifications about slowdowns, and exploring decentralized notification systems like EPNS, which could bridge the gap between users and their wallets, fostering confidence and trust in the ecosystem.

Error Messages with clarity

DeFi platforms often fail to provide clear and informative error messages during transactions or interactions with smart contracts. Bar notifications or relying on external tools can leave users confused when errors occur, as these messages are fleeting and lack prominence. Users are left uncertain about what went wrong, hampering their overall experience.

UX Solution:

Implement modal pop-ups for errors. These attention-grabbing modals not only highlight errors but also offer user-friendly instructions for resolution, enhancing clarity and transparency.

DeFi platforms can adopt Spookyswap’s approach by using modal pop-ups for every state, including errors. This approach ensures users are well-informed and reduces frustration, fostering trust and confidence in DeFi platforms.

Provide Stability Visualization

In DeFi platforms, demonstrating stability in each currency poses a crucial challenge. When swapping tokens on a DEX, transactions typically involve multiple swaps, and some DEXes show this route, which can be especially valuable when dealing with stablecoins as choosing one stablecoin over another might yield a better result. However, in a rapidly changing token price environment, users might end up with a different amount of their desired output token than expected. This can cause confusion in the total amount spent versus the expected.

UX Solution:

Displaying the swap route and quantifying the volatility of that route, offering users valuable insights into potential price fluctuations.

Velodrome incorporates a separate price information section, ensuring that the USDC price for any tokens is prominently visible. This design approach, with its generous use of white space, provides with the clarity and prominence it deserves, enhancing the overall user experience.

Knots of Networks

A DeFi that has embedded many networks from currencies can become overwhelming for the users to keep track of. Sometimes it can also create confusion with similar names and logos.

UX Solution:

To include description notes for each network helps to educate any kind of user for that network particularly.

Idle Finance is doing a good UX job mentioning a bits of all the networks it has included.

Why is is so important that users get best experience and know the technologies they are interacting with? Simply put, “Communicate value to users, not just technical terms”.

Now, more than ever, an increasing number of crypto and DeFi firms are dedicating significant resources to UI/UX enhancements, recognizing their pivotal role in achieving widespread adoption.

Got your Web3 App or Platform? Get our FREE UX Audit (Limited Time Offer)

Finding The Best Web3 UX Process (Hint: There Isn’t One)

Web3 Design Principles

What is Web3

Everyone seems to be talking about Web3, how it will transform the current apps we use, manage our data, and handle our accounts, how Web3 Design looks and is created and what makes it different from Web2? 

To begin with, Web3 is all about the decentralization of the Internet. For easier understanding, the following features would be the best way, to sum up, the new Web3.0 era:

What does Web3 Design mean? 

In terms of the acceptance and use of web3, design is an important element. Since the majority of the users interacting with the terms of Web3 are exposed to DApps. To help them overcome the complexities of new technology, design is used as a primer in between.

Depending on the Web3 applications type, design rules will differ slightly depending on the type of dApp from standard web 2.0 apps to Web3.0 apps and all it contains (Gaming, NFTs and DEXes, etc.). However, there are some general design concepts that a designer should be educated about. 

The three main pillars of Web3 UX

Pillar 1: Educating on technology

Help the user understand any step he is going to work on and make it simpler for them to navigate the function by adding minor user interactions, tooltips, straightforward animations, pop-ups, or familiar, clearer terminology.

Web3’s status makes one thing quite clear: individuals won’t typically have the mental models and ways of thinking that it will require (yet).

It is the responsibility of designers to assist users in navigating the blockchain learning curve as they become more aware of the technology and its potential.

There are certain resources that can help anyone learn about the jargon, processes, mindset shift, etc. 

The need of defining the terminologies will be not much necessary once when blockchain becomes more common. However, businesses are correctly focusing their efforts in this area for the time being.

Specifically, the designer’s goal of assisting the common person is comprehending blockchain.

Example: Binance Academy has listed all the crypto jargon as a glossary with one-liner definitions. 

Pillar 2: Transparency

Users should have access to all relevant transactional information, especially for De-Fi apps that support a large number of transactions. As for design, this comprises:

Transparency example

Pillar 3: Familiarity

As Jacob’s law of UX design states, 

“The majority of user time is spent on other websites. This indicates that visitors desire your website to operate similarly to every other website they are already familiar with.”

Specifically, a Web3 application should be similar to a Web2 one in terms of user experience. Following this, you make it easier for people who are still learning about topics like cryptocurrency wallets, blockchain technology, etc. to utilize them.

Example: 

The user should not find the connection of the crypto wallet procedure any different than using his/her conventional online banking procedures. Whatever they are transacting should be as easy and as similar to their daily banking experiences. 

Secondly, minting their audio NFTs should be as smooth and familiar as their normal Spotify uploads, or YouTube video uploading process so that they do not find it an additional complexity as cost of ownership.

Web3 UX principles

When creating web3 user experiences and interfaces, designers should consider the best practices in the Web3 Design Principles collection. 

Active Guidance

Definition:

Users must have easy access to steady navigation that makes it clear how to return to a previous state and what to do next.

Principles:

Consider where your personas are most likely to turn for assistance while anticipating the need for additional assistance and working to reduce it.

One must take into account various perspectives of an interface because visibility management is crucial for business.

Avoid adding components that will clutter an interface or mislead users. Every component has a function.

Utilize standard design patterns to minimize user learning requirements.

Examples:

  1. Dodo is a decentralized exchange. On the exchange right now, there are 8 coins and 14 trading pairs. 
  2. When the users visit the website. Dodo provides a visible and simple use case for anyone willing to liquidate. 

It reflects the text in real-time currency exchange value right opposite to it. The play cards can be navigated back and forth to find all the currency values in real time that the platform supports.

  1. Moving along the sentences highlights the words and explains to the user about the platform’s service definition of it.

B. DTube is a decentralized (Web3-based) video streaming platform. At first glance, a user will find it similar to any other web2 video streaming service. Like YouTube, Vimeo, Dailymotion, etc. 

The approach behind DTube is the design consistency of what the viewers’ UX is trusted to till now. 

Consistency

Definition:

The establishment of uniformity across products and the customer’s experience is important for building trust.

Principles:

Use the same “Blockchain color” consistently throughout your project and be consistent with your font selections.

Keep your color choices and associations uniform and similar by maintaining consistency.

Grid-based designs with proportional and meaningful negative space should be kept in the design.

Wherever our users are, we design for them.

Examples:

Rarible, a popular NFT marketplace, states a good expression of consistency in the design such as the ground alignment, typography choices, and spacing. The strong-grid layout throughout the web page is quite impactful.

Community

Definition:

The services of Decentralized Applications may be only used by individuals but the basis of development of any application is planned for and also used frequently by, a sizable group of people worldwide. Community formation of a single type of user is beneficial for making the user experience better with uniform holistic feedback. 

Principles:

Indicate the number of community members worldwide independent of any region.

Categorizing the community with the law of proximity. 

Describe the community’s composition in detail (that is sub-groups and their power over the project)

Describe the project’s larger purpose (if any) and how their participation helps it to be fulfilled.

Examples:

Parsiq Network gives quick access to web3 data, enabling particular features in your applications. The platform has been designed specifically for developers who want to build event-driven apps with a focus on trending reactions to events. It has a supportive community system integrated into the site.

Data Transparency: Provenance

Definition:

A user must be able to determine whether a certain piece of information or piece of data is actually saved in the Blockchain, maybe just by looking at the page. 

Principles:

Make it clear which information originates from the Blockchain and which does not.

Make the contract’s address clear (s)

Connect all Blockchain information to unbiased Blockchain explorers.

State what data is derived from oracles

Examples:

When Data Provenance option is turned on. It highlights the blockchain data in Green color for better visibility. The value is also made prominent. 

Data Transparency: Transactions

Definition:

Allowing users to make assumptions and assume that “all” data visible is saved in the Blockchain is not user-friendly. The design should communicate enough at just a glance. 

Principles:

Clarify actions that are irreversible.

Clarify actions that involve money or value.

Clarify actions that could potentially lead to user identification.

Clarify actions that generate new contracts in users.

Examples:

In the SuperRare NFT market when placing a bid, this screen is captured. The message informs you of the value and permanency of your activities.

Don’t Forget the Newbies

Definition:

If we want Distributed Applications to be widely used, we must remove the entrance barriers for those who lack technical expertise or familiarity with the Blockchain and its jargon. The user would also benefit from being aware of the key distinctions between Decentralized applications and other applications. 

Principles:

Apps should try to minimize the use of new words and concepts, especially on the pages for the generic public (ie. homepage), and progressively show more learnings on pages for engaged users (ie. User dashboards).

Make every effort to use jargon-less, consistent terminology. Language should be concise, clear, and align with our users’ natural communication patterns.

Provide 2 or more levels of educational content: Blockchain Basics and Decentralized Application-specific terminology.

Try to weave in the snippets within the interface, with temporary pop-ups that can be easily dismissed that then could open more detailed information in another tab.

Examples:

OpenSea has a learning service available for newbies entering the NFT market. Gives a complete service to the user from learning from scratch, building NFTs, selling, and purchasing. 

Feedback 

Definition:

Through the design of constant feedback, we assist our users in understanding what is happening and lower anxiety. 

Principles:

When used sparingly, motion and animation support the understanding of what ia happening.

The user should always know what is happening, what just happened, and what will happen next as time is a significant element in Blockchain.

Examples: 

Upon connecting the wallet or refreshing funds OpenSea provides prompt feedback to let the user inform about his confirmation of activities. 

Trust

Definition:

Maintaining the trust of our users, many of whom work in fields involving highly sensitive data, is essential to the success of our company. The blockchain is “new” to almost everyone, with varying degrees of knowledge and assurance. Users must believe that our goods (and the people who created them) are stable, dependable, and trustworthy.

Principles:

Final word

Dapps are fundamentally distinct from regular web or mobile apps because they are built on the powerful Blockchain-enabled principles of decentralization, transparency, trustlessness, immutability, not hidden etc. and should strongly convey these values.

These Design Principles translate the characteristics of the Blockchain into useful tools by reflecting them in the front-end of Dapps for a promising and smooth User Experience. 

Check out The Best Web3 UX Process in the world of Web 3.0.