Ethereum UX Tools: The Ultimate Guide

Let’s get started:

There’s a huge learning curve for any experienced developer looking to break into the world of decentralized applications (dapps) for the first time.

Building with blockchains is hard — from deciding which platform to build on top of to learning the intricacies of each smart contracting protocol… There is a lot of ground to cover for new developers.

And even after learning the ins and outs of core Ethereum tools — solidity, truffle, infura — you still have to solve for usability hurdles.

Luckily, there are a number of tools that have been shipped over the last couple of months to take on some of these challenges for you. We’ve compiled this list to help you understand which projects are solving different web 3 UX challenges.

Hopefully this will give you a better picture of usability in the Ethereum ecosystem, and enable you to create a dapp that is easy for the average web consumer to use!

Let’s dive in:

1. Wallets:

While we are all familiar with wallets like MetaMask, EQL, Balance, and Coinbase Wallet, there are a lot of new innovations happening around wallets to improve user onboarding.

Portis

https://www.portis.io

Portis has a javascript SDK that enables dapps to provide users a local walletless experience. Portis handles setting up a wallet, signing transactions, and gas fees. Portis makes engaging with your dapp feel like a web 2.0 experience. And users still control their keys — Portis just stores them securely.

Fortmatic

https://fortmatic.com

Fortmatic is a Web 3-compatible JavaScript SDK that enables end-users to interact with any dapp with just their phone numbers on any modern desktop or mobile browser.

🔥👛

Burner Wallets

https://github.com/austintgriffith/burner-wallet

Burner wallets enable new users to quickly transact right from their browser. Austin Griffith has been leading the community in developing this approach — which worked flawlessly at ETH Denver.

2. Out of the Box Tools:

Embark by Status

https://embark.status.im

Embark is a developer environment that’s designed to help you get a dapp up and running as quickly as possible. It comes packed with some pretty powerful features right out of the box:

• Automatic smart contract deployment — Embark takes care of deploying your smart contracts as well as re-deploying them as you make changes to your code.
• Client development — Build your application with the framework of your choice within Embark.
• Testing — Test your applications and smart contracts through Web 3 in JavaScript.
• Decentralized app distribution — Embark integrates with decentralized storages like IPFS and helps you distribute your app in the network.
• Peer-to-peer messaging — Send and receive messages via communication protocols like Whisper.

Blocknative Assist

https://blocknative.com

disclosure: I’m working with Blocknative and am a huge fan of the tool.

Assist.js helps dapp development teams onboard new users easily — enabling them to transact with more clarity and confidence.

How? By programmatically identifying and outlining clear steps for end-users to follow. This helps users overcome common obstacles, and prevents common pitfalls.

Assist is broken into four parts:

1. Readiness Assessment — programmatically detects each user’s technical readiness to engage with your dapp.
2. Onboarding Assistance — an out-of-box, componentized UI that guides users through the actions they need to take to be ready to use your dapp.
3. Transaction Awareness — gives onboarded users real-time feedback on their in-flight transactions, including how to handle common pitfalls and errors.
4. Performance Analytics — gives developers baseline visibility into both the ‘transaction readiness’ and the ‘transaction experience’ of your dapp so you can understand where users are struggling.

Dapparat.us

https://github.com/austintgriffith/dapparatus

Austin Griffith created a set of reusable react components for dapps. Some of the components included are: contract loader, metamask, gas, transaction ui, event parers, etc. It’s a great starting place for those looking to own their full code base.

Side note: Check out ETH Denver’s UX and Usability Panel to dive deeper into some of the UX challenges facing the ecosystem today.

Featuring: Jeff Vier (Ideas by Nature), Tom Teman (Portis), Taylor Monahan (MyCrypto), Matt Cutler (Blocknative), Sean Li (Fortmatic). Moderated by Gustavo Esquinca (ConsenSys Design)

3. Design Systems:

An overview of Rimble, from ConsenSys Design

Design systems are a series of components that can be reused in different combinations. They’re meant to enable designers and developers to scale best practices and consistent design across large projects. Think of bootstrap as one of the OG design systems.

For Web 3 design systems, check out:

• Rimble (ConsenSys Design) — https://rimble.consensys.design/
• Lorikeet (Aragon) — https://lorikeet.design/

disclosure: I used to work at ConsenSys.

4. Open Source UI:

Meta is an open source blockchain UI framework from Universe Labs

A few projects have made parts of their design open for the community to build on:

• Decentraland UI — https://github.com/decentraland/ui
• Bounties UI — https://components.bounties.network/
• Aragon UI — https://ui.aragon.org/
• Meta UI — https://github.com/universelabs/meta
• Metamask UI — https://github.com/MetaMask/metamask-extension/tree/develop/ui/app/components

5. Popular Frontend Ethereum APIs:

These are a collection collection of libraries which allow devs who are already familiar with JS or react to build dapps and/or integrate ethereum smart contracts.

• Web 3 JS — https://github.com/ethereum/web3.js/
• Web 3 React — https://github.com/NoahZinsmeister/web3-react
• Vortex (react) — https://github.com/Horyus/vortex
• Tasit (react native) — https://github.com/tasitlabs/tasitsdk
• Drizzle (react) — https://github.com/truffle-box/drizzle-box
• Ether JS — https://github.com/ethers-io/ethers.js/

Build something that users want…

My good friend Ryan recently gave a talk titled “Dapps are cool… dapp users are cooler.” His point was that decentralized applications can’t change the world if we don’t get people to start using them, and we won’t get people to start using them if we don’t improve the UX.

Hopefully this will inspire you to build a human-friendly dapp moving forward. Best of luck!

If you found this article useful or entertaining please 👏 or share. Comment with any feedback or tools you’d like to see added to the list.

Sean O’Connor is the product and design lead at Saffron Solutions — connecting the threads of business and blockchain. If you’re building a dapp and need help with UX or product development — please reach out!