The Best UI/UX in the Polkadot Ecosystem

[shawntabrizi]

I wanted to open a thread where we can highlight great UI/UX experiences in the Polkadot ecosystem, and use it as an opportunity to spread those design decisions around the ecosystem.

I will start by highlighting Astar which has my favorite account selection UI.

Astar Portal - Astar & Shiden Network

At the top, there is an easy drop down selector to choose which wallet we want to use to interact with, whether it be Polkadot JS, Talisman, Metamask, etc… Very simple to understand where the accounts are coming from, and easy to change the wallet if needed.

Then, when viewing all accounts under a wallet, I am able to see a list of all accounts, and the relevant balances of each account for this network.

This is really important to someone like me who manages many different accounts in Polkadot JS. It can be hard to know which accounts are the ones that I used on this network and holds tokens. On other sites, I need to click through each account one by one, and see which ones have a balance.

In this case, I can switch on “Show ASTR balance”, and immediately see which are the relevant accounts for me to check into. In this case, Accounts 1 and 3 have a balance, while 2 and 4 do not.

I really hope more teams learn from and use this pattern when building portals, and understand what kinds of problems this solves.

What are the other “best ui/ux” that you have found in and outside of the Polkadot Ecosystem? What can we learn, copy, and improve?

[Birdo]

gm, Birdo from Talisman here.
Naturally a little biased, but I think the account / portfolio view in the Talisman wallet is an excellent example of how to display assets in Polkadot. As i’m a new user I can only add one image, this post originally had a little more eye candy!

The wallet structures the UI by account, then asset, then network. It gives us the unique ability to display funds to users in a way that’s congruent with the fact that users have several key-pairs, each with assets on several chains.
When opening the wallet, when using multiple accounts, Talisman gives you a breakdown of your total portfolio and then a list of accounts.

The aha moment comes when looking at an account that has an asset on multiple networks (as a result of XCM), as we have structured the wallet by asset rather than the conventional approach to filter by network. We think the approach in the Talisman wallet is a UX pattern that will support the ecosystem now and in the future, as users have assets more dispersed across the ecosystem.

In the example above, you can see I have KSM across 4 different chains. Hover states indicate the name of each network. When navigating to a specific asset, Talisman will then show you all the networks you have that asset on, as well as the status of the asset.

Not only can you do this on a specific account, you can do it across every key-pair in the wallet at once. Allowing you to see all your assets, and the networks they’re on, within the same screen. Making it 10x easier to find where your assets are in the ecosystem.

This also works for Ethereum accounts and networks, letting you see where you have assets across mainnet and all L2s, inc Astar & Moonbeam.

As you can probably tell we put a lot of thought into the problem space, and believe this can serve as a good UI/UX reference in Polkadot.

[Birdo]

Gm me again.
I also wanted to highlight another overlooked UX interaction from a dapp point of view - connecting to a wallet. While it’s a pretty basic interaction, a lot of dapps I’ve seen have a pretty horrible connection experience and it’s yet another touch point of friction. One of the best things we can do as builders in web3 is to remove complexity and increase accessibility to make it easier and easier for users to onboard and use dapps.

A typical wallet connection flow will:

1. Present the user with a multitude of wallets to select from
2. Force the user to scan several items to find the wallet that they have installed
3. Click the correct selection
   If the user doesn’t have a wallet, they also might be prompted to install a wallet or learn about what a crypto wallet is, but often this doesn’t happen.

