The mandate of product (UX/UI) design for Web3 companies has always been to bridge the gap between new users who are not familiar with the crypto/NFT space and existing users who are well-acquainted with such technologies.
Product design for Web3 requires a non-savvy Internet user to understand things that go beyond the scope of a lazy buyer. What is gas? How do I transfer crypto into Metamask or another web wallet? Where should I store the keys to my web wallet? Which web wallets should I use? How do I know if my bid is successful?
In my experience working in the Web3 space whether in crypto or NFTs, it has been an exciting ride to be able to create new experiences tailored to increase user adoption in the Web3 space, but the stakes have never been higher; for the technology is yet to mature and people still require education, onboarding and easy navigation in order to traverse the Web3 multiverse.
What I hope to achieve through this article is the differentiation of product design in Web3 vs Web2 (e.g. SaaS products) and provide a framework in order to understand what can be done differently. This is not by any means a definitive exemplar, it is rather an attempt to push the conversation forward. Some of the key takeaways I hope to push forth:
- Web3 product design is currently less established than web2 because of the lack of existing user patterns (there is a lot still at the experimental stage which gives UX/UI designers more room to ideate and problem-solve)
- The conventional UX patterns used by Web2 products may not be applicable to Web3 products
- Building a successful Web3 product will require not just engineering muscle, but design ingenuity because of the hurdles required by users to reach a desired end state
Web2 Product Design: Following The Big Boys
It seems that in the “traditional” Web2 space, the big boys set the tone that the rest of us try our best to follow. By that I mean that the market leaders in the Web2 space would try to set the tone for building graphical user interfaces on the Internet. Just take a look at the formation of the design system in the context of Web2.
With the example of Yahoo, the Yahoo User Interface (YUI) was one of the first pioneers of creating a set of reusable patterns and components that other companies could use to build their own UI.
You can also take a look at the documentation of the YUI here: https://clarle.github.io/yui3/
With the advent of open source CSS and design system frameworks like Bootstrap or Material Design, the Internet became a place where patterns established by market leaders were quickly followed and rarely challenged as the way a user interacts with a modal or website does not change much from industry to industry within the Web2 space.
An example of this would be the checkout flow UX across e-commerce platforms:
Product selection > cart confirmation > payment options > confirmation > success or error states
As these user patterns usually led to some sort of a “conversion” in the form of a purchase, the UX/UI used to lead the user to such an ideal state would be systematised, with perhaps the only design-driven innovation would be the critical UX features in every highly differentiated Web2 product; think “tweet” for Twitter or searching for apartments on AirBnb. The goal was to reduce the number of steps the user takes to reach the conversion and to remove obstacles (i.e. clutter) from the user’s way.
Web2 design systems are also currently working as they should; as one can see via a website, web application or mobile app that there are already established patterns of building these interfaces that are already steeped in the mind of the average user. Components such as search bars and confirmation modals all have a “tried-and-tested” pattern and product designers know exactly where to place them on a wireframe.
For Web3 however, due to the evolving nature of the technology and the pace of innovation, it is difficult to set a tradition for Web3 product design. What one can do is to build upon existing Web2 patterns but adopt them for Web3 usage.
Web3 Product Design: Redefining Internet Interaction
With the pace of the Internet evolving beyond “conversions” into “interactions”, product design for Web3 becomes more complex. One on hand, one has to convince users to try a new browser plugin that they may have never heard before i.e. Metamask, and on another, get them to try to interact with interfaces beyond just copy, images and videos on 2D screens.
On the product design side, the design of an NFT marketplace would look quite different compared to traditional e-commerce marketplaces. Instead of the flow used above for checkout, a Web3 checkout flow looks something like this from the perspective of a buyer instead:
NFT selection > cart confirmation > wallet connection> transaction confirmation (gas or other TX fees) > success or error states
OR
NFT selection > bid confirmation > wallet connection> transaction confirmation (gas or other TX fees) > countdown modal for bid > success or error states
One can immediately see that there are more steps taken in order to “convert” browsers into buyers, and each of these steps have dependencies that make e-commerce checkout flows look like a walk in the park.
XRP has successfully solved one step in the buyer checkout flow by easing the process by which a non crypto user could easily deposit and transfer funds into and out of their XUMM wallet, a non-custodial wallet which gives users direct access to their funds (NYKNYC) and payments through QR code or a biometric system. This reduces the user friction at the checkout stage and provides an easier way to make transactions in Web3.
All these questions have to be answered progressively or they risk overloading the user with a lot of unnecessary information at the onboarding or checkout stage.
Comparing apple to apple, one can also see that trying to apply a standardised design system for Web3 products is challenging because they are many “interactions” at play.
A great framework to start off with is Polygon’s recent Web3 design system, Finity.
You can take a look at Polygon’s Design System here: https://finity.polygon.technology/
Polygon’s design system still drills down to basic Web2 component design, but it has also taken into account key interactions that are required on Web3 platforms.
However, like many other Web3 projects, this design system is by no means conclusive, and will likely be one among many to set the foundation but not the final “conversions” or “interactions” demanded by Web3 users.
How Product Design Will Likely Change For Web3 Products
With the diversity of possible use cases among various Web3 products, what stands out is the lack of one single point of conversion or interaction like in many traditional Web2 products. Many roads lead to Rome, or beyond it. Beyond today’s Web3 startups, there will be an increasing number of problems to be solved and use cases that arise from today’s user interaction with Web2 and Web3 products.
In order to help onboard more users into the Web3 multiverse, it would be prudent not to shake the boat by reinventing the UX patterns that have defined the Web2 world, but to build upon what has been built so far and adapt them to fulfilling use cases in the Web3 world. This can include building design systems that can anticipate new use cases for emerging technologies in the Web3 ecosystem and aligning developer expectations with how the smart contract will interact with the application layer (UI) of the product.
With the increasing usage of AR/VR technology and the push for VR by tech giants like Meta, it is not surprising that we will likely see a greater need for accessibility, innovative design and UX-heavy design processes.
With increasingly sophisticated technologies being built on the blockchain, product design needs to rise to the occasion to provide users with better ways of onboarding, understanding, learning and transacting in the Web3 multiverse. The onus is on product and interaction design to create a more inclusive, multilateral and empathetic framework for every Web3 user on different parts of the world.
