An Introduction To Product (UX/UI) Design For Web3

While full Web3 adoption is still a long way to come, blockchain-powered Web3 space products already exist. And they show the promise of the technologies behind them.

The Web3 blockchain market is already worth $2.9 bn. What’s more, its size is expected to grow by 41.6% by 2028 and reach $23.3 bn.

We’ve been working with Web3 product design for some time now; our Gigzi case study is just one example. Today, we’d like to share with you what we’ve learned about Web3 UI/UX design along the way and answer these questions:

• What is Web3, and how is it different from Web2 and Web1?
• How are Web3 technologies applied in software solutions?
• What are the key challenges in Web3 adoption?
• Why does UI/UX design matter for Web3 products?
• What is Web 3 design, and what are its best practices?

What Is Web3

Web3 is a new iteration of the internet, a decentralized, blockchain-powered version of the digital world. It’s also permissionless, “trustless,” and has native payments. 

In this new internet, users would have more control over the web. Right now, a major chunk of it is managed by a handful of Big Tech companies. But in a web running on blockchain, every user in the Web3 community would own a small part. Users wouldn’t need third parties to verify information or enforce rules.

A Brief History of the Web

Web1 was born with the wide adoption of the internet and existed roughly from 1991 to 2004. Back then, internet users were mostly readers-only. They consumed the content created by website owners but couldn’t easily create their own or interact with other users.

The launch of social media platforms (MySpace in 2003 and Facebook in 2004) kickstarted Web2 – the period we’re currently living in. From then on, users weren’t only consuming content. They started creating it and interacting with each other on a large scale, too.

3 Main Use Cases for Web3

While Web3 isn’t the reality of the internet today, there are multiple ways its principles get applied to existing products – notably, these three.

Decentralized Autonomous Organizations (DAOs)

Think of a DAO as a peculiar online community where each member owns a part of it. The rules of its governance and functioning, along with decisions and transactions, are written into publicly available blockchain code.

This organizational model can be applied in many fields, from peer-to-peer lending platforms to NGOs and content-creator communities.

Case in point:

• Uniswap
• MakerDAO
• CityDAO

Web3 Gaming (GameFi) & Metaverse

GameFi, a portmanteau of gaming and finance, is already here. Web3 games use cryptocurrencies and/or NFTs for in-game assets and transactions, along with a blockchain ledger. They also often employ a play-to-earn model to incentivize gamers.

The same model can be applied to the metaverse. In-metaverse assets like unique skins, digital art, and even real estate property can be traded as NFTs.

Case in point:

• Axie Infinity
• Skyweaver
• Sandbox

Decentralized Finance (DeFi)

DeFi is a moniker for finance applications running on the blockchain; they may also be using crypto or smart contracts. They range from crypto exchanges and trading platforms to peer-to-peer lending applications and tokenized derivatives solutions.

DeFi is, by far, one of the most prominent use cases for blockchain and Web3. The DeFi total market size amounted to almost $80 billion in June 2022.

Case in point:

• Synthetix
• Aave
• Compound

2 Key Challenges Web3 Products Run Into

Web3 adoption may not be as smooth as some hope, all because of the two following obstacles.

Onboarding Can Be Unnecessarily Complicated

For a newcomer, opening a Web3 application, such as a crypto exchange platform, for the first time can be extremely stressful.

They might mutter, “What in the world is a gas fee?” while figuring out how different chains work and how exchange rates are determined. That’s not to mention impossible-to-memorize wallet addresses and hidden charges!

Blockchain & Crypto Don’t Have a Great Mainstream Reputation

The mainstream media typically pay attention to blockchain projects only when they fail or scam people. For example, FTX’s recent downfall and bankruptcy gained massive coverage. Bitcoin dips and hacks like The DAO one also often find their way to popular media.

So, understandably, some may hear “blockchain” and think “scam” by default. Others might know what the technology promises – but still have reservations because of its track record.

3 Reasons Why UI/UX Design Matters in the Web3 World

Before we break down Web3 design trends, let’s take a moment to see what benefits you can reap with a well-thought-out UI/UX.

It Helps You Foster Trust & Loyalty

Users may be skeptical about your product because it uses a blockchain, especially if it involves money. Your task is to reassure them that their data and money are in safe hands. Your UI/UX design is how you can do it in the most efficient way possible.

It’s the Key to Attracting Newcomers to Blockchain

As we also mentioned in our trading user experience blog post, the world of blockchain is no longer reserved for techies and developers. But there’s one “but”: newcomers will come to you only if you make your product intuitive and easy to use. Few will want to spend hours reading blockchain glossaries online just to use your product.

It Makes You Stand Out