I wanted to discuss the Raresama (https://raresama.com/) wallet integration and talk about why I think the team have done an excellent job in making a smooth interaction and why it’s best in class in the web3 space.

With the Raresama marketplace, when you connect your wallet, the dapp is smart enough to figure out what wallet(s) you have installed and present you in the UI, the installed wallets only. By showing just the wallet(s) that are installed, the user is presented with the correct information needed at that point in time, without needing to make the user think / scan / read different entries. “Don’t make me think”

If the user has no wallets installed at all, the dapp again is smart enough to register this and prompt the user to download Metamask or Talisman, AND link them through the ETH foundation to learn about what a crypto wallet is. This is great, as if it’s the first dapp that a user lands on, they have a path to learn about wallets from a neutral source and come back to the dapp.

As a bit of homework, I invite you to try connecting to several different dapps and note the different experiences. If you’re a FE dev, please have a look at the way the Raresama team have built this and chat with your design team if this type of connection flow is right for your users

[goran]

I found a pretty painless way to drip test tokens from https://faucet.metamask.io/
It’s integrated IMHO better than writing a drip command in chat and from a UX point of view there is lot of space for improvement, e.g there is no notification of any sort that the test token has been sent. But the interface is clear and smart in terms that it figures out what is the available account it can send tokens to, in my case Talisman/Eth.

That said Contract UI has integrated the Faucet into the product, which is even better. Thinking how this can go a step further is to have a account component that would offer a faucet option each time the account is connected to a test-net.

[michel]

I really like this example. I think the general direction of making dapps more contextual is the way to go. The faucet integration Goran mentioned is related to this; recognise if the user connected to a testnet and automatically display a faucet (could also automatically drip testnet tokens when funds are low).

One further approach I was thinking about is the use of little burner wallets in apps for users completely unfamiliar to web3. They would be able to start interacting with an app (potentially getting a small amount of funds through the Gifts functionality) and would only later be asked to export their account and install a wallet extension. This could be skipped, if an extension is detected.

Btw Goran is also working on some open source UI components with some of Parity’s JS devs, and I think the Raresama example should inform the Connect Wallet component.

[tetekinandrey]

Hi, Andrey is here. I can share my thoughts focused more on general best practices principles for web3.

As I’m a new user I can only post one image and two links.

I found that the most common challenge in the design community is to reduce web3 technical complexity (that’s obvious but not many succeed in it) and cut techy jargon language as much as possible to make UX more familiar to regular users’ expectations. A big part of it lies in a general understanding of dApp users’ tech awareness and requires research that every dApp team should do in order to know their audience’s expectations.

this diagram is a good example of the mental model for dApps design.

Ending in the UI it may come to 2 different solutions:

– either hide or abstract away a technical problem that is making the life of the user difficult,
– or you explain it better

I like this particular example of a Web 3 apps errors best practice from this publication because it’s a common dApp problem afaik.

The approach is:
– Explain simply and clearly what the problem is
– Provide a solution
– Turn the delay into an experience that is as pleasant as possible

again sound banal but this literally requires reviewing every single error and providing a better description and solution to it in a situation where not every error has a very obvious solution.

I also like this piece on other valid best practice principles:

– Don’t ask to automatically connect your wallet before visiting the website
– Create meaningful interfaces with less jargon (gas fee vs transaction fee on the example)
– Create user onboarding and how-to guides
– Always tell the user what’s going on at every stage of the process

[goran]

Thanks @Birdo , great example, still there is space for improvement, for example there is no option to connect via mobile device or hardware wallet and this jump from connect component to talisman fullscreen page adds some friction.

[Birdo]

Of course! Nothing is perfect but this is pretty close

I feel that most users with Ledger or hardware wallets typically link them to a hot-wallet to sign transactions through. I don’t believe I’ve seen many (any?) dapp connection flows that straight up offer Ledger as an option.

[goran]

Rainbow connect does, to flow is super smooth too, I believe the goal is to make is as accessible and frictionless as possible.

[hieudao]

GM fam, this is Hieu Dao from SubWallet. Nice to connect with you guys.

A great topic of discussion here, though a bit sad that @shawntabrizi didn’t mention SubWallet in your post, probably because the SubWallet connection was not stable when you tried Astar Portal. It’s working fine now; would be nice if you could try again.

As you guys may have known, SubWallet is one of users’ top choices in the ecosystem, evidenced by the fact that we have close to 20K active users with almost zero marketing cost. So what do we do?

1. We are the first extension wallet in the ecosystem to have a portfolio management feature that allows users to manage multichain crypto assets, NFTs, crowdloan, staking and transaction history. This way, assets on dozens of blockchains are aggregated in a single place and easily handled within a few clicks. The ecosystem is too fragmented it needs a product that can synthesize.

2. We keep the approach as friendly as possible by replicating the experience of using popular wallets such as Phantom, MetaMask and Trust Wallet inside SubWallet. In other words, users can jump right into using SubWallet without learning too much because the experience is familiar. The key here is that users are very lazy; give them something simple and educate them step by step.

3. Since we’re talking about user interface & user experience here, it’s important to mention that at SubWallet we always listen to users and improve our solutions. You can see how we constantly launch new features, release updates and deliver products to suit the needs of our users. Listening and adapting are best practices to build and sustain a user-centric application.

A quick recap of what we have been doing at SubWallet so far. We look forward to receiving more suggestions from you all, especially criticism, so that we can make SubWallet better every day.

[shawntabrizi]

@hieudao

A great topic of discussion here, though a bit sad that @shawntabrizi didn’t mention SubWallet in your post, probably because the SubWallet connection was not stable when you tried Astar Portal. It’s working fine now; would be nice if you could try again.

Hi @hieudao, thanks for mentioning SubWallet.

This thread is more about sharing ideas for good UI/UX and the decision making processes people make when designing UIs for Polkadot.

Can you speak toward some of the unique design decisions you made in SubWallet which you thinks makes this wallet a great experience for users, and takes into account the unique nature of Polkadot?

[LUI5]

I have to mention Proof of Chaos here and their website to vote on Kusama referendas

Easy to read, simple yet complete, smooth transitions.

[LUI5]

I also like the “X-Transfer” function on Zenlink DEX. It’s one of easiest way of doing cross-chain transfers on Dotsama.

You just select the coin and it gives you all the options of sources and destinations chains

[wliyongfeng]

The timeline UI on dotreasury and subsquare by OpenSquare worth an eye. It helps normal users understanding the complex chain business easily.

[rphmeier]

Subscan | Aggregate Substrate ecological network High-precision Web3 explorer

This just went live today. You can see which channels chains have open by mousing over them. There is a graph of the amount of transfers over time, with more metrics coming soon. It’s also well designed and fun to interact with.

[hieudao]

Thanks @shawntabrizi for your questions.

As I said above, UX design is not a technique but should be a culture. In other words, it’s not only about designing mindset but more about how we build our product, manage our project, plan our marketing and engage in discussions everyday. There are plenty of examples but here I can list a few:

Data-driven design: Before starting work on SubWallet, we carried out a user survey on the main pain points they had when using Polkadot {.js}. The results included:

• Unable to aggregate assets
• Unable to send/receive tokens
• Unfriendly to new users

SubWallet, therefore, was designed to tackle these issues. You can see it in the current design of SubWallet:

• Users can easily aggregate their assets in multiple chains as well as multiple accounts right on the main screen with 1 click.
• Users can easily manage and send/receive tokens with action button right on the main screen with 1,2 clicks.
• Users have an interface similar to those they’re used to in MetaMask, Phantom, Trust Wallet, so that they don’t have to learn too much before using.

[hieudao]

II. The Polkadot ecosystem has some unique features that we need to include in our wallet design:

1. Ecosystem fragmentation due to the multi-chain infrastructure

• We focus on navigation capability that allows users to look up information easily anywhere within the wallet
• Users can manage their multi-chain assets from multiple accounts right on the main screen with just one click.
• Users can easily send & receive assets by copying their specific chain addresses on the main screen with a few clicks.
• Users can also keep track of their multi-chain transaction history of multiple assets on the main screen.

2. Other unique features are also included:

• Information about crowdloan projects that users participate in show up right in the main screen
• Same to NFT and staking, users can manage easily by clicking on the specific tabs
• The send & receive as well as XCM buttons are also available on the main screen for users to navigate with one click

These are just a few examples of how we design and constantly improve our UX/UI. Our mission is to onboard users to the Polkadot and Kusama ecosystem, so it is our top priority to make the wallet experience as smooth as possible for new users.

[shawntabrizi]

Here is a community led, treasury funded project which fits nicely: https://alpha.chainviz.app/

GitHub - helikon-labs/chainviz: Realtime chain visualization WebGL...

This is a really awesome, dynamic and interactive UI which visualizes the block production process on Kusama.

As stated in their repository description:

Chainviz visualizes the following aspects of the Kusama relay chain and validators in real-time:

• Active Validators, and the block production and finalization process.
• Network stats.
  • Best and finalized blocks.
  • Era staking data.
• Active validator list and their activity.
• Paravalidators, and the assignment of paravalidators to parachains.
• Validator details panel, where the user can watch the validator in real-time.

I think this project highlights how you can make quite complex processes like block production / finalization still pleasing to look at, and simple to understand at a high level.

[AfroCrypto]

The marketplace design of KodaDot is top-notch. KodaDot has one of the best UI for NFT exploration. KodaDot implements an advanced search feature using SubQuery. Advanced search helps a user “pinpoint” an NFT easily

KodaDot’s has a simple, well-laid-out visually appealing storefront

NFTs display stats (indepth details/statistics about a collection)

There is an advanced filterng option in which you couod combine a handful of useful search queries via the intuitive UI

The minting is straighforward and as easy as a pie. There are minting options to choose from

KodaDot supports polkadot wallets, includijg Talisman and SubWallet

[Barney]

Basilisk’s Snek Swap/LBP design is by far the cleanest AMM UI in polkadot.

I think it goes without saying, but the AMM UI/UX of Basilisk wouldn’t be possible without the advancements Talisman and Nova have made in the wallet space.

The basilisk UI is akin to the levels that I see when swapping on the big boys, Uniswap, Metamask swap, etc.

The display is truly one that a grandma could use. The swap function is clearly outlined and tells you exactly what you need to know before placing a trade. I think that less is more in general when it comes to dAPPs and Basilisk has put everything i need to make a decision on one page and has melded it very nicely so that I am looking at something pleasing while doing it.

Price is displayed via a graph that you have some functionality to see information on. But the true strength is shown in the new LBP platform screen. Showing you what expected price will be based on its algorithm and inputs, you could know next to nothing about the LBP process and still be able to make out what is happening.

“Pay With/You Get” is underrated as all get out to clearly tell you what is going on.

The color scheme also does not get enough love and is appealing to the eyes

And once you are on the page, the different tabs/options are easily displayed and navigate you to relevant places. (maybe the bridge tab could be more direct tho)