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)

UX Best Practices for NFT Marketplace Design

Online NFT marketplaces are becoming more and more popular every day. The digital collectibles are backed by blockchain technology which makes them complex and different from the current marketplace items listed in e-stores. 

Marketplace- as it sounds is all about buying and selling. Making UI/UX design for NFT platforms can be time-taking since you have to figure out how to merge the complications of the blockchain into a user-friendly platform. Let’s explore some easy ways and tips for designing your own NFT marketplace in this guide.

What You Should Know First?

Web3 Mindset for UX Designers 

Web3 Design Principles

Essential Design Features of the NFT marketplace:

Single-category Market or All-Purpose Market

The first and foremost step would be to determine the type of niche you are fulfilling with your marketplace design. Sticking to the business niche is important prior to design. 

  1. Single-category market (say only Art-based)
  2. All-Purpose market (Art, Music, Real Estate, sports, collectibles, entertainment, gaming, etc.)

For example, for the multi-categories platform, the first interacting screen should allow the users to browse the categories of their choice.

Whereas, the single-category NFT market would start enlisting the collectibles on their landing page. This should be the first priority for the designer to understand the client’s business and stick to it for implementation. Some examples to speculate business niche importance are:

  1. Radion is a music-only NFT marketplace. The Radion allows creators to have an e-commerce-like platform where subscribers can buy a number of products or services listed as NFTs.
  1. NBA Top Shot is a sport and athleisure NFT marketplace. It is a great choice for basketball fans who are looking to get involved in the world of basketball NFTs. 
  1. KnownOrigin is another versatile example of a single-category marketplace. It is an art NFT platform. It focuses on offering rare and collectible artworks in timed-released events, known as drops, which enable artists to control the number of copies released.

Welcoming the New Comers

The goal is to welcome all kinds of visitors with an attractive yet simple design. As a designer, we must always remember that new users and technically proficient people will be visiting the same site. To cater to that there must be an inclusion of

A little humor never hurt anybody. Adding something creative, witty, or funny gets users’ attention more quickly and ultimately trust is formed between the user and the platform. As we can witness below in the picture, the word “eat” right next to the word “use” is written in strike-through making it seem hysterical. 

Showcase NFTs on the Homepage

The layout should also be uncluttered with no background images or distracting information. Choice of suitable alignment, simple templates or themes, and no-busy backgrounds is the key to perfecting the layout. Having the categories for the all-purpose NFt market can be a challenge, listing down the NFTs in a perfect format should be made possible with alignment, font choice, and image ratio on a page. 

The first interactive screen of any platform is its Home Page. Implementing the “aesthetic-usability” feature on this page is preferred. The aesthetic-usability effect refers to users’ tendency to consider attractive products as usable as they look — even if they aren’t actually more effective or efficient. 

Provide What Viewers are Looking For

Curating design to enable control for the users is another important design strategy. Making marketplace users feel like they can easily view the NFTs in-purchase and the ones on auctions to bid readily. 

In marketplace design, control can be given by providing users with multiple options such as choosing the type of NFTs (Auction, non-auction, new, popular, etc.), setting the pricing range, filtration, and sorting items. 

Allow users to search more precisely, by having the option of the filter. This will help in gaining happy visitors. People like to see what they want, using filters they can eliminate the non-required and easily navigate to the point.

Separate dashboards for buyers and sellers

NFT platforms have two primary target audiences — NFT creators and buyers. They want to achieve entirely different tasks, so make sure to design separate and relevant dashboards.

Here is how OpenSea is achieving this feature:

Seller Dashboard for creating NFT

Dashboard for Buyer to buy NFT

 What to Hide and What to Highlight 

Other than the assets’ listing standards, other important description features that should be highlighted as an NFT description is;

Displaying detailed information on the NFT’s origin and background (history of all owners). 

Allowing users to track their whole transaction history is part of an excellent user experience since NFT traders want to analyze their trading behavior to improve or judge the market while participating in NFT trading. Such a feature can include required data like the total number of NFTs sold, NFTs’ previous price, and so on.

While designing the description page. There should be an open/close description button to allow the type of viewers to look deep into the description or not. Populating information without having the viewers get to engage with the product above can be a little distracting. 

Adding Tags for NFT Searching Optimization

Users want to see the exact thing they search for. Tags are the keywords associated with the product that helps the users reach their desired product in an easy and quick manner. Tags make navigation easier and bring exposure to the topics that consumers love. Putting Tags with the NFTs in the marketplace allow the searched category/item to pop right at the top so that the user does not have to spend time searching.

Buying and Selling Design Mechanisms in NFT Marketplace

Buy

The NFT marketplace platform should have a feature that allows users to buy and bid for NFTs listed on the platform. The bidding feature should include a bid expiration date and allow users to view details about the bids’ current status. 

Sell