As tech-savvy users have long been the target audience for Web3 products, UI/UX design was an afterthought in many of them. So, modern and intuitive UI/UX isn’t as widespread as you might think. And when done right, the UI/UX can give your product a competitive edge.

3 Best Web3 Product Design Practices

Based on our experience in working on Gigzi and other blockchain products, we can define three UI/UX cornerstones for Web3 applications: education, transparency, and familiarity.

Design a Gentle Learning Curve

To avoid overwhelming the user during onboarding and down the road, you’ll need to approach the Web3 design patterns from the education point of view. Consider your user a learner. Your task is to help them become blockchain-literate.

To that end, you should:

• Minimize your use of blockchain jargon in the UI.
• If there are technical terms you can’t do without, add their definitions under a question mark.
• Design a full-fledged onboarding tour for first-time users, along with in-app guidance and warnings.
• Add relevant educational materials (tutorials, how-to guides) within the application.
• Make wallet and transaction hashes easier to read using Ethereum Name Service.

Be Transparent About the App’s Inner Workings

Transparency is the key to projecting reliability, stability, and trustworthiness. These three nouns are the basis for fostering trust.

So, you’ll need to strike a fine balance between making blockchain easy to understand and being transparent. Here’s what it can mean in practice:

• Break down all the fees before the user makes a transaction, including gas fees.
• Show the status of every transaction, along with an estimated waiting time.
• Introduce certain security measures, like not allowing copy-pasting in certain fields.
• Explain invisible security protocols, such as the encryption method.

MetaMask is one of the best Web3 design examples here. This crypto wallet displays a detailed breakdown of fees, including not just the gas fee but also the MetaMask one. It also warns users that gas fees can vary due to the nature of crypto exchanges.

Make It as Familiar as Possible

This one can be summed up as “don’t try to reinvent the wheel.” If you try to, you’ll likely alienate your users. They, especially in the younger demographic, expect certain button placements and supported gestures from your product without even realizing it.

How do you make your product as familiar as possible? Here are three Web3 design principles to keep in mind:

• Don’t hesitate to apply Web2 metaphors and workflows in your Web3 applications: progress bars, transaction statuses, etc.
• Follow the intuitive UI/UX design principles: let the user backtrack easily, avoid clutter, follow the law of locality, etc.
• Use platform-specific design conventions to give the application that “native” feel (button shapes, icons, fonts, etc.)

How Arounda Applied These 3 Web3 Design Principles in Gigzi

Gigzi is a decentralized wealth management platform powered by Ethereum and smart contracts. The DeFi startup behind it hired us to develop its brand, UI/UX, landing page, ICO cabinet, and wallet.

Here’s how our team applied the three design principles above to the Gigzi Wallet:

• Gentle learning curve. Gigzi UI contains a minimum of blockchain and crypto jargon – it’s replaced by easier-to-understand terms like “network fee.” We also added helpful information under question mark buttons wherever appropriate.
• Transparency. Before users can convert assets, they have to review the transaction details (network and Gigzi fees) and confirm they agree with the terms. The exchange rate is also displayed and refreshed regularly.
• Familiarity. The transactions part of the interface is designed to resemble that of banking apps. It includes search, commenting, and filtering features. Users can also add wallet addresses to their contacts under easy-to-read names.

You can read about our experience in developing Gigzi in more detail in our portfolio.

3 More Web3 Best Practices in ERP Design

As secure information exchange remains the number one business use case for blockchain, Web3 ERP systems offer a way to implement it.

When it comes to designing blockchain ERP systems, the same three principles above apply to them. On top of that, there are three more best practices in ERP system design:

• Add a powerful search tool
• Allow your users to visualize data in standard and custom dashboards
• Keep the modules consistent and ensure data flow and feature sharing between them

If you want to learn more about ERP design, we’ve published a detailed blog post oncdesigning UI/UX for ERP systems.

Ace Your Web3 Product Design with Arounda

Web3 adoption is ongoing, and it’s facing major challenges: namely, a lack of trust and a steep learning curve. To overcome them in your product, you’ll have to pay extra attention to your UI/UX design. Use it to build trust and make your application accessible to newcomers.

While it may seem easy to achieve on paper, in practice, Web3 UI/UX design takes hours upon hours of hard work and expert minds to craft. So, if you’d like someone to give you a hand with it, don’t hesitate to reach out to us at Arounda.

We’re no strangers to the challenges of Web3 design: we’ve crafted intuitive, educative, and transparent UI/UX for multiple Web3 products, including Gigzi. Our UI/UX design services are full-cycle: we’ll be there for you during the discovery, UX design, UI design, and support stages.

‍