The Best UI/UX in the Polkadot Ecosystem

maybe you could have a look at Mangata trading app too

https://app.mangata.finance/

We’ve made efforts to simplify UX as much as possible. Cross-chain transfers as deposits/withdravals might be a way forward and the UI is optimized for ETH bridge to interact in between Metamask and Polkadot.js, we’re eagerly waiting for Snowbridge. There are other perks around handling LP positions

I feel like Saturn, our upcoming UI framework for superpowered multisigs, deserves to be shown in this thread at this point.

Currently being built into GitArch, Saturn will eventually be it’s own independent framework to be used internally at InvArch and also by any developer wanting to implement dynamic and customizable multisig solutions in their projects.

The core concept of Saturn is being able to conditionally render based on multisig metadata, which can be seen in the attached video when for the bottom call, which has no metadata, it renders a generic yaml syntax highlighted representation of the call, but for the top call, which has metadata specifying it’s a git push call, it renders tabs with a list of commits and diff views for the code being pushed.

Other concepts which I’m not going to explore in this comment are: dynamically rendering roles that the user is in and that have permission to vote on the specified call, gathering weighted votes and displaying them with accurate percentages, and rendering a list of all signers of the multisig in correct order.

Oh, and this is all chain + client-side, no reliance on external services or centralized sources!

Using a twitter link because I can’t attach videos: https://twitter.com/GitArch_xyz/status/1582483439990603777?t=AaqsOXsJt6zCsDHM40LY9Q&s=19

3 Likes

Hey, thanks, @AfroCrypto, for shill! :smiley:

Yes, as has been said before on Dotsama Twitter, KodaDot is doing a major rehaul. As we’ve been building first the unofficial RMRK explorer and then a lot of public goods, we had to refocus on our UI.
We’ve generally come from open-source waters and have been using mainly barebone components in KodaDot v1 & v2 from BueFy, where we contributed to upstream as well and supported their libraries financially.

As we will have on this dedicated upcoming crowdcast session, I’ll try be short.

Style

We decided to go to Neobrutalism as we’ve noticed it’s something we feel aligned with, and it stands out from other marketplaces per se. It is low on cognition load through minimalistic design, so probably a way for retail adoption Dotsama is missing, looking for the first 1M NFT users in the ecosystem.

Thesis

We realized that there are many parachains, and each has its own NFT standard for special needs, and we ourselves went to aggregate these and make it easier for users, in the end, to interact with them.
There we are probably the only project which has open-source multi-chain frontend components for grabs and we are happy to continue on this mission so spread the adoption of these multi-chain and cross chain components.

Search

Whole KodaDot is being focused on speedy search right on the main, which is right now provided by the wholesome team from SubSquid and working tightly for bleeding edge speed results on your client.

In the long run, we will be aggregating search results across many parachains NFT assets as users don’t care where assets is located; that’s our premise right now.

As you might see, we have running in beta MoonRiver, MoonBeam, Basilisk, RMRKv1 and RMRKv2 incoming with incorporating ink! contracts running on Astar in the foreseeable future.

On input focus, we will be aggregating NFTs from other chains by trending, so users can see what’s trending based on various metrics per particular chain. Right now as we are have biggest dataset from RMRK is predominant, Basilisk NFTs are catching up and we will roll RMRKv2 as well.

Plus, when user will search will be based on search terms Collections, NFTs and in the future users as well.

Newest list

It sounds simple, but this component has a lot of effort into it. As you can see, it shows multichain results, so in one place, you can see what would be listed here.

Latest Sales

As previous, users can quickly see from the landing page sales happening on Basilisk and RMRKv1 right now. In the future, we will have surprises for our users to tailor results for them based on on-chain activity.

Galery Item

As noted at the start, we are continually evolving the codebase with over 80 contributors with a bounty system on top, so we are not your traditional enclosed team of 30ppl :slight_smile:
Rest is an ongoing development, and we will be rolling in upcoming weeks new Gallery item detail and then other components accordingly.

With Gallery item detail we plan to experiment with Basilisk multi-currency support where user would not need to care which asset they have on wallet and open ability to swap it right away on the background and place offer in asset they want or will have.

Feel free to peak yourself at our public designs https://github.com/kodadot/nft-gallery/issues/4111
In the long run, we are right now working on the way to leverage XCM for actions in gallery item detail, like teleporting and bridging assets through KodaDot; that’s actually in the works and once we will have a sneak peek as we realized it’s huge context switching for users go outside KodaDot to teleport assets.

Any time you have a question, peak on our issues at Github, stop by at our Discord and hit like on Twitter @kodadot

We did just tiny UX research behind this, because we actually want to deliver something quickly and then as usually we will iterate from there. Even landing page took as while. :slight_smile:

5 Likes

Hey there!

As a part of my talk on sub0 I would like to gather actual feedback about user and dev (your) experience in the (not just, but mainly) Polkadot ecosystem. If you can help me out with sharing I would appreciate and in return I can share results sooner than on sub0. It’s not biased towards any project so you can share the survey only.

I don’t expect high completion rate because it’s quite involved but in return I already got some nice feedback.

3 Likes

Hi everyone!

Thank you for opening discussions like this!

