Designing UX for Web 3.0

As we speak, hundreds of VCs & multi-millionaire companies are pouring their billions into this new industry. Companies are re-branding to have some stake in this new “metaverse”. Web3 is on the radar of huge companies, and we know that where there’s money, there’s traction. However, as a design enthusiast, I want to discuss what this means for the user experience and the design of web3 and blockchain. The popularity of bitcoin, Ethereum, and other cryptocurrencies are also starting to become considered a trendier asset class to invest in. As well as a breadth of other factors, individuals are excited by this potential future of the internet. The initial hype of the blockchain has started to become a trend and has the likelihood to become the future of the internet. This blog is mainly concentrated on the Web3 space, concerned with the UX of dApps (which stands for decentralized applications and just simply are apps that we currently have, but built on the Ethereum blockchain).

Designing UX for Web 3.0

What is web3?

To answer this question we must know the evolution of the internet from the very beginning. Learning the evolution of something, the different characteristics of each phase, and the type of user gives us an insight into the design challenges faced then and how the designers in that phase used to tackle them.

Evolution of Web — In terms of design

The Internet started with Web 1.0, where the internet was nothing but a set of hyperlinks, and an exclusive group of people was responsible for creating all the content that was available on the internet. The majority of users were passive consumers of content. And the websites were designed for some static/ fixed data only.

Now comes web 2.0. Yes, the one we are currently using. Web 2.0 allows anyone to create content on the platform. No longer were users just passively consuming, they were creating, sharing, and contributing in a dynamic/ constantly changing environment. Hence, it experiences heavier user participation, interaction, and personalization. Think of apps, podcasting, social media, blogging, tweeting, etc. these platforms are facilitated by centralized organizations that control all the content online. This was the phase, where the new field of design gained its existence. As more population joined the internet and began using it for everything, the design started to take on another meaning. Content creators for the web now not just cared about aesthetics but also the whole “experience” the user will have while navigating through their platform or services.

Web 3.0, the one that is currently being hyped and is expected to be the future of the internet; on the other hand, aims to solve a lot of centralization and privacy issues faced in the Web2.0 phase by featuring a fully decentralized internet. Users’ data is generally anonymized and the whole internet runs on the blockchain, using dApps (decentralized apps) as the interaction interface.

For deeper insight into the evolution and characteristics of Web3.0 check out this amazing blog by Supriya Patidar on Coming of Web 3.0 — The Decentralized Internet.

How designing for Web 3.0 is different?

While researching for this blog, I came across a lot of articles, where the major difference in the design of web3 was told to be the creative elements used in the design. Though I agree that the website that we are building currently has beautiful UI, that has nothing to do with Web3. It’s just the evolution of UI design with time. The main difference that Web3 design has from what we currently have is the UX problems the designers might face while designing a user-centered design for Web3 applications, e.g.,

• Lack of knowledge about the new technology
• Gaining the trust of the users through transparent design but at the same time, not overwhelming users by showing excess information
• Ir-reversibility of transactions in certain actions during the process

dApps are fundamentally different from the normal web or mobile apps because they are based on, and should strongly convey, the powerful principles enabled by the Blockchain:

Decentralization, Transparency, Trust-lessness, Immutability, Un-censorability, etc.

So, similar to current web 2.0 apps, design factors will change depending on the type of dApp for example finance vs gaming vs arts and collectibles. However, due to the nature and current stage of blockchain adoption, there will be a few generalized design principles to consider like educating through design, fostering trust, irreversibility of transactions, etc.

Key Features of Web3

To understand the design principles of Web3, we first must know the features/services offered by web3. Web3 aims to introduce decentralization and transparency to a whole new level than what we had in Web 2.0.

• Ubiquity: Web 3.0 has the capacity of being everywhere at any time. In Web 2.0, Facebook provides this feature as users can capture and share their pictures on it, and other users can see that until they have access to it. Web 3.0 will take this further and provide the internet available everywhere at any time.
• Semantic Web: Semantic is the study of content; thus, the semantic web allows machines to analyze loads of data from the web. Semantics in the web will enable machines to decode meaning and emotions from data. Consequently, users will have a better experience driven by enhanced data connectivity.
• Open: It will be an open-source software built by an open and accessible community of developers and executed in the full view of the world.
• Trustless: It will allow participants to interact publicly or privately without any trusted third party.
• Permission-less: Neither users nor suppliers need any authorization from a governing body for participating.

Web3 Design Principles

Today, a user can interact with a Smart Contract deployed on the Blockchain in several ways: either directly via command line, through the form-like interfaces of their digital wallet or dApp browser, or maybe through the rich front-end that the Smart Contract developer has or will develop. Though it is obvious that the path to mass adoption of dApps goes through the latter: providing a rich UI unified with the experience of dealing with a Blockchain-based distributed application.

The objective of these principles is that once applied correctly, a user that lands on a dApp can immediately tell he is interacting with the blockchain and is able to access the powerful properties of the Blockchain and therefore knows he can trust all the interactions with the application.

Principle 1: Transparency in Design

Web3 comes as Web 2.0 with additional features like “trustless” and “transparent”. If a user, especially a non-technical one, can’t recognize by looking at the UI if a dApp is a dApp or a normal web app, nor can he verify if the contents he is seeing, or his interactions with it are related to a Blockchain, then he isn’t granted the trustlessness and transparency that the Blockchain is supposed to deliver.

Key points of defining this principle:

• The data source must be mentioned properly. The data from the blockchain and that from the normal web must be labeled properly, along with the contract address. Also, the data coming from the blockchain can be linked to any of the blockchain explorers (like Etherscan.io, Blockchain.com, etc.) to gain the trust of the users.
• Users must be told about security measures taken (e.g. if a particular smart contract used in the dApp has been audited), as this will help instill trust in the protocol. Allow technical users to delve deeper into docs, that outline security measures, and fallbacks; but make it easy for the average user to understand just how secure it is without relying on your word for it.
• For any De-Fi dApp, that hosts many transactions; all relevant information regarding transactions should be available for users. The status of the transactions can be depicted properly along with transaction details like the sender’s and receiver’s wallet address, the conversion rate in FIAT currency, breakdown of total payment depicting gas fees, and other charges.

Uniswap interface, showing gas fee and other fees for processing transaction

• The Design must clearly mention the irreversible step as an alert to users for proceeding further, clarify actions that will cost; without overwhelming the users

Principle 2: Decentralization through Design

Decentralization is a new powerful form of globalization. These design principles aim to get the conversation started in both, thinking about how to make the user feel part of a community and of something materialistically larger than themselves.

Key points of defining this principle:

• A sense of belonging to a community is more important in dApps as users will need to bond to a decentralized brand and product. That doesn’t mean to fit a social network in the dApp, although some might benefit from tighter integration with the community chat chosen by the project. The design of the dApp must show the greater mission of the community and how their contribution is helping in achieving the goal.

Principle 3: General Web3 UX principles

These principles don’t directly relate to any of the key features of Web3, rather are based on the general working of the blockchain and Web3 network. These principles aim to solve the day-to-day UX problems.

Key points of defining this principle:

• As the user experiences the dApp, education should be weaved into their whole experience in chunks so that they’re not overwhelmed by the information and instead feel guided. As they learn more about blockchain, progressively increase their exposure to blockchain mechanisms. Other ways of not overwhelming can include separating users into two levels basic and advanced users.
• A well-designed dApp must clarify the transaction information and status at each step and manage the user’s wait until his action is confirmed. The average waiting time for block generation must be provided to the user at every transaction. The design can also inculcate the feature of a live transaction track for keeping the user up-to-date with the process.
• The educational tours through the dApp can be made a permanent option for non-technical audiences using the dApp. Also, definitions of specific Web3 lingo can be provided in form of tooltip interactions Or, in form of pop-ups, which can be dismissed easily to keep users in context with the dApp.

https://ethereum.org/en/dapps/ Showing definitions of Web3 lingo in form of images

• As users familiarise themselves with the space, catch them before they fall by alerting them to the implications of risky moves. Display what step users are on in the overall flow so that they’re able to navigate back and know how close they are to ‘finishing’ a task.

Afterthoughts

As designers, just like it’s incredibly useful in web 2.0 to understand the problems and limitations that the developers face when developing backend or frontend, it would even be more important in web 3.0 to understand the mechanics of blockchain. Doing so would help us empathize and foster communication with developers, and avert the need to rely on them to tell us what’s possible to implement and design based on the input given by the developers. Communication is half the battle in design, and doing it correctly (asking the right people, the right questions) would lead to a well thought and detailed UX.

To conclude this blog, I would just like to say that, there’s a lot left to be discussed around UX problems in the blockchain itself (like backend based -security and performance issues to name a few), which largely affect the user experience.

Resources

Here are some resources related to Design in Web 3.0 space, that I read for inspiration for this blog:

• Design principles for web3 — Angela Ching
• Web3 Design Principles — Beltran
• Deep Work Studio
• Blockchain Design Principles — Sarah Baker Mills

About Me

Hey there! I am Manav Agarwal, an Undergraduate Student at IIIT-Allahabad & a member of the Design wing at GeekHaven, IIIT-Allahabad. Check out my design profile on Behance, here.