WebFREE EP9B: UI & UX in web3

We have covered some of the main challenges of UI and UX design in web3 in the previous post. In this article, we will focus on some of the best practices and existing solutions addressing the challenges and pushing the space forward. 

We collaborated with Nathan Sorochan, Mailchain’s own Head of Product Design, on this article, and we appreciate his guidance and UX wisdom. 

Let’s dive in!

Best Practices for UI & UX Design in Web3

Focus on Usability For an Everyday User

As we are building out the web3 space, it’s important to continue building towards the level of ease and seamlessness of web2 that an everyday user is accustomed to. And while it’s tempting to focus on a web3-native audience, especially during the bear market, the growth will come when the new cohort of users onboard. The majority of users don’t care to know what’s under the hood - web1, web2, or web3 - they just want to get whatever they want to get from the web. Hence, it’s crucial to continue pushing instruments and interfaces to meet the users where they are. 

As Nathan put it, “It will be not web2 or web3. It will be just the web.”

Build Familiar

One of the promises of web3 is to fix the mistakes of web2 by regaining ownership, privacy, and permissionlessness of the web1. We shouldn’t give up the UX&UI achievements of web2 at the same time. 

You shouldn’t shy away from using existing web2 workflows and elements: progress bars, intuitive button placement, icon shapes, etc. 

Design to Educate

As many of the users will be unfamiliar with the values of web3 and various elements of web3 that come into the experience, it’s important to guide the users through the steps. 

Make sure to include an onboarding flow for first-time users, educational materials (tutorials and Q&As), in-app intuitive guidance, and, of course, safety warnings.

Be Transparent 

One of the biggest challenges of web3 is the lack of trust, and here, transparency is the key to establishing reliability. You will need to find a balance between providing important information to the user without overloading them with information. 

Mind Your Language

As you guide your user through the experience, it’s important to pay particular attention to the wording of each element of the design. You want to keep jargon to a minimum and the messages clear, informative, and concise. You also want to make sure that the language is not confusing the user. 

Nathan shared this story about Mailchain UI: the users of Mailchain can add their wallets to receive emails to the wallet addresses, if the user no longer wants to receive the messages, they can detach the wallet. Initially, the button that allowed the user to detach the wallet read “Delete,” which was confusing to the users, as it could create an impression that the wallet itself would be deleted, which was, of course, not the case. The button was soon renamed and now reads, “Remove.”

Talk to Your Users

As one of the core tenets of web3 is self-custody and privacy, many of the platforms refrain from using cookies and tracking the user activity on their websites. 

For example, the Mailchain protocol keeps the users’ privacy (although it doesn’t prevent applications built on top of it from tracking users.) This can create a challenge for collecting UX&UI feedback. Hence, when planning to build web3 way, one has to account for user interviews and other ways of collecting information rather than relying on the automated web2 tools.

Case Studies: Web3 UX&UI Solutions

Friend.Tech

Friend.tech is the newest addition to the lineup of decentralized social platforms. The idea is simple: you buy keys and get access to the person, you can trade the keys. A bonding curve mechanic gives the whole thing a little extra kick. There have been a lot of arguments in regard to the value proposition of the platform, and we’re not going to get into the pros and cons of SoFi (social finance) here. 

What we wanted to take a look at is one UI hack that made the application much more attractive to users - the Progressive Web Application design. 

One of the big challenges of crypto going mobile have been the app stores. Both ​​Google and Apple charge 30% on internal purchases, they also have rather arbitrary policies as to which crypto apps get to be published in their stores. Thus, most dApps stuck to browser interfaces.

Friend.tech found a workaround - Progressive Web Apps (PWAs), which essentially look like apps and work like websites. The key feature is that with PWA, you can have the dApp icon on the home screen, but the app works through the browser. You never have to deal with the app store. 

The downside of Friend.tech driving all this attention to PWAs is that it’s possible that the app stores will find a way to patch this loophole, thus, it may be hard to rely on it long-term. 

Mailchain

Mailchain is a protocol that allows users to send emails wallet-to-wallet, it’s web3 native email. A DAO, dApp, or another user can email directly to the user's wallet, privately and verifiably.

Mailchain follows the principle of building familiar and offers a design that functions just like your regular email but in Web3! It’s also, in the best tradition of our series - free! There is no charge for postage or gas fees. 

Users can add multiple wallets to one inbox, kind of the way you would in an email client.

Language-wise, Mailchain is also sticking to the existing habitual terms familiar to the users since the AOL days: “Compose,” “Send,” etc. 

The key differentiator, though, is that you actually own your messages. The way you own the letters your grandpa wrote to your grandma, but digitally. The platform will not read them, it will not offer you any products based on their contents, nor will it delete them. 

As a protocol that mainly aims to serve developers, Mailchain pays particular attention to having well-organized, in-depth documentation. 

In Conclusion

As web3 is approaching mainstream, UI and UX design is becoming more crucial than ever, and blending web2's usability with web3's decentralized ethos can help create powerful products. UI and UX designers with experience in web2 will find that many of the principles, such as focusing on usability and seamlessness, are transferable to web3. They will also see that web3 opens opportunities for experiences that aren’t available in web2, ownership, for example. 

Are you ready to be part of the web3 revolution? Dive deeper by joining the Mailchain community, follow the WebFree series, and let's build the future of the web together.

‍