Web3 UI Framework

Hi All,

I am new to the forum, but I am keen to add my contribution to this space.

The Web3 space is full of pioneering technologies but the current pain point I see at the moment is that these technologies are built by technicians for technicians. The first access point in the Web3 space for the average joe came by the way of digital collectibles and this made this pain point more apparent.

If we are to provide a global decentralised platform and onboard the first billion people, we have to adopt a user-centric view of these technologies and pull from the learnings from Web 2 and adapt for users.

I have a proposal and this was posted in a comment on another thread, but I wanted to give it its own topic so it was visible to as many people as possible.

My proposal is to research, ideate, and create a UI Framework for the entire Web3 space, something akin to Twitter Bootstrap or Google Material UI. These 2 UI frameworks were critical to the adoption of Web 2 standards and made it easy for developers to create user-friendly and mobile-friendly websites and WP themes and now we need the same again.

I am still working on my funding proposal, but to make this work I need a team of razor-sharp frontend developers familiar with Dotsama and other chains and I need input from not just blockchain developers but developers with a history of Web 2 and Fintech solutions.

So this is the Bat-signal, if you are available and you want to join this noble crusade then throw a comment below and let’s build the tools for the buidlers!

Purpl

2 Likes

I don’t fully get it. What’s the difference between Web2 UI Framework and Web3 UI Framework? A button is a button no matter Web2 or Web3?

3 Likes

That is true, but what I am suggesting here is more than just buttons and typography. We now have digital wallets, decentralised exchanges, staking etc. The UX for these new tools are far from optimal and they require thought and design to create user-friendly patterns for new users to onboard. These are the things I am suggesting.

I think we should differentiate between UI and UX here. The user experience, journey and flows for Web3 are immensely different than web2 and require a steep learning curve that users are struggling to adapt to. There is still so much work to be done until we get to a point that “a button is just a button”.

1 Like

Can you provide some more examples? I don’t think a UI framework should provide a component for DEX, Staking etc.

Great idea @PurplNght , we are experimenting with something similar at Parity.

Our working hypothesis is that builder teams focus primarily on backend and have much less resources for front end work. If we can provide easy-to-use building blocks we can get products out quicker, receive feedback earlier, and improve the UX of Web3.

What sets (most of) our components apart from existing web2 components is that they will be able to interact with the chain.

The first couple of components we are considering:

  • identicon
  • account dropdown + entire wallet connect flow (think rainbow kit)
  • input field that validates accounts and gets name + identicon

The current plan is to provide the library internally first, then open for external contribution reviewed by a group of stakeholders, and eventually incentivize contribution and decentralize the review process.

2 Likes

Is the eventual goal something like a Storybook for UI components? An example here for a Python conference UI component library.

Agree there is a differentiation between UI and UX, however, a UI is a core function of UX and I think there are pitfalls in focusing on them separately, hence this proposal. As for journeys and flows this example from Adham Dannaways book Practical UI was one of my key inspirations to tackle this task.

Just a small UI tweak can have a significant effect on User Experience

@xlc I have just shared an example in a reply to @rotemcarmely here. I think the purpose of this exercise is that currently dApps like Dexes, Staking interfaces, NFT market places etc have all just evolved as a way to test the functionality of a product. This then gets forked by another developer so they can create a different flavour of the same thing.

e.g



By default this is how all decentralised exchanges all look like and function, there no questions being asked whether this is the optimal way for an exchange to be laid out, it’s just taken for granted. However Web 2 has decades of A/B testing and frameworks all optimised for user onboarding from SSO to 1 Click Buy. The Nielsen Norman Group has a great resource on this for example.

I would like to build something that would leverage these learnings and apply them to the world of transactions and signing. Making it easier for developers to create new products without having to worry as much about the UI and UX side.

1 Like

@dnlklmn I think this aligns with my thinking greatly. I would love to get involved in the process if you are looking for someone with strong Web 2 product knowledge, as this would make more sense than reinventing the wheel. Please let me know how I can be of assistance.

1 Like

