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 — — you still have to solve for usability hurdles. solidity , truffle , infura 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 , , , and , there are a lot of new innovations happening around wallets to improve user onboarding. MetaMask EQL Balance Coinbase Wallet 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: — Embark takes care of deploying your smart contracts as well as re-deploying them as you make changes to your code. Automatic smart contract deployment — Build your application with the framework of your choice within Embark. Client development — Test your applications and smart contracts through Web 3 in JavaScript. Testing — Embark integrates with decentralized storages like IPFS and helps you distribute your app in the network. Decentralized app distribution — Send and receive messages via communication protocols like Whisper. Peer-to-peer messaging 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: — programmatically detects each user’s technical readiness to engage with your dapp. Readiness Assessment — an out-of-box, componentized UI that guides users through the actions they need to take to be ready to use your dapp. Onboarding Assistance — gives onboarded users real-time feedback on their in-flight transactions, including how to handle common pitfalls and errors. Transaction Awareness — gives developers baseline visibility into both the ‘transaction readiness’ and the ‘transaction experience’ of your dapp so you can understand where users are struggling. Performance Analytics Dapparat.us https://github.com/austintgriffith/dapparatus 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. Austin Griffith Check out ETH Denver’s UX and Usability Panel to dive deeper into some of the UX challenges facing the ecosystem today. Side note: 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 as one of the OG design systems. bootstrap 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 recently gave a talk titled “ ” 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. Ryan Dapps are cool… dapp users are cooler. 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. is the product and design lead at — connecting the threads of business and blockchain. If you’re building a dapp and need help with UX or product development — please reach out! Sean O’Connor Saffron Solutions