Sellers should have the option to select the type of buying process while minting an NFT or whether one has to transfer the ownership to another person. If he opts for fix price then he will enter the amount that he wants to sell, in case he selects the other option he has to select its metrics which include name, description, time duration, minimum price, and chain (if there are more than one), etc.

Adding Blockchain Network

Adding a Blockchain network is not essential but can be added as an extra feature

With unique requirements in mind, we choose an optimal blockchain framework and implement the blockchain network to base the NFT marketplace but you don’t necessarily operate on a single blockchain. Actually, if you do, your marketplace will face the same limitations as the chosen blockchain network. The resulting interoperability increases marketplace sustainability, optimizes blockchain energy consumption, and expands customer reach for your marketplace.

Integrating the Crypto Wallet & Checking Transaction

Just as a viewer finds the perfect NFT to buy or the NFT creator’s deal is closed they just want a quick route to get the fair transaction. To ensure that users have quick and secure transactions available on the marketplace a crypto wallet on a marketplace is a must. This can be made possible by designing a wallet that supports multiple crypto currency (Also dependent on the development area). Other than the technical metric, it should have a smooth and error-free UX. Adding feedback with each step by a user can enhance the user experience. 

Transaction history or activities

Giving access to the users’ actions and transaction history on the marketplace is another viable feature. Buyers can check back and forth the worth/pricing of any digital asset and decide if new transactions they can work on without any errors. 

Other Tips that will be helpful

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

Technologies around the world are causing a transition from Web 2.0 to a trustless and permissionless Web3, causing the global technological environment to change quickly. This has compelled the conventional recognized software businesses to form Web3-specific teams and convert their typical web systems to web3.

But now Web3 is having trouble gaining widespread adoption due to a lack of knowledge and technological complexities. The sole reason for this is the lack of user diversification experience. As the technology itself is complicated, it should at least have a user-friendly interface that gives the user the impression that it has ease of use and a high user diversification experience. 

User diversification is a path to a productive and forward-thinking Web3 environment in the future. Mass adoption equals a fulfilling user experience. The more people who utilize these digital environments and tools, the more they resemble the real world. As with the current face of the internet and the web, it might happen as soon as some anticipate. 

At expedite, being the advocates of web3 design, we have concluded that design is the first and foremost interacting element that enhances the user experience. In this article, we will be discussing the categories of product launches and the processes of UX design that are the best fit for a product launch in the Web3 space. 

Types of Product Launches and their design strategies:

1. For Products that just want to jump into the market OR want to onboard investors by showcasing ideas.

These sorts of products are known as Minimum Viable Product (MVP) and can be introduced to commerce after quick steps. The term “minimum viable product,” or “MVP,” refers to a product with just enough features to draw in early adopters and validate a product concept. In the web and software domains, the MVP can assist the product team in gathering customer input as soon as possible so that they can iterate and enhance the product.

The MVP is essential to agile development since the agile process is centered on validating and refining products based on user feedback.

The UX design processes for the first product category are as follows:

  1. Understanding

The biggest chunk of the initiating design phase is in understanding the project and its requirements. What are the pain points of an end-user? What can be modified in the current product to enhance UX? and how to make the experience of an end user smooth and consistent? 

Before creating an MVP or prototype, a UX designer seeks to understand what drives a user and what validation they are looking for. The intersection of UX development and design occurs when the proper products are provided to create a user’s capacity and motivation to accomplish a task.

For understanding, we start by elicitation and requirements gathering.

Understanding the user’s perspective is essential to mastering the UX design process; however, working with actual users to conduct in-depth user research, which results from the many methods of requirements gathering, is the only way to discover what that perspective is. 

By doing this first, we will need to make fewer revisions in the future, saving us a lot of work, time, money, and resources. If we conducted research first and then design, we would need to make significant design adjustments to accommodate the needs of the customers we have spoken with.

This has the advantage of allowing consumers to interact with an existing system directly. Some of the techniques that can be used to collect requirements:

  1. Branding

Product branding is a strategic fusion of design, marketing, and experience that distinguishes one product from others in the same category. It includes every aspect of the product, including the name, graphic design, materials used, delivery method, and physical appearance of the packing.

Product brands have become increasingly sophisticated and specialized for each product. A product’s niche differentiation is the objective.

However, at the core of branding, UX is about knowing the users, establishing the brand’s tone, and then designing helpful products that promote great user experiences. Branding Includes the following elements of a company:

  1. Design

Formally, there are three main design elements that makeup product design: quality, functionality, ease of use, and appearance.

To build a successful, competitive product, you will need to carefully consider each of these three criteria: an appealing, contemporary design; a useful functionality that helps users deal with their problems, and ease of use can be stated as a user on a website accessing the homepage within 3 seconds of opening the link, and maximum availability, the design must enable high performance and security as well. 

