Five tips to make web3 onboarding easy, fun, and secure #BuiltWithSequence

One of the most important parts about building an app is making it fun and easy to use. Unfortunately, delivering a seamless user experience has been one of the most complex parts about building a web3 app. UX is often seen as the biggest hurdle to onboarding more users to blockchain technologies.

Luckily, we’ve dug into some of the best dapps out there and put together a few tips and tricks for building a user-friendly onboarding experience.

#1 Embed a wallet into your dapp

A user’s first experience with your app is key. You want to make sure they have an easy and seamless experience so that they can properly use and enjoy your app. You have to think deeply about the flow and make sure you’re putting as few roadblocks in your users’ way as possible.

Unfortunately, up until now, many web3 applications have defaulted to wallets like MetaMask, which require a user to install a browser extension. The user has to sign in to a completely different application before they can use yours. This is an unfriendly user experience that results in many users abandoning your app entirely — it’s one more roadblock to them experiencing your app!

Instead of forcing a user to download an extension, consider embedding a wallet into your application. The Sequence Wallet allows users to login to their wallet directly from your app. You can customize the Sequence Wallet to look like part of your application, so users will feel like they are logging into your app directly, mirroring the web2 experiences most people are familiar with.

The Sequence Wallet has been customized to match the look and feel of DAZN Boxing

Sequence Wallet also automatically signs a message confirming ownership when the user logs in, so there is no need to ask users to sign another confusing message.

Later on, when the user signs a transaction, the situation is the same: they can sign from an embeddable wallet without ever leaving the dapp or being pushed into an unknown environment.

The embeddable wallet and intuitive transaction-signing process remove roadblocks from a user’s experience, allowing them to focus on your product.

#2 Provide social and email login

Account abstraction is a hot topic in web3 — one that Vitalik has advocated for years — and it involves separating the signer of a transaction from where the tokens are held. This is done by turning accounts into smart contracts, which means no centralized entity is involved. But how can we leverage account abstraction to improve the onboarding experience?

Account abstraction opens up many opportunities that aren’t available in traditional (i.e. EOA a.k.a. externally owned accounts) blockchain wallets, such as social login. With account abstraction and Sequence Wallet, your users don’t have to remember a private key in order to use your application, but can log in to their wallet using their existing email or social accounts — and this is all achieved in a secure, non-custodial manner that enables account recovery.

It’s also important to add a layer of abstraction between the user and the underlying blockchain technology. The user most likely does not need to know which blockchain they are connecting to. With web2, for example, very few users know (or care) whether the application they’re using is hosted on AWS or Google Cloud. The Sequence Wallet creates this abstraction layer: you as the developer can choose the chain that the wallet connects to rather than relying on the user to switch chains. In other words, it will “just work” for the user.

#3 Make buying, trading, and viewing NFTs and collectibles easy

In some applications, such as Axie Infinity, you may have to buy an NFT to get access. In many instances, the application will direct you to an external site in order to buy an NFT, adding a major hurdle to the onboarding process.

Axie Infinity on OpenSea

For a person who is not versed in crypto, this is a complete break in the flow. They first have to figure out how to get the appropriate ERC-20 token in order to buy an NFT just to access the app they wanted to use. And, if they do figure out how to acquire the ERC-20 token and then the NFT, the user might be left wondering where their NFT has gone if they happen to be using a MetaMask wallet. Unfortunately, you can’t view images, video or metadata in the MetaMask UI, which makes the user experience quite confusing. Fortunately, there’s a solution :)

To make buying and using NFTs and collectibles more seamless, consider using tools with strong NFT and collectibles support. The Sequence Wallet has a built-in NFT UI, which renders artwork, video, sound, and metadata beautifully, providing a great user experience for any application that requires NFTs or collectibles.

For purchasing collectibles, Sequence has built-in onramps so your users can easily buy the appropriate ERC-20 token directly with their credit or debit card. Not only does this mimic the experience users have come to expect, it also reduces the amount of new information they have to absorb during onboarding. And soon, we’ll have an NFT checkout solution, so that your users can buy collectibles directly with credit or debit, without needing to acquire an ERC-20 token at all.

Beyond the initial purchase of collectibles, many builders want to facilitate a great trading experience for their users. Rather than send your users to a third-party site, consider having your own in-app/in-game marketplace. With Marketplace SDKs and even no-code solutions, it’s easy to implement your own marketplace, which makes it easy for users to trade your collectibles without ever needing to leave your application.

#4 Remove gas fees

Gas fees are a big pain point when onboarding users to web3. The concept of paying for each action you perform on the Internet is foreign to virtually everyone. Imagine if you had to pay for each Tweet you published! In fact, there is a cost associated with each Tweet, but Twitter absorbs the cost. In web3, however, gas fees (a.k.a. transaction fees) are put onto users, resulting in an unfamiliar and unattractive user experience. And, since gas fees are denominated in specific cryptocurrencies that most users do not hold, the need to pay for gas creates additional friction.

Fortunately, there are multiple ways to abstract the cost of gas, and these are known as meta transactions. The most common way is for the developer to cover the gas fee completely, which means the user can use the application and add data to the blockchain for free. We call this method sponsored transactions or gasless transactions, which results in a significantly improved user experience, similar to what people are accustomed to with web2.

Meta transactions work by separating the original signer of the transaction (i.e. the user) from the entity who pays the transaction through a relayer. Meta transactions are automatically implemented into the Sequence Wallet, which means you can opt to implement gasless transactions for your users by sponsoring the fees. For situations in which you want users to pay their own gas, Sequence allows users to pay transaction fees with any ERC-20 token (e.g. USDC, DAI, ETH, MATIC) instead of having to purchase the chain’s native token.

#5 Simplify transactions

Every time a user wants to commit information to the blockchain, it’s necessary to sign a transaction, which is an unfamiliar behaviour for any web2 user and can cause confusion. Fortunately, with Sequence, you can minimize the number of transactions a user needs to sign by batching transactions. Batching is when you commit multiple transactions to the chain simultaneously, and the user only has to sign once. This way, you can make sure users only need to sign important transactions, and deliver them a more enjoyable experience in the process.

As a bonus, Sequence displays transactions in a human-readable format, delivering a more secure and intuitive experience to your users.

Build a better web3

A better user experience means more people get to enjoy and explore web3. To summarize, the five tips are:

1. Embed a wallet into your app
2. Provide social and email login
3. Make buying, trading, and viewing NFTs and collectibles easy
4. Remove gas fees
5. Simplify transactions

For more information on building user-friendly web3 applications, chat in our Discord. We have a community full of developers building a better future and we’d love to hear from you!

Website | Twitter | Discord | Documentation