As a Blockchain UX agency we wanted to put together a comprehensive guide on what makes great UX in the Blockchain space. We’ve worked on a range of projects from new NFTs to Defi staking platforms and dApps.
Why is UX so important in the Blockchain space
The blockchain space is an emerging industry. This is why it’s so important to have clear and informative UX. Elements of web 3.0 such as cryptocurrencies, NFTs, dApps, farming, staking and mining are new, or otherwise unheard of, concepts to most people. Although there are guides online for users to get a better understanding of DeFi, UX is more important than ever to make your website as understandable as possible.
Deloitte conducts a survey every year for Blockchain adoption. The survey polls 1,386 senior executives in a dozen countries of companies earning $100million-$500 million a year. The executives answer every year whether they think blockchain will adapt to the mainstream. In 2017, the rate of people that said yes was 84%. In 2019, it was 86%. And, it was 88% in 2020. Despite the increase adoption over the last few years ,we are still yet to hit ‘mass adoption.’ At Sequence, we believe one of the main reasons for this is the lack of UX consideration in the space.
One fundamental here on why UX is crucial is trust. Do users trust your product? A constant across the entire De-Fi and Crypto space is that users part with their money in exchange for something else. Examples of this are seen in staking for rewards, buying a new token with fiat currency or paying for early access to a service. Users are understandably hesitant to hand over their money for something they don’t completely understand.
Furthermore, the community is made up of builders and innovators. The Deloitte Survey is helpful for an insight but its a good example of the issue we’re talking about. They only collect survey results from senior executives of highly successful companies. The average citizen is not thought about here. The focus on its own tech savvy community is the main reason UX is often an afterthought for Blockchain companies. However, the platforms that do consider UX stand out.
Blockchain UX Patterns
Looking to build your next dApp, NFT or Crypto App? We’ve pulled together a list of some of the common and trusted UX patterns in the Blockchain space.
The patterns used should depend on the what product is being built. For example, some blockchain projects may need to focus on ease of use and functionality, whereas for others the ‘look and feel’ of the product play a bigger role.
Be prepared for the user to make mistakes
Users who visit your site will be at different levels of experience, and different levels of integration. They may have several wallets with multiple tokens, they may not even have a wallet yet. But, your site should be setup for users in every situation. DeFi is complex. When a user makes a mistake, a validation message that says ‘Error’ isn’t going to cut it. You need to be able to explain the problems and provide an easy solution.
Bancor is an example of a DeFi protocol which does this very well. When adding Single-Sided liquidity it explains how you can only add a certain amount of ETH depending on how much BNT Liquidity is available. However, it also shows the user the amount of space available so that they can easily rectify the problem.
Terminology is important
Farming, staking, and mining. The DeFi space is swamped by new terms, it’s important to onboard users. One simple way to explain the website is a staged walkthrough of the app to show users how the different modules work. This is used by many sites and apps not just in the blockchain space and is an easy way for a user to grasp a website. Another simple way to help users understand the terminology in your app is through using a simple tool tip.
Oasis is a great example of this. The DeFi lending protocol have they put in place clear tool tips where more complex terminology is used. However, they’ve also gone one step further by personalising these to the user depending on their action. As you can see in the example below it explains to the user which currency is needed for the transaction fee and gives an estimated cost that is unique to them and the current Gas price of Ethereum.
Show the status of transactions
With Blockchains such as Ethereum transactions can be slow due to network congestion. This might lead to users questioning if your dApp is working once they create any kind of transaction on the Blockchain.
This is especially the case for users who may be new to the DeFi space, these users may be used to instantaneous results when transferring money or making a payment via traditional financial products.
Showing the staus of transactions so that a user can see their transactions on a Blockchain explorer such as EtherScan or BSCscan can help provide transparency and reassurance that a user hasn’t lost their funds.
Uniswap is a great example of this, they allows users to see the progress of their transactions at different stages of transactions using alert notifications once the transaction has been started and completed. They also provide the link for users to check the status of a transaction on Etherscan.
Nailing multiple network dApps
Adding multiple networks to your app can both increase the versatility and complexity, which is why it’s crucial to prioritise the User Experience in this area.
A great way to start is to provide a clear indication of which network the user is currently connected to, users could be using multiple networks across different dApps, displaying this information stops the user from having to check their wallet every time they come to your site.
Launchpool is a good example of a dApp which handles multiple networks well, running both ETH and BSC projects on the same app. The Crypto kick starting style platform allows users to participate in Allocation Mining Events which can be on either network and stake in BSC and ETH projects in Pop Up Pools (Pups).
When a user needs to change networks to use parts of site, the app will open up MetaMask so that users can quickly change in-between networks. It also clearly displays when the user is on the wrong network for that particular section of the app, for example being connected to the ETH network on the BSC staking page.
Do Validation on the front-end and not just on Chain.
One less obvious consideration for the UX of your Defi product is validation and at which point you do it.
There may be many reasons you want to add some form of validation to your app, for example you might have a max limit that a user is allowed to stake or you might only want to allow deposits from certain addresses.
Validation can be added in the Smart Contract so that the transaction is rejected, however, on chain validation will still cost the user a transaction fee which could be hefty depending on what action the user is taking. If you do validation on the front-end then you can stop the user from doing this before the transaction is attempted and Gas is burnt.
Oasis is a good example of this, it warns users that they’re actually required to generate a minimum of 10,000 DAI in order to open a Vault on the front-end. This warning saves the user a large transaction fee that is associated with opening this vault only to be rejected by the smart contract.
It’s important to have validation in your smart contract too, however include it on the front-end as a first point of call to prevent users wasting their funds.
NFT Design patterns
NFTs have taken the world by storm over the last years, but with thousands of projects popping up what sets them apart? Consider the UX for your NFT based products and you could be see yourself rising up the chart of top NFTs.
Create a home for your NFTs
One fundamental UX consideration for creating a successful NFT is to give it a home. The majority of NFT projects can only be viewed in your digital wallet or on a Blockchain explorer such as Etherscan or BSC Scan.
However, giving users access to a dedicated site where they can access their NFT creates a more exclusive feel to the project.
NBA Top Shot is a great examples of this, the Basketball based NFT Moments can all be accessed and admired on their platform once a user is logged in.
Some projects have even gone one step further and allowed users to access their NFTs in a Metaverse such as Decentreland. KnownOrigin an NFT digtal art platform often conduct launches of new art pieces in the Metaverse, creating an exclusive and unique feel to the NFTs.
Calling the #Metaverse crew!
Join us for the launch of full 360° #NFTs06 March
22:00 CET
Venue https://t.co/4eP4y5jiDQIn collaboration with@SomniumSpace & @Natural_Warp pic.twitter.com/6VXjtjBSfl
— KnownOrigin.io (@KnownOrigin_io) March 4, 2021
Give your NFTs a purpose
Want to go one step further? One thing you can do to your NFT a real edge and increase the versatility is to you could even give your NFTs a function.
Could your NFT unlock exclusive holder only benefits, give you exclusive access, be used to participate in an online game?
Sorare is a great example of this
Sorare access exclusive benefits other NFTs etc.
Create a story or journey
Check out the story site we built for Bitcoin Origins. If there’s a story behind your NFT it’s going to be much more attractive for new users. It helps onboard and educate users, so they buy into the project.
Digital Wallet Design
Simple UI
A cluttered UI can confuse users. Start with the most basic and essential features, Bitcoin Origins is also a good example for this. Then, allow users to do more complex things if they wish. A wallet will be one of the first products a user uses when they enter the cryptocurrency space, its always good to have a module to connect their wallet on the first page a user visits. The UI should be broke up into sections and modules that are clearly titled and labeled. This is another place where you should consider doing a staged walkthrough.
Emphasise the importance of keeping information safe
A great example of this is how MetaMask makes users re-enter their private key phrase once they’ve created a wallet. The UX of the app deliberately stops the user simply copying and pasting the phrase into the input box. This ensures that a user has made a note of their key phrase, which is required to access the wallet. Small things like this will impact a user to thinking their information is safe. A section on your website about GDPR would also let users know you take privacy and security seriously.
More Blockchain UX Resources
Want to read more about Blockchain UX? Check out the article we’ve written on articles for learning about the UX of Blockchain
Build trust in a trustless space
- Importance of branding
- Link to Blockchain branding guide