With new technologies and progress, Web3 stands out as the next big thing in the FinTech space. This new and improved world wide web will change the way we shop, bank, game or handle our data and finances. So, first of all, let’s try to understand what Web3 is and then explore more about Web3 design concepts and patterns.
Chris Dixon defined it in simple words: “Web3 is the internet that is owned by builder and users, orchestrated with tokens.”
Based on the decentralized model, Web3 offers full ownership of the platforms and online content users create. Furthermore, users will be incentivized on contributing to the platform.
As a designer, you must be wondering what does it mean for designing for Web3? What practices can be brought over from web2.0 and how can you prepare yourself before the world takes the next paradigm shift?
No one is expecting a history lesson here but each internet evolution stage has distinct characteristics that drive the way people used the web. The design challenges can be better understood if you closely look at the contextual differences. Consequently, you will understand the relationship between user experience and web3 design.
This is the primitive stage of the internet characterized by static pages. Content or data were delivered by the file system instead of relational or non-relational databases. Social media, blogs or video contents were not present.
Users were mostly passive consumers of content and hence, Web 1.0 is often called the ‘read-only’ web.
This is the internet we know today characterized by more user interaction, participation and personalization. Features like social media, video-sharing platforms, image-sharing platforms, podcast-hosting sites and many more have made it easier for users to interact and even monetize their content.
A few software behemoths (think of Google, Amazon, Apple, Facebook or Twitter) provide users with an incredibly easy platform and in turn, they are storing & using user data to their interest. People are using the internet for anything and everything thus design took a whole new level.
Companies started focusing on aesthetics, user growth and storing user data. As a result, the internet has become more centralized and dominated by a few monopolies that are questioned several times for breaching data security and privacy.
Web3 focuses on the decentralization of the internet which in turn solves the existing monopolistic problems. Data will be stored on the blockchain instead of a centralized database. Blockchain will function as a shared peer-to-peer ledger and use proof-of-work to protect data.
Without diving further, Web3 is a landscape where investors or CEOs will not have monopoly power over anything. Instead, it will be distributed among average joes who aren’t rolling in cash. Web3 is
Design plays an essential role in the adoption of Web3. Most people don’t know much about Web3 and they will be onboarded in this space through Decentralized Applications (dApps). Hence, Web3 design patterns can support or hinder the journey through this unknown technical space.
The design may vary based on the dApp type. Nonetheless, there are a few basic design concepts and principles that a designer should know when designing for Web3.
Web3 is still too complex for the mass people and as of now, this is probably the biggest shortcoming of this space. NFTs, DeFi, dApps, crypto wallet—an average day-to-day internet user barely hears these terms, let alone understands the meaning.
As a Web3 designer, you should address this issue tactfully and minimize the cognitive load on the users. This in turn will eliminate the insecurities users may feel regarding the use of Web3 pages and other applications. Hence, a better Web3 design can guide users through decentralized apps or websites and ensure a smooth user journey. Web3 designers should conduct in-depth user research to understand the target users’ current pain points and needs before designing the best service and experience.
Let’s get to learn the Web3 design principles one by one.
It is on the onus of designers to assist people to conquer the fear of blockchain and make the learning curve less steep. As a Web3 designer, you need to channel the design knowledge from Web 2.0 and shift it into the Web3 space so even the novice can grasp the fundamental principles. This can be done in the following ways:
i. Connect people through what they really know or understand: Designers should understand users’ voices. This means trying to reach them with easy language that they already know. Try to use metaphors and stories in the web3 design pattern. MetaMask, for example, has used easy language like credit card stolen, identity hack, unsafe internet and story-based animation in their YouTube promo to reach the general public. And guess what? It is working nicely.
ii. Eliminate technical jargon as much as possible (if not entirely): Understandably, blockchain and Web3 have brought a whole range of lingo with them. Words like mining, tokens, smart contracts, liquidity pools, forks, etc., are mostly beyond the radar of the mass people.
Technical language makes it harder for users to understand what your dApp can do. Hence, keep your language simple and easy to read when creating UX copies for Web3 products or websites. Yes, you cannot use obscure language on the website but rich glossaries and help icons can solve the issue for you. So, for the majority of dApps, keep the language and design aimed at the average people like the following one.
iii. Show actionable routes: Many Web3 products were developed without consideration of non-tech users who have little or no knowledge of the Web3 space. As a consequence, the design lacks actionable routes or guidance on what to do next, where to browse or where to stake.
Web3 designers should clarify all the unfamiliar features and actions through actionable routes. Implementing pop-up buttons, fixed buttons or browsing navigations for any action or information are good options for Web3 design.
The essence of this lies in two aspects: decentralized nature of blockchain and the newness of the technology. To build trust among users, you need to be transparent because people trust the application with their assets. Designers can help in building trust by adhering to a transparent design approach.
Web3 design should vividly express the details of user transactions, irreversible actions, asset details, transaction history and time requirements for the completion of any action. Greater transparency builds more trust and gains more users. Let’s discuss some ideas below.
i. Make wallet and transaction hashes easily readable: The address on blockchain, commonly known as the ID or hash is a long string of characters (up to 42). As transactions are irreversible if someone sends assets to the wrong wallet address there is no way to recover them. Due to the long string, users are vulnerable to making errors.
To improve the user experience of crypto wallets, Web3 designers can make the users’ life less stressful by showing the first and last four characters of the hash. They can also include an identifying logo next to each recipient so the sender can easily understand where the assets are going.
ii. Breakdown of the transactions: Another good Web3 design concept is to show the breakdown of each transaction users are making. It helps users to gain more understanding of the technology as well.
iii. Clarify transaction waiting time: The minimum waiting time for blockchain transactions is about 03 minutes. However, sometimes users need to wait for hours depending on the type of network and network lag. Designers should display the transaction status or waiting time after a transaction is executed.
iv. Use FIAT currencies to communicate the value: For Web3 design, it is always a good practice to show all transactional values in US dollars or other native/major currencies. The designers should show the price conversions in FIAT currency and avoid using more than 4 decimal places.
v. Visibility of gas prices: One of the most confusing things in Web3 is the gas price. Gas prices are the extra charge that users need to pay as compensation for the computing power required to process transactions. Designers should display the gas price in fiat currency. Besides, they can suggest a viable combination of gas price and subsequent transfer speed.
vi. Easy access to user transaction histories: Designers should allow users to review their on-chain transactions made within dApps. The history button should be placed in a clearly visible location. A filter and a report extraction option are added perks.
We are familiar with recovering lost passwords and sign-in details in Web 2.0. However, due to the decentralized nature of blockchain, this is kind of impossible in Web3. Product team must take it into account when designing Web3 products. Once you lost or forget something it is gone forever. One wrong action can lead to disastrous results.
As a designer, you should provide enough reminders to the users regarding the action they are about to take. At the same time, give them the option to cross-check and double-confirm.
i. Implement a ‘Send Max’ button: Bitcoin or other cryptocurrencies often come with many decimal places i.e. 0.00000085191. It is difficult for users to type the intended amount accurately when sending assets to somewhere else. Web3 designers can implement a ‘Send Max’ button. This will prevent the users from sending their entire wallet balance to another address with a single click.
ii. Educate on consequences: As Web3 is a new space it is highly possible that users will make mistakes. In the Web3 world, actions are irreversible and transactions are non-refundable. As a designer, you should warn users comprehensively before they fall victim to a wrong or unintended action just like the following image where MetaMask does it superbly for its users.
Web 3 for designers is a vast field and frankly, there is a lot left to be discussed. To understand the friction points, Web3 designers should understand the basic mechanics of blockchain. Being a Web3 product user can also prove very useful.
In the design game, better communication means winning half of the battle. Being able to understand mass people’s language, their pain points and resonate with them in the same frequency ensures a smooth Web3 design all the way through.
The Coin Bureau and YouTube influencers/channels are good places to learn for Web3 UX designers. UX Bonfire is a newly established Discord community where Web3 and UX specialists worldwide exchange knowledge and ideas and actively discuss how to grow together for the Web3 user experience.
Besides, here are a few other awesome resources to learn from.
.png)
Asif is a Fintech & cryptocurrency enthusiast who's been writing on the subject since 2015. When not busy writing, he can be found reading books or traveling. He holds an M.Sc in Life Science and an MBA in Finance & Banking.
