Some Additional Resources:
- The Next Wave of DeFi Users: A UX Research Study by Gossamer
- DeFi User Research Report by Consensys Codefi by Consensys Codefi
- 4 Key Findings in CoinGecko's Decentralized Finance (DeFi) Survey by Coingecko
- DeFi User Survey — The results & insights by dex.blue, Argent, Kleros, Kyber Network, Maker, Ren, Synthetix, and Uniswap
- State of Adoption by IDEO CoLab Ventures, Decentral Park Capital, and other contributors.
- DeFi Usage Numbers by Richard Chen
- 2020: The Borderless State of DeFi by Binance
- CoinGecko Yield Farming Survey 2020
- 2020 Global DeFi User Survey Report by ARPA
Design plays an incredibly important role in the uptake and adoption of web3. As most users will be onboarded into the world of blockchain through dApps, how they journey through this technical space can be heavily hindered or supported by design.
1. Enable blockchain literacy
One thing that’s glaringly obvious about the state of web 3 is that it’ll require new mental models and ways of thinking that people don’t generally have (yet). As people learn about blockchain and its potential, it’s on the onus of designers to help people overcome the learning curve of blockchain. Just like it’s our job to communicate the value of SaaS products or services in an easily digestible manner, we’ll need to channel our product design knowledge from 2.0 and transfer it into web3 so that the masses can easily grasp fundamental principles around security, trust, and process. As Denelle Dixon, CEO of Stellar XRP says:
“…One of the things that we need to do better in this industry, and I think we’re working in that direction is much like the early days of the web, we need to focus on consumer-oriented products that have a lot of information about the challenges, and also brings the person through from a literacy standpoint. So they understand you look at user experience, you look at UX design, all of these things are really, really important. And as we saw in the early days of the web, it happened, it came together. We became better at educating the audience about what’s available and what’s out there.”
As blockchain becomes more mainstream, education will be needed less. But for now, companies are rightfully concentrating efforts in this space. A look at a few product designer roles touts the designer’s mission in helping the average person understand blockchain.
As designers, helping educate can be done by:
- Connecting users back to what they do know helps them bridge the knowledge gap. As a report by decent patterns.xyz puts it pretty neatly, this means “listening to users to understand existing social practices, habits, and mental models….iteratively user testing different explanations. Metaphors and stories best describe new technology in an accessible and clear way”. A great example is MetaMask’s video, which uses easy language like “The internet isn’t very safe, credit cards are stolen, identities get hacked…”. Ethereum also provides a great metaphor by mentioning Twitter, when touting its free-from-censorship benefits — platform users would already be familiar with.
- Reducing the amount of technical jargon. There’s a whole new lingo that’s floating around when it comes to blockchain. Websites that simplify languages for the average person to digest will be miles ahead. I’m thinking of de-fi (aka decentralized finance) dApps especially, with words like liquidity pools, mining, tokens, protocols, smart contracts… I mean if you’re not in the world of blockchain, you might as well have been reading hieroglyphics. Using technical language makes it harder for users to understand the value of your dApp. Where language can’t be obfuscated, glossaries and help icons should be implemented to help the user understand and refer back. (See an example of Ethereum’s glossary). Understandably, where dApps might have different target audiences (e.g. Golem for developers), this might warrant a different language. But for the majority of dApps that are aimed at the general masses, keep the language accessible, especially on the home page.
Dydx’s Homepage, ft. difficult lingo like “Perpetual Contracts”, “Deep liquidity”, “Buying Power’.
Dydx’s About page, which is weirdly easier to understand than their home page…
- Showing enough without overwhelming. As they learn more about blockchain, progressively increase their exposure to blockchain mechanisms. Other ways of not overwhelming can include segregating into two levels for basic users and more advanced users. A great example of communicating value is Diem’s website (formerly Libra, and backed by Facebook), which provides users with 3 levels of knowledge through their cards. The first level shows headings, the second level upon hover shows more information, and the third level lets users ‘read more and takes them to a page with more details. Many de-fi dApps also have noob/advanced settings for users to toggle between.
As the user experiences the dApp, education should be weaved into their whole experience in nuggets so that they’re not overwhelmed and instead feel guided.
Diem’s homepage (which also has *chefs kiss* content copy)
Sushi Swap offers an expert Mode
- Communicate using value, not a technical how-to. The classic ‘show don’t tell. Don’t go too deep into the roots of how the technicalities of blockchain work, instead communicate what value it’ll bring. For example, don’t talk about how great Layer 2 is on your homepage, instead emphasize faster transactions and lower fees. A great example of communicating value is Audius, they communicate the value of a free streaming service in such a simple manner it almost feels like a normal website.
- Presenting actionable routes/next steps. For users unfamiliar with the space, actionable routes are key in helping them guide them to the next steps. Peter Ramsey describes them as routes that are ‘common’ and ‘commonly preferable’. For example, watching a Netflix episode one actionable route they display is to watch the next episode, whilst another is to watch another series. An example of this not done well is in POAP, a dApp that allows you to bookmark events in your life in digital mementos. However, there are no actionable routes on the home page that tell the user how to get started. I’m left wondering how I even attend an event in the first place — is there a place to browse for them? This inability to do anything is confounded when I press ‘click here to mint a POAP (which I know I don’t have yet), but I’m not given any route to let me progress if I wanted to get started.
Source: POAP app
Establishing trust through transparency
The importance of this lies partially because of the newness of the tech, but also because trust and transparency are key characteristics of blockchain since it’s decentralized. Expectations should be managed by communicating capabilities clearly to users.
Being clear about security
Often words like ‘decentralization’ and ‘open-source’ can instill a sense of false security into users that blockchain is impenetrable. However, the level of security behind dApps lies in the strength of its blockchain code, and the 2016 DAO hack on Ethereum proved that hacks can in fact happen. Tell users about security measures taken e.g. if your smart contracts have been audited, as this helps instil trust in the protocol. Allow technical users to delve deeper into docs. that outline security measures and fallbacks, but make it easy for the average user to understand just how secure it is without relying on your word for it.
Transparency of transactions
Particularly for De-Fi dApps that host many transactions, all relevant information regarding transactions should be available for users. For design this includes:
- Showing the breakdown of the transaction. Giving users the ability to see all fees affiliated with the transaction. The level of detail to initially show depends on a number of considerations, but giving users the ability to at least expand details via good affordance, and helping them understand the transaction is important. Common good design principle aside, it helps users with understanding more about the technology, especially when aided with explanations
Examples of different transactions being broken down
- Showing pending and confirmed transactions. As dApps require you to first connect through a wallet (e.g. MetaMask/Trust Wallet/Coinbase) before instigating transactions, ensure that the state of a successfully completed transaction is reflected in the actual dApp itself and not just through the wallet. If wait times apply for transactions, make this clear to users and manage expectations of wait times through constant feedback.
- Showing the value in FIAT currency. As ‘normal’ money currently is still being considered in fiat currencies like the US dollar, help users understand the value of components in the transfer by displaying USD (or whatever currency).
“(~$43.85)” displayed as the fiat currency value (probably USD, but not sure). Source: 1inch
- Visibility of gas fees and time implications. Many dApps incur fees, and those building on Ethereum’s blockchain will most likely come across gas prices to transact. Visibility of these fees along with clarification of technical lingo will be especially useful for new users to the scene. Gas prices (aka the price of computation for the transaction) specifically, since a range exists, help users understand the implications of choosing different gas routes using easy language.
Example of gas fee ranges with time and fee implications. Another improvement includes showing the fiat currency. Source: Trust Wallet Community
No, take backsies
A big part of the blockchain is the immutability and self-governing aspect. From transactions to sign-ins, certain steps during user tasks need to be called out if it’s irreversible or outside the control of the dApp (since it’s decentralized). Benefits of this include 1) helping support education as the repeated emphasis on irreversibility helps people develop their mental mode in the blockchain space, and 2) generally being ethical, especially where livelihoods can be impacted or changed instantly through accidental taps and swipes (on that note, user interactions and gestures that are less prone to mistakes, e.g. swiping/sliding instead of tapping for a transaction to go through)
- Account recovery. Due to the centralization of platforms in web 2.0, a lot of us are familiar with recovering lost passwords and accounts. However, in web 3.0, put simply, you’re kinda screwed if you lose your security keys. Emphasize this to users multiple times when they’re first ‘onboarding’ with you. A great example is the wallet creation process with MEWwallet. During multiple stages of the journey, they use a combination of colors, bolding, appropriate copy, pop-ups, and micro texts during the task flow to communicate to users consequences and helpful suggestions. In web 3, data interoperability is a big thing. This means that users’ data and assets go with them where ever they go — users can hop across different products with one portable ‘username’ (aka their recovery phase or .eth address). Helping users keep their recovery phase secure means enabling them with the keys to their kingdoms (quite literally). For example, if users know their recovery phase for MetaMask, and they decide to switch to another wallet, as long as they have that phrase they can import their assets across seamlessly. Due to the interoperability-ness of this new world, UX is going to help play a key differentiator between Dapps because no one has time for shit designs anymore. This Twitter thread explores this more in-depth.
Source: MEW Wallet
- Prevent possible errors, educate on consequences. As users are familiarising themselves with the space, catch them before they fall by alerting them to the implications of risky moves. Display what step users are on in the overall flow so that they’re able to navigate back and know how close they are to ‘finishing’ a task.
- Irreversible transactions. Once transactions are confirmed on the blockchain, they’re designed to be irreversible. While there’s a whole process that users can possibly do on ETH to reverse a pending transaction, design elements alert users to the permanency of the transaction through colors, warnings, and appropriate copy. Employ double confirmations or more steps for ‘larger’ transactions. (Note: Well well well, as I’m typing and researching this topic I just came across ReverseCoin, apparently the first coin that lets users reverse transactions. Haven’t read about it properly yet but for anyone interested 👀)
- Web 3 Design resources:
✨Deep Work Studio✨Giving this first place and a shout out as Deep Work Studio is a literal goldmine of web3-related design case studies giving you full in-depth access to their facilitation sessions, UI links, and research reports. I did a lot of analysis on their current case studies reviewing their themes to understand considerations for dApps.
Beltran — Web3 Design PrinciplesA literal bible and a deeper look into the nitty gritty around web3 design (long but worth it read!)
Sarah Mills — Blockchain Design PrinciplesAlso a really great read from IBM designers who’ve worked on blockchain projects
ConsenSys Media — Design TabThe company behind MetaMask, this section is dedicated to designing on the blockchain.