I believe we all see the need for DeFi and Web3 to be easier to use and accessible to as many people as possible through well-crafted interfaces. There are still a lot of open usability questions that need to be addressed, so discussions like this are truly valuable.

I want to share the current progress on improving the UI of the Mangata X DEX. You can click through this small prototype created in Figma:

Mangata X DEX - Prototype

What I like about the Defi UIs is their uniqueness connected to the brand of each product as a lot of “web2” interfaces nowadays are pretty uniform, and all the patterns are already set. We need to put in place some of these usability patterns in web3 space as well, so users don’t need to re-learn using these apps with each new product, but to have a beautiful, unique, and fun UI on top of it is a breath of fresh air.

Lukas | Mangat

4 Likes

Hi Everyone!

Polkassembly has been forever grateful to build for the Polkadot ecosystem by supercharging governance in a graceful manner.

We have recently gone live with our latest interface which changes the governance experience to make it simpler & elegant.

We would like to present these features and receive feedback by encouraging the community to try them out. Here is an article covering brief details - Medium Article

In addition to these, we have also gone live with a simple interface for Governance V2 & Delegation! - EXPECT CHAOS!

For parachains building in the ecosystem, you can join 30+ parachains on their journey to making governance simple & democratized at Polkassembly by reaching out to us on our telegram or discord channels!

We look forward to hearing views from our community and keep building towards the ideal governance experience.

2 Likes

Hi here :slight_smile:

Just a few words to show you a little screencast of Ğecko app (Duniter v2s Flutter mobile client) : Demo Ğecko mobile 0.0.15+51 - P2Tube

You can test it here for Android: Ğecko ĞDev (last build) - #57 by GeckoBuilds - Ğecko - Duniter Forum

Let me know if you like or dislike it, feedback are welcome.

1 Like

Is this related to Polkadot ? I couldn’t see any Polkadot related info in the screen recording…

For sure, Duniter v2s (Ğ1v2) is Substrate based: Duniter | Duniter v2 with Substrate 🏗

This is the code of Duniter v2s (Substrate based):

That means Ğecko is compatible with Polkadot.

1 Like

I really like how the Bifrost is assembled and looks. Intuitive, beautifully designed, very fast moving in terms of progress. A lot of data, metrics.
Only the dark theme, god mode and Greta mode are missing.

2 Likes

I want to share a design from bifrost.app.

Before you start signing any on-chain operation, Bifrost Dapp will display a settlement pop-up window to tell you the status of the next signature and some related data display, such as the cross-chain amount, the balance after the cross-chain operation, Detailed fees for cross-chain operations, etc. It feels clear and secure.

As we know, the construction and method calls between parachains are very different, which leads to poor readability of information when signing on the wallet plugin side. On the Dapp side, this form can be more customized to clearly show users what the current operation is. This is very convenient for users to confirm their operations twice. Especially in some DeFi scenarios.

Although the current settlement page of Bifrost is only suitable for some operations, it can indeed make up for the lack of information displayed on some wallet plug-ins.

I think the signature operation is really a critical step, but it is difficult for us to obtain enough simple and understandable information in the signature interface of the wallet plug-in when using the parachain application. So for a parachain dapp, how to make users better perceive their own operations is also a subject that affects the experience.

3 Likes

Hi There,

I m new to this forum but I have some thoughts in this area and I would like to open the conversation up further. I am proposing a unified UI and UX framework along the lines of Bootstrap and Material UI that can serve as the best practices for Web3 interface building.

I have had a couple of conversations with some individuals in the Polkadot ecosystem and it’s become apparent that this is something that has already been highlighted.

If we look at the impact Phantom wallet had on onboarding users onto the Solana ecosystem or how much of an impact Pinterest’s Masonry tiles layout had on creating a design language we can see how important getting a UI language for Web3 is going to be.

Although there are teams already working on their own design languages, I think this is a crucial undertaking to help us onboard the first billion onto Web3. I would like as much input from all the participants here as to the key design primitives that would be useful to deliver and I would love some help assembling a small team to do this.

Any thoughts please share or ping me.

4 Likes

Hi Andrey, I agree with a lot of your synopsis of the current Web3 UI and UX principles and where they could drastically be improved. I am looking to start a project to work on this and I would like to discuss some of these points with you further if it’s of interest. :slight_smile:

1 Like

Hello, we’ve been working in KodaDot - Polkadot NFT marketplace. We’ve released our sidebar, where people can quickly check their balances within our app when interacting with any NFT standard in Polkadot.

Hopefully, it will inspire other app builders in Polkadot Ecosystem

Another thing we’ve released is KodaDot Transfer functionality.
You can easily transfer fungibles between addresses, make batch calls and share payment URIs

We’ve added a cart feature so people can do batch-buying Polkadot NFTs on KodaDot

image

In the sidebar, user can see the cart before checkout.

Last confirmation before completing purchase of Polkadot NFTs on KodaDot

The chainviz application has been updated and is even more awesome than before:

https://chainviz.app/

Medium Post: Introducing Chainviz v1: A New Kind of Block Explorer | by Kutsal Kaan Bilgin | Helikon | Sep, 2023 | Medium

Web3 Grant: https://github.com/w3f/Grants-Program/blob/7373be79d6129e29daccea2bf82f79e669dfe3ed/applications/chainviz.md

Twitter: https://twitter.com/helikonlabs

4 Likes