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
Another month done, another round-up of cool things I’ve found in DeFi.
1. Use dynamic button messages
ref. Beefy
This is quite a nice touch I noticed recently. When you hit the max button, the button turns from “Deposit” to “deposit all”.
2. Embed tutorials
Ref. Transferto.xyz
TransferTo includes some video tutorials on hover. In the clip above you can see a video explaining how to disconnect your wallet. One step beyond a standard tooltip.
3. Use eye-catching hover states
Ref. Akropolis
There’s been a mini web3 UI trend for vivid gradients this year, especially used in interesting ways. Karura used gradient strokes to interesting effect, and Sushi and Autofarm used them on buttons to make a really clear CTA.
Akropolis go a step further and have an animated gradient on their hover state. It’s very pretty.
4. Show ENS and Unstoppable Domains in the Connected note
Ref. Alpaca Finance
A few DeFi projects pick up on NFTs that you have in your wallet and use them as avatars. This has been happening for a while. Then I noticed a couple of sites pick on ENS (.eth) addresses in your wallet. This makes the visit feel personalised and much more like “logging in” to a web2 site.
I connected to Alpaca recently with a wallet that didn’t have an ENS in it, but did have an Unstoppable Domains address (.crypto) in it. And it picked up on that! This is the first time I’ve seen that. Anyway, I’m all for web3 projects doing a bit of personalisation based on NFTs you may hold. It makes the experience much warmer and welcoming.
👋 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
https://twitter.com/JonCrabb
https://www.linkedin.com/in/jon-crabb/
