An ongoing series in which I record UX/UI improvements I have noticed in DeFi. This is my own competitive analysis, as I collect things I find interesting, useful, or delightful. As a DeFi designer myself, I want a bunch of ideas to test.
Read the others here: Vol. 1, Vol. 2, Vol. 3, Vol. 4, Vol. 5, Vol. 6, Vol. 7, Vol. 8, Vol. 9, Vol. 10, Vol. 11
Well, amazingly, I’ve been doing this for 12 months now. Over that time, I’ve tested out dozens of different DeFi protocols, designed and advised a bunch myself, and slowly formed my opinions about what “good design” looks like in web3. Writing these every month also encouraged me to keep testing projects, keep the analysis going, and keep finding the “best” patterns to include in future designs.
On the other hand, I’ve also accumulated a bunch of questions I don’t know the answer to.
I think the pace of innovation has slowed somewhat, but I still find new designs every month. The bear market has been brutal for both investors and builders. A lot of projects have seen their funding dry up, treasuries diminish, and have been forced to let their staff go. Many friends and colleagues have been affected by the layoffs and downsizing. Web3 was a tough place to be in the last six months. The silver lining is that for those of us who are still here, it’s a bit calmer, a bit quieter, and a bit easier to think longterm. (I’m not going anywhere! All other industries are boring in comparison…) And I see more people interested in designing for web3 than ever before. I’ve given a few talks on UX for DeFi recently and have been pleasantly surprised by the turnout. I’ve also heard from several experienced UX designers looking to move into web3, even now. The fact that crypto is still attracting the attention of designers even as it faces increasing apathy from retail investors, is very encouraging. Given another three years and another influx of talent, perhaps the next cycle is the one we finally win some mass adoption?
Anyway, a final collection of tips for the year.
1. Include contextual help and insights
ref. Idle Finance
Idle Finance really emphasised guidance in their recent redesign. Most dApps have almost no explanatory text on the UI. This is a bit ridiculous because you land on a new project and have no idea what you’re actually meant to do. Cue 30 mins reading the docs and randomly clicking things.
Idle have a nice little animation explaining how their vaults work.
2. Emphasise safety
ref. Swapfish
If there’s one thing we learned in 2022, it’s that money can be lost as easily as it’s made. DeFi is never 100% safe, but if you have a new project, you can at least reassure users that you’ve done everything you can.
Swapfish show off their audits at the top of each page, which helps users feel confident depositing their money there.
3. Give the option to add new network, as well as switch to network
ref. Coneswap
I’ve written quite a bit about the “connection” stage in DeFi UX. As more and more apps go multichain, this is becoming an important, yet tricky part of the flow.
One thing I noticed earlier this year was apps automatically adding the new network if you didn’t have the RPC already in your metamask. This was a nice UX touch at first, except that each network can have multiple RPCs and each app might prefer a different one. So if you use a lot of apps on a lot of chains (like me) and you just click accept each time, you can end up adding new versions of the same network.
Coneswap don’t automatically prompt you to add Binance Smart Chain. Instead they give a nice big modal explaining that you’re on the wrong network and an option to switch network, if you know you have it; and to add network, if you know you don’t. It’s an extra bit of friction, but a necessary one. I much prefer this approach to just forcing a new RPC on you even if you have the network already in your metamask.
4. Add categories to the select token component
ref. TraderJoe
TraderJoe on Avalanche categorize tokens in a few tabs. This is such a simple idea, but it really helps. Starting with just the tokens in your wallet already streamlines the experience and makes the UI much clearer. Then the other tabs group tokens into categories like Large Cap and Stable Coin.
5. Include presets for concentrated liquidity pools
ref. TraderJoe
TraderJoe are knocking it out the park with their designs at the moment.
Uniswap V3 introduced concentrated liquidity pools. This innovation is now available on Avalanche thanks to TraderJoe. But they take the slightly complicated interface of Uniswap and add a few presets for common “Liquidity Shapes”. I think this is really cool, as it makes the process a lot simpler. There’s a Miller’s Law effect here because it reduces the number of options to just four — this makes the process faster for users who know what they’re doing. But I think there’s also a Curiosity Gap in action, because it takes something unfamiliar and confusing (concentrated liquidity pools) and makes it seem a little bit less abstract, and a little more appealing with the shapes — then provides a link to “learn more”. My hunch is that a lot of users will be intrigued enough by the visuals that they will actually go learn more. So this becomes a way to onboard curious new users at the same time. Whereas on Uniswap’s interface, they’ll spend a few seconds trying to figure it out then just nope out of there.
I like this kind of thing because it shows that a good interface will help both old and new users. It’s a UI that looks to the past and to the future.
🥂 to next year!
👋 About Me
I am a product designer and UX consultant specialising in web3. I enjoy scaling and leading design teams, and helping web3 companies at all stages of their development.
If you’re after some more insights, you might want to check my competitive analysis on DEXes, my case study for a project I did with Element Finance, or my series on DeFi Design Tips.
Other volumes here: Vol. 1, Vol. 2, Vol. 3, Vol. 4, Vol. 5, Vol. 6, Vol. 7, Vol. 8, Vol. 9, Vol. 10, Vol. 11.
https://twitter.com/JonCrabb
https://www.linkedin.com/in/jon-crabb/
