Web3 UX Design: The Top Challenges of UX/UI Design in Blockchain and How to Tackle Them
Web3 is evolving with tremendous speed. And a lot of fintech startups are ready to embrace it. But UX/UI designers face and tackle plenty of challenges. In this guide, we will discuss the four most challenging aspects of Web3 design for fintech startups.
Tim Strebkov
Founder and Design Lead
Pixels and Sense
Introduction
The mass adoption of blockchain technology is promising to shape the future of the Internet, which is called Web3. As the adoption of decentralized technologies grows, it opens up a myriad of new possibilities for Fintech platforms and digital products.
A decentralized economy is the core idea of Web3. While the user experience may resemble the same patterns as in conventional Fintech products, the UX design in Web3 and blockchain is anything but simple due to its tech’s innate characteristics and complex jargon.
So, understanding the challenges of UX/UI design in Web3 is becoming paramount for business owners and product designers who strive to remain competitive in the new digital age of Web3.
Web3 — the new era of the Internet
Even though people often mix up Web3 and blockchain, they are not the same thing.
Web3, a term first used by one of the creators of the Ethereum network in 2014, is a general name for decentralized apps that run on peer-to-peer networks.
Branded mock-up of UX/UI Krakencrypto exchange app for IOS devices.
The idea of Web3 is still a bit unclear because the technology is still developing and not everyone is using it yet.
Web3 products are always built on public blockchains and support the idea of a decentralized economy.
For financial technology (fintech) products, this means traditional finance can be decentralized, removing the need for a middleman. Examples of Web3 fintech products include DeFi (decentralized finance) protocols like Compound, DEX (decentralized crypto exchanges) like PancakeSwap, OTC exchanges, and even CEX (centralized crypto exchanges) like Kraken.
Blockchain technology is super important for Web3. In Web 2.0 (the current version of the Internet), big companies own your data, not you. The main goal of Web3 is to make the Internet better for users by creating dApps (decentralized applications) that follow key ideas of decentralization:
Trustless. Users can run dApps freely and maintain them on a network in a way that gives them complete control. This is drastically different from Web 2, where gigantic corporations have total power over how sites and apps function and what information is shared. Interaction within blockchain networks and Web3 dApps doesn't require fluttering trust in a centralized provider. It's possible because of a network's verifiable user actions, items, and ecosystem parts.
Permissionless. It provides a democratic approach for joining and interacting with a network for users; the only thing that is needed is their MetaMask or any other crypto wallet to communicate permissionless with Web3 dApps.
Decentralised. Self-governing blockchain network in the core. There is zero control from the "big tech" or monopoly data centers to maintain and provide it. Users act like nodes and have up-to-date copies of the networking, governing it with their day-to-day interactions and contributions.
Open-source. The code of DeFi protocols and dApps should be open-source, similar to public ledgers. Furthermore, native payments and direct p2p transactions shouldn't require a payment service to facilitate payments exclusively.
As you can see, these principles are fundamental for Web3 dApps to run and function. At the same time, they create a steep learning curve for an average user with zero technical background.
And meanwhile, the expansion of Web3 is ramping up and various apps and products are trying to attract more new users. The Web3 design is becoming full of legit challenges, that product designers and owners will have to tackle.
First challenge — Explaining the obvious in Web3 design
An excellent example of the 1inch UX/UI reflecting even the slightest price fluctuationfor a user even before they connect a wallet toa DeFi app.
For many general users, it might still be frightening to interact with dApps. Even though the principles of Web3 are beautiful and functional, a meticulous approach is needed to make the interactions easy and comprehensive for users.
Users without a proper background can often get confused by the overcomplexity of blockchain terminology like — swap, gas, consensus mechanism, private key, etc. So, explaining to users what might seem obvious to us (product designers) and developers is one of the critical challenges in Web3 design. On the contrary, in conventional fintech products, there is less need to explain basic concepts.
Everything changes, when we have to deal with a DeFi product. For example, designers must outline a predictable journey for a user to enter a deposit. When trading on DEX or a DeFi protocol, depending on the network, the gas fees (a commission per translation) may fluctuate constantly. So, informing the user about all gas fee fluctuations and the reason for the changes is a must.
Building a highly informative design is the key in this case, but it can easily end up as a slippery slope with informational overload for a new user.
Therefore, it becomes challenging to design a genuinely user-friendly and, at the same time, powerful DeFi Fintech product with a range of unique features accessible to the average user. In this case, a good solution would be to alleviate the experience through communication; if a user isn’t experienced enough to immerse himself in the whole setup, it’s better to offer him a lightweight version of the product.
Not only intuitive UX design but also a highly comprehensive one
A highly comprehensive Web3 design will mean an effortless user experience for newcomers. It is important to tackle the complexity of Web3 jargon for mundane features that users will be using daily, such as swapping (trading or exchanging one token for another), transferring assets on-chain, etc. Using simple and clear messaging and communications is thus essential, especially during any transaction stages where users might face the risk of permanently losing their money.
For example, why should a user transfer only through the “right” network (for example, Ethereum) for his ETH when moving assets to a different wallet? Otherwise, he will permanently lose funds.
One of the ways to tackle this is to deliver the most user-friendly prompts in the shape of pop-ups or warning on-screen notifications
Another way is to invest in user-friendly guidelines and documentation. When a Web3 product is too powerful, it is a must.
To make the guidelines and documentation easy to understand, summarize each section, linking them to all relevant technical parts. Offer users access to interactive glossaries that enable easy checking of Web3 definitions, slang, and jargon. To make guidelines even more comprehensive and engaging, designers can mix infographics and animations that illustrate Web3 concepts.
An example of good UX on the Binance exchange: the pop-up serves as a crucial reminder to choose the right chain when withdrawing crypto from a custodial Binance wallet to an external one.
Second challenge — More efforts to instil product trust
In Web3, a lack of clear explanation and an inability to any transactional rollbacks or disputes through customer support can be a recipe for diminished trust in a fintech product.
Due to the nature of blockchain protocols, any transactions that users make are immutable, meaning they are permanently sitting in a public ledger.
When it comes to Web3 design for fintech products, designers take an additional toll on conveying this to the UX/UI.
Web3 design requires a display of additional security warnings for users that help prevent them from losing their assets by an accident, or even worse by a poor interface. It’s always good to think three steps ahead of users in Web3 design to increase product trust. It's a win when a user’s expectations match the transactional outcome.
For example, when transferring assets to another wallet, it is important to check the wallet address without confusing it with its private key. The trick is not to expose the private key anywhere. Otherwise, the wallet can be considered compromised.
Furthermore, there should be a seamless display of all the events on a network that may affect the user experience. Transaction delays, estimated processing times, or even the simplest things like wallet balance reflection should be openly communicated and connected with the events on a network in real-time.
A good example of comprehensive UX on Polygon bridge warns users before they confirm a transaction on-chain.
How to show the immutability of a blockchain in UX design
Transparency helps to increase trust in Web3 products. It is essential to illustrate how blockchain immutability works openly by giving proper security warnings, even in simple cases of UX.
Many actions (besides financial transitions) that users perform in Web3 apps are transactional-based, and those actions might be irreversible.
It’s important to build a clear algorithm for users on what is immutability in blockchain by learning and navigating them frictionlessly through a product. This can be enhanced with tactile features on mobile devices or responsive and urgent security warnings on desktops that require user confirmation.
Third challenge — Impress with creativity, but don’t distract from features
It is a standard for most Web3 products to impress users with a creative design and fascinating animations or website flow. The decentralization of the industry gives products the flexibility and freedom to unveil their creativity and build a whole brand identity based around a sushi emoji, for example.
Example of Pancakeswap.finance landing page. — the DEX and DeFi product, their brand mascot is a pancake rocket bunny
For Web3 products, it’s crucial to stand out. It should be exciting and memorable for users while creating a solid connection with a specific crypto target audience. On the other hand, many different products in Web3 are trying to compete with their extraordinary brand identity. By doing so, many Web3 product owners can lose the sharp image of their audience and hence lose the valuable connection with potential users.
The importance of profound UX/UI research in Web3 design
To avoid misinterpretation in design, investing more in building an excellent brand identity is essential. The UX/UI research could take reasonably long, but it will make a genuinely impactful change in building customer loyalty and connection.
For fintech products in Web3, the urgency of this factor goes even further.
Fourth challenge — Hardly accessible blockchain explorers for users
The last challenge in Web3 design is blockchain explorers. They can directly affect the user’s experience when sending and receiving funds.
What does a blockchain explorer mean for Web3 design?
Blockchain explorers are essential tools for every decentralized network in Web3. They are responsible for all the information and details about the user’s transactions on-chain. These tools also allow users to retrieve any public data regarding transactions on a blockchain network in real-time.
Because blockchains are public ledgers, any user online is capable of retrieving such data from blockchain explorers as — info about made or pending transactions on-chain, wallet addresses, blocks, gas fees (transaction fees), etc. Users can also get data about smart contracts and nodes. Each blockchain always has its own blockchain explorer.
However, for Web3 products, this means that user transaction data is highly dependent on blockchain explorers. The biggest challenge here is that even for advanced crypto enthusiasts, reading blockchain explorers could be tricky.
Transaction history visualisation with explorer API
However, there are a few solutions to tackle the challenge of reading blockchain explorers. First, the best thing to do is to avoid linking transaction status on a blockchain explorer itself. Instead, it is better to link a transaction on an explorer additionally. Using an API of a blockchain explorer widget with data visualization can be a way to go.
Unfortunately, there are not that many ready-to-use solutions for even the notorious blockchain as Ethereum. So, the chances that building one and designing one on Web3 product’s behalf are pretty high.
Final thoughts
As the number of Web3 fintech products is rising, our mission is to stay dedicated to customer-centric design and enhance the adoption of new technologies. Web3 challenges designers with its tech-rooted language, steep learning curve for average users, and low frictionless user experience.
These challenges are not insurmountable. They are opportunities that we, together, can seize to shape a better Web3 UX for the end customers, creators, and users.
We already know how to tackle these challenges and are ready to create a consistent, comprehensive Web3 design.
Our top goal is to make the onboarding seamless for new users of any Web3 fintech product and to build the highest trust level by simply making Web3 design better.
Looking for help with your fintech product design?
If you’re a seed to a Series A fintech startup or an SME and you take your digital presence seriously – let's get in touch.
We have worked with dozens of fintech businesses, from investment brokers to crypto neobanks to BNPL providers, and we know how to fix your product design once and for all.
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