To have an improved design process we must consider 3 things.

  1. Get to know your project purpose well enough. Carefully examine individuals for whom the product is meant to pinpoint the best possible course for future product design.
  2. Be not afraid of issues. Make it a task for your team to identify and resolve them, instead. You’ll probably need to redo the outcome if you consistently put off solving problems or entirely miss them in favor of focusing just on the tasks you excel at.
  3. Strategizing your budget in compliance with the design needs is also essential, as it can get both the client and designer in an indecisive spiral where the finances and requirements don’t go side by side.
  4. The elements in the design to produce or modify are:

The user flow guides users through a series of processes from their entry point to a successful conclusion and end action, such as end-users purchasing a product.

Low-Fidelity or Lo-Fi wireframing is a basic wireframe that describes the layout of web pages or app displays. They assist you in conveying the “main idea” of your product rather than the specifics.

A prototype is an early version of a product that has been produced to test functionality. System analysts and users typically utilize a prototype to assess a new design that aims to increase precision. In certain models of the design workflow, the stage between formalizing and evaluating an idea is the creation of a prototype. 

  1. Quick Evaluation

Quick Evaluation is important because it enables teams to determine whether their design is effective for their users. Since testing with high-fidelity designs yields more insightful feedback from end users, the evaluation phase typically begins after the high-fidelity design is complete. The team validates the product with end users and stakeholders through a series of user testing sessions. Evaluation is a crucial phase in the design process where designers would test the prototype. 

2. For products that require quick UI with detailed research on UX:

When the clients ask for enhancement of the user experiences based on real user data having thorough research of user experience to launch any product, in this type of product launch the focus is on the detailed research of UX for the product with a short launch window having a simple quick UI. This sort of product is studied and data is gathered using user feedback, reviews, surveys, and the normal initial procedures discussed above. Understanding, Branding, Design, Quick Evaluation, and designer’s testing prototype. 

The client can now onboard investors using this prototype OR enter the market. Meanwhile, the UX designers would begin gathering data in preparation for the launch of the next edition, which would have a better UX and be more user-centered. The continued procedures would include:

  1.  In-Depth Evaluation

In the deep evaluation method, the team runs usability testing, qualitative testing with moderated usability testing, and quantitative via data gathering through product usability interviews, social survey forms, product communities, testing groups from actual users etc. For testing a running piece of design there are multiple ways to achieve that. One is the Qualitative + Quantitative usability testing through Maze

  1. Research

If you are wondering about the research after launch then yes! We strongly abide by the rule of iteration. Iteration is the key to a brilliant UX enhancement.  

The product launch research process can be broken down into seven general steps: understanding the market and the competition, focusing on the customer, developing a distinctive value proposition, choosing a marketing strategy, testing the product and general strategy, launching the campaign, and monitoring the overall lifecycle. These steps include Competitive Analysis, User Interviews/Personas, focused groups, Affinity Mapping, Journey Mapping,  Information Architecture (Optional), and User Flows. 

  1. Design Refinements & Final Evaluation

Design refinement can be defined as the process of changing a concept to make it more useful/easy to use or aesthetically beautiful. Renovating a certain design element, such as a web page’s layout, to make it easier to view.

In design refinements, the design system, UI, and prototype are modified if requested by the client. In this final testing, the product’s usability is examined. Both comply with Qualitative and Quantitative separately and at once. 

This final evaluation helps to provide proof to the client about any change history, also maintains a log, and that the product is tested and verified, etc. 

3. For Products that have enough time to follow UX Processes and want to get into the market with a User-Centric Product.

The final product category in which the time is fully invested to follow the thorough UX processes on to the product, making it a user-centric product. These products are called user-centric because they follow User Centric Design (UCD) in which the user is the heart and soul of the product. The needs, goals, and feedback of the consumer when creating digital products are the top priority. 

This type of process follows the same initial procedure in understanding the business, gathering the requirements via surveys and forms then branding the product having a signature theme and consistent design. The design and Evaluation follow the same procedures as above. However, In the research phase, a few new options are involved. 

  1. Understanding
  1. Branding
  1. Research
  1. Design
  1. Evaluation

A heuristic evaluation can be used to determine how user-friendly a website is. In other words, it evaluates how usable the website is. In a heuristic evaluation, unlike user testing, where users assess the website (or prototype), the site is evaluated by usability specialists.

To conduct a heuristic evaluation, the experts perform Usability testing inclusive of

Summary:

User diversification experience is the common lacking point of most Web3 products. It is not an impossible approach to reach every category of the user, but the design can be made smooth, consistent, and attractive enough to get a massive percentage to adopt this young technology. The UX is said to be the heart and soul of any product-based business.

It has a 400% conversion rate of potential to convert one-time clients to your daily users. Brands need to focus on the User Experience as much as or rationally speaking more than other areas. The above processes are curated to help Web3 design companies follow a guide and produce compelling products with a high conversion rate and user concentration respective to their type of category of product. 

Expedite Live Design Supported Products

We take pride in successfully completing and deploying satisfied clients’ products. The experiences that we gained in the design processes are all part of our learning to make the processes more user-friendly in the future. You can check Unipilot and Metadot to see live results. Check out our work for more inspiration.