An ongoing series in which I record UX/UI improvements I have noticed in DeFi. I write this mostly for myself, as a form of competitive analysis. I am just collecting things I find interesting, useful, or delightful. As a DeFi designer myself, I want a bunch of ideas to test. Eventually, I will probably synthesise the volumes into some definitive learnings.
Read the others here: Vol. 1, Vol. 2.
1. Show funds on all chains
Beefy allows you to compound your assets on a variety of chains. Up until now you had to switch chain — using Metamask or whatever wallet you used — to see and manage those assets. They recently released a new version on which you can see all of your positions at once. You only need to switch chain when you want to deposit or withdraw those assets.
If you have an app that exists across multiple chains, this seems like a great change to make.
2. Combine multiple transactions into one action
Another one from Beefy. Usually DeFi apps require you to first approve and then deposit your tokens. This is at least two separate actions, each requiring Metamask confirmation and gas fees. More complicated apps will require multiple approvals before one deposit.
The new Beefy Finance is the first app I’ve seen that combines these steps. The button just says deposit/withdraw, even on the first interaction. It doesn’t ever say “approve”. This reduces cognitive load for the user, who is focused on one action.
The snackbar then says “0/2 Transactions Confirmed”, indicating that there will be two steps to this. After the first transaction, the second is initiated automatically, and metamask pops up straightaway. The user doesn’t have to do any more clicking, except on Metamask.
I really like this UX improvement, and intend to shamelessly steal it for apps I’m working on. I can’t see a reason why you wouldn’t want this tbh. Any ideas? Lmk below.
But it’s not perfect.
The “pending” state shows the loading bar in the same position and colour. So you have this weird sequence where the bar is one third along for the first step, then shoots up to two thirds along for pending, then back to halfway for the second tx, then up again to two thirds for pending.
I would keep the bar in the same position for “pending” as the previous state, but change the colour. I’d probably also reserve the green just for confirmed, and use yellow for pending. Beefy already uses red for failed tx, so if they implemented this traffic light system fully, it would make it more consistent all round.
3. Meaningful signature requests with natural language
ref. DegenScore (legacy)
For most apps, when you approve something in Metamask, you have no idea what you’re clicking. You just hit a button and pray to the money gods that your wallet won’t be drained by some nefarious smart contract.
The signature request for DegenScore has a bit of personality, and explains clearly what you’re doing:
4. Show which network you are connected to
Autofarm is another multi-chain yield optimizer, similar to Beefy.
They don’t allow you to see all chains at once, but they do at least show what network you are currently connected to.
In the below example, I have my Metamask connected to the Polygon network, but am viewing the Avalanche vaults. Autofarm simply put a little green light next to the chain I am currently connected to.
I like this because it’s really simple and within the app itself. Some multichain apps won’t even open unless you’re on the right network, which is a really obstructive practice. You should allow users to see the other sections, even if they’re not connected, and then prompt them to switch networks when they try to perform an action.
5. Animated background elements
A small UI thing, but I’m noticing more and more dApps incorporating little background animations. VVS on Cronos is nothing special, but I like the subtlety of it.
I think this is part of a general move we’re seeing towards more consciously designed defi. The best defi apps are starting to look and feel more like regular apps, and are making full use of transitions, background movement, micro-animations etc. This is definitely a good thing.
See you in volume 4…
I write these largely for myself, but if you’re reading this, feel free to write a comment. If you’ve spotted anything interesting in defi UX/UI, I’d like to hear about it.