I would envision a webpack.js bundle, some HTML, SCSS, JS something compatible with React, Vue and Angular. But this is just from my initial exploration.

1 Like

yes, node+react+tailwind/deno+preact+twind is the idea for now,
headless components with flexible theming (optionally) generated from design tokens (bridging figma and react)

Thanks, i’ll talk to the team once they reemerge after the holidays and get back to you!

Is this true outside of DOT though? My impression from being in the ecosystem for a year is that many builders are “here for the tech” which will always lend itself to less front-end UX, marketing, etc.

I don’t get the impression that this hypothesis extends to all of Web3/crypto/etc - In particular I’ve seen quite a bit of good work in UX for NFT platforms.

I guess my point is tools would be great, and I am all for this idea, but am a bit concerned about the assumption that DOT has poor UX due to lack of resources vs. lack of prioritization.

@PurplNght - This idea is awesome and sorely needed. If I had one request, it would be that you include some amount of educational resources in whatever proposal you put forth so that builders not only have the tools to ship great product, but can learn why they need commit to a great UX as well (vs. just great tech).

Good luck and you have my full support! :slight_smile:

1 Like

Happy to help advise :slight_smile:

2 Likes

@dawufi from my experience, yes. I have spent the last 3 years playing with various dApps on various chains from Tron, BSC, ETH, Polygon + L2s, Solana, Terra, Harmony, and Avax to name a few. While I have seen some good UI and UX in places, across the board most chains are yet to reach the “productise” stage. Although it blew up, in the end, Anchor Protocol had a decent UI. Also the Phantom wallet and Blockwallet wallets are carving a pretty good path at the moment.

2 Likes

Thanks @Birdo would love to have your input :blush:

I think that having specific components thought through carefully (as mentioned before, things like account selection), developped as standard libs and some educational content explaining why it should be one way or another is what we need.

However, the example given above with the item amount and “Add to cart” button is a good example of UX flow that can be enhanced, and has absolutely nothing to do with UI Framework. Same with the dex look and feel that uniswap originally came up with.

3 Likes

I don’t quite agree with this. This isn’t just a question of UI enhancements and some educational materials. I think with the new concepts being introduced in this industry, there is a need for something more thorough especially as we are nowhere new knowing what the limits of Web3 will be.

There are many questions we will need to ask ourselves and then figure what are the optimal UI layouts and UX flows for these scenarios. E.g. How should DAO platforms be built to allow members to join and interact easily? What should a DID wallet look and behave like? What is the optimal UI interface for a gaming NFT lending and borrowing platform?

Maybe a better description for this effort would be a design system rather than just a UI framework, as you can see from Google Material https://m3.material.io/ it is a framework as well as an educational resource on Interaction states, designing for depth and elevation and adaptive design for large screens and also mobile-first designs strategies.

I think that there is interesting thinking here but maybe too broad in it’s exploration scope. While it would be nice to have a frontend framework funded by treasuries instead of driven by the worst web2 company (React), and maybe actually get a nice one in Rust/WASM for more heavy apps, I think those two are much further down the line.

What I think might be more interesting is what @PurplNght suggests. I worked at Spotify which was actually surprisingly “decentralised” at the time I was there, with many small teams controlling their own stacks completely. This was very fast for some projects, but got extremely problematic for projects that required detailed alignment, such as changing the color of the Spotify logo and accompanying font colours. What eventually solved this was exactly what @PurplNght suggests, they created a team that forked Twitter Bootstrap and made it into a framework that teams could pull in, which sort of had a protocol-like effect and created alignment without sacrificing autonomy (actually increasing it).

In addition, authentication and wallets is another frontend matter that might be interesting to attack. I.e. look at the problem that the extremely popular Auth0 solves in the web2 space, and thinking about what that would look like in Web3 (just as a simple example, everyone re-builds that wallet selection dialogue).

Axios might be another thing that might be interesting to muse about in the same way. It’s built around the web2 assumption of REST, but what happens if someone would think like Axios did there, but for Substrate (and maybe others) instead of Rest?

2 Likes