As the world moves from Web2 to Web3, designing around the finality of actions and user responsibility is a must.

At the time of writing this article, the Web3 ecosystem is thriving but still very young. New decentralized protocols are born every day, many projects are focused on building development tools, and collectively, every player is striving for mass adoption among end-users.

While it is exciting that these technologies have the power to change the world, their adoption won’t happen without user interaction. This raises the question of how to optimize the user experience to make it Web3-aligned. Turns out, it takes more than technology potential. It takes a change in mindset.

The UI of Web3 projects should move beyond questionable Web2 practices and provide a standardized flow that removes fear from the user interaction and directly incorporates the core concepts of data and asset protection introduced by the blockchain protocols.

This article aims to serve as a manifesto that would lead to a well-documented framework of best UX practices. These would directly solve blockchain-specific challenges that users encounter as they get to explore — and adopt — new Web3 solutions.

Big tech profiting from data vs higher user responsibility

The complete irreversibility of online interactions was nearly unheard of in the Web2 world. Any SEPA transaction, credit card payment, or even DNS changes were in a way reversible. Users were protected by centralized systems and legal frameworks that allowed them to reverse the transaction if it was caused by human or system error. And they knew this. This made them more relaxed in online interactions and people got to share more. In exchange, users’ privacy got exploited, and for a while, this was a fair trade-off. Not until the data abuse by the big tech got so apparent and large-scale that even more carefree online users got second thoughts before clicking the “Submit” button.

With Web3, however, the irreversibility and finality of actions, along with other new, “scary” concepts, started to redefine the way things online worked. Most importantly, the self-sovereignty of users in decentralized systems placed more power in their hands, but also incomparably heavier responsibility for their own actions.

If Web3 projects are to gain trust among users, their UX should be transparent about the results of users’ activities and their role in managing assets. Not just when it comes to financial transactions, but in every interaction.

Besides the irreversibility of actions, users also care about things like storage, access, ownership, etc. When we interact with Web2 platforms and create profiles with our avatar photo, we know it is going to end up on some cloud, probably with a copy stored forever in a centralized server, and that it could get hacked or abused. Those have simply been the typical trade-offs of data upload in the Web2 environment.

In Web3, this should be unthinkable.

Framework formation — user pain points

To illustrate the prerequisites of a Web3 UX framework, we should start with the list of open questions conscious users might have when interacting with Web3 apps (the list below is a modified version of Web3 Principles by beltran):

1. Is it safe to do this [action dapp asks me to do]?
2. What is the consequence/effect of the [action(s) dapp asks me to do]?
3. Will my funds be at risk if I make a mistake? How much is at risk?
4. How do I know that what I’m doing is private? Where does my data go? Where will it be stored? Can I be identified? Who can see the data I input?
5. If blockchain technology is to be trusted, how do I know which data is stored on the blockchain and which is not?
6. What data does not come from the blockchain network? How can I verify that the data is stored on the blockchain?
7. Where is the code being run? Can I see the code?
8. What will happen after I do [this action]? What if I don’t complete it?
9. How am I supposed to do [crypto action here]?
10. What does this [weird crypto word] mean?
11. What are the possible security risks? What can I do to avoid them?
12. …and many more.

Original post: Web3 Design Principles

When building in Web3, we should understand that users will hold us accountable for what we preach. And it’s only by addressing their dilemmas and fears that we overcome the barriers to entry and previous reliance on a middleman.

Web3 UX in practice

Let’s look at an example of a Web3 platform and how it addresses the user-product relationship through decentralized principles.

DSCVR describes itself as a Web3 social media. On the first visit, the initial popup shows a disclaimer saying: “Everything you’re interacting with now is built on-chain.”

This seems like the approach in the right direction. However, it is not fully granular and specific, so it is hard to say where an uploaded avatar photo would really end up, for how long, and under whose ownership, but at least the general idea of “everything on chain” is present.

At avatar photo upload, a typical pop-up appears, but with only a few details. The placeholder text clearly states that NFT URL is accepted, so it is not an actual photo upload, and added tooltip question directly takes us to the docs where we can research in-depth which avatars are compatible. From this, we can then conclude answers to many other questions.

In general, a user interacting with a Web3 platform would typically follow a similar flow, with avatar photo upload being their first action of data submission which could raise several thoughts:

• Where is this photo going to get uploaded?
• If it is uploaded to a centralized, Web2 cloud, which one is it, and why on a Web2 cloud if this is a Web3 solution?
• If this is going to be saved on the blockchain, will this cost me anything?
• If it is going to be stored on the blockchain, will anyone be able to see it via my wallet and transactions?
• Am I creating an NFT?
• If this is ending up on blockchain storage, will I be able to delete it after a while? Or will it stay there permanently?
• At which step of the upload wizard does uploading a photo become irreversible?
• Who is the legal owner of the uploaded photo? Is the photo stored in a wallet that I control or does the platform control it?
• Etc.

These are all legitimate questions, and we shouldn’t merely trust that the user will read the documentation to find answers. Docs will not cut it.

That is why we are proposing a community-managed Web3 UX Pattern Framework where collectively we can address crucial open questions of usability and directly improve the adoption of Web3 services.

The Web3 UX design framework

With the implementation of core Web3 principles, we can impact the UX and make it radically different from Web2 by offering users more sovereignty in managing, owning, and transmitting their data and assets.

1. Communicate finality of actions and point of no return

Irreversibility of blockchain-based interaction is probably the biggest factor of user fear towards Web3. When preparing flows, simply draw the thick red line at the point of no return. Once you are aware of where you position this line, build the UI around it, and make users understand it, too.

2. Increase general understanding of blockchain

Even users with extensive web experience sometimes do not know what to anticipate in a Web3 interaction, so how can we expect an average online user to know about its specifics and challenges? That said, we cannot instruct them through UI without cluttering it, so we need a parallel solution that builds our users’ understanding of blockchain. Use email automation, videos, and other channels to constantly raise awareness of blockchain specifics and their role in your products.

3. Think empathically, not technically

Protocols are created by developers, and UIs are created by designers. The problem is, some protocols are so complicated that developers have a hard time translating them to designers. That is how we end up with multiple networks, bridges, and chains, all clustered together in a single UI. The whole blockchain ecosystem is dispersed, each project with its own specifics. By using empathy, we should streamline the UI to provide all the crucial protocol functionalities packed in a user-friendly interface that Web2 users are familiar with.

So how do we introduce empathic, user centric standardized UIs to this? Creating and maintaining a public library, a standard of patterns is one of the ways to go, and this is what this blog proposes.

4. Offer the right help in the right context

By giving users a hand when they get stuck, we can slowly onboard them to the product, without overwhelming them on the first step. Each stage of a transaction has a specific context. Be aware of the user flow and the questions they might have, and cater helper texts with step-specific descriptions they can understand.

5. Innovate UI components that highlight irreversible actions

The user must understand what a specific action means for the safety, ownership, and manageability of their data, especially when it comes to actions that are set in stone. Keep in mind questions like, “If I confirm this step, is this final?”, “Will I be able to change my mind if I proceed to the next step?”, “Can I see the whole flow without spending or committing to anything”, “What exactly am I signing with my wallet, and will I be able to unsign it?” Then, provide answers and explanations to increase user understanding and reduce fear.

6. Use transparency and practice what you preach

If your product is said to be Web3 by nature, but your landing page gathers data through Google Analytics and Hotjar, are you really allowing your users to be in control of their data? Of course, some activity measurement is crucial for the improvement of overall UX, but can we resort to alternatives where no data is stored permanently? If we have no other options but to use GA, are we communicating this clearly to our users? How do we take care of data security?

If our product is still experimental and in the beta phase, are we clearly communicating the financial risks that come with our product?

Is the user able to backtrace all their blockchain actions via a blockchain explorer and see the status of their transactions? Can all these transactions get verified by the user?

7. Prevent errors and mitigate risks

Good systems understand errors are human traits. A certain amount of issues is a constant amongst humans and their interactions. Taking this fact as “gravity”, and taking into account that blockchain has irreversible actions, the only way to mitigate this is via error prevention. To dive deeper into error prevention, research the poka-yoke technique as the foundation of human error prevention thinking, and implement it throughout the product development.

The process of building Web3 UX

To achieve measurable goals and build a framework that does not stand on assumptions but rather on data, we also need a process framework.

For this, we have borrowed the “5 phases of design thinking” process, as documented by Flowmapp.

1. Empathize. Human-centered design is a must, as you create it for people who will use the product. Answer the question: “Who are your users?”

2. Define. Analyze your user personas and outline problem statements for them. Answer the questions: “What do these users need? What are their problems?”

3. Ideate. Generate ideas on how you can help users solve problems. Brainstorm with your team and challenge assumptions together. Answer the question: “What will be the solution?”

4. Prototype. Identify the most burning problems and work on them. Breathe life into your ideas. Experiment with scaled-down yet functional versions of solutions. As for this stage, we suggest creating:

• Lo-fi prototypes for discussing designs with colleagues
• Hi-fi prototypes for pre-testing them internally
• Visual designs to test with real users

5. Test. Try how these solutions work with the help of focus groups or real users. Based on the results, you can either proceed with the prototype or redefine problems once again and return to previous stages. Conduct more tests until you find the most effective design.

Make Web3 user-centric

It is apparent that the Web3 industry cannot only focus on protocol development. In order to boost mass adoption, we have to think about usability. It is not a new thing to put the user first and build everything user-centered, but it is yet to be applied methodically to the Web3 solutions by:

• Finding the pain points
• Empathizing
• Brainstorming
• Wireframing
• Innovating and prototyping UI components
• Testing
• Documenting and improving
• Releasing and implementation

With the core principles of decentralized data and asset management in mind, Web3 projects can and should build solutions with superior user experience.

By addressing initial fears of blockchain technology, we should help users move from big tech to blockchain-based platforms. And to a certain extent, the latter could replace the former in popularity once the Web3 advantages become apparent to conscious users caring about their data and assets.