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.
1. Allow the user to change network from the main button
ref. Zenlink
A common pattern in DeFi is to show some instructional text within the main CTA.
This is pretty weird UX outside of crypto, but seems to be a new standard in DeFi.
If you are connected to the wrong network on Uniswap, the main button says ‘Connect Wallet’. You then have to manually go to the MetaMask extension and switch network. The button itself doesn’t do anything, so this isn’t an action label. Again, outside of DeFi this is a weird pattern. You would expect the button that says ‘connect wallet’ to actually do the thing it promises.
On Zenlink, the button goes beyond just telling you ‘wrong network’, and instead becomes a positive action: ‘Switch to Moonriver’.
Compare to the video of Uniswap below:
2. Provide onboarding-style tips for complex apps
ref. Zenlink
Zenlink is a powerful trading app that works across Ethereum and Polkadot and allows you to connect to both chains at the same time. It has a few features that are closer to centralised exchanges than DeFi. One thing I particularly like are the ‘how-to’ pop-ups you see on first use, and again for significant updates.
For regular apps, you would expect to see these kind of popups during an onboarding, highlighting certain areas and showing you how it all works.
3. On trade functions, show quick links to tokens you currently have in your wallet
ref. Balancer
I’ve featured several elements from Balancer in these volumes. It seems like every time I use it, I notice some other little UX innovation. A lot of thought has clearly gone into their platform. Here, they have included a panel on their trade page showing tokens that are currently in your wallet.
The icons also act as buttons to quickly select the token you want to trade. This is a very convenient alternative to scrolling through the standard dropdown.
This feature isn’t perfect though — it’s not obvious that the user can interact with the tokens. The trending pairs below have clear affordances, showing they are selectable: the cursor turns to a hand, the button changes colour on hover. Whereas the tokens in My wallet have no indication they are clickable. It would be nice if there was a clear hover state, plus a selected state where the token got bigger and was outlined, or other similar UI feedback. There is also no outline around the tokens, so they fade into the white background; and very little padding between them. This makes them quite hard to see and interact with, meaning a very cool feature is easy to miss.
4. Add instructional text to the Connect Wallet modal
ref. Aurigami
Aurigami is a lending protocol built on the Aurora network. When you first connect, they give you an expanded connect wallet modal.
Instead of just the standard list of wallets, it’s broken down into steps with an explanation at each stage.
