DeFi Design Tips: Volume One

Crypto UX/UI is slowly getting better. But it has a long way to go.

Here are some little improvements I’ve noticed in the space.

At the very least, they’re new ideas. In an industry filled with straight-up clones, I want to draw attention to the teams that are experimenting with new ideas.

If you actually work in crypto, then consider implementing the following tips. These small details can improve the user experience and make for a more pleasing design. Feel free to connect with me as well — it’s a small world :)

Read Volume Two here.

1. Recommend leaving some tokens in the wallet to pay gas fees

reference Balancer

If you swap some of the native token (in this case, Ethereum), Balancer calculates how much will be left in the wallet after the swap, and if this will be enough to pay gas fees.

This is shown with a very simple progress bar and message in traffic light colours.

Nice work 👍

This bit of feedback is an excellent UX improvement.

Swapping your tokens and then finding out you don’t have enough to do any other transactions is very frustrating.

Balancer was forked to the Fantom network by Beethoven (Beets.fi) and the same functionality is found there, for the native token FTM. Good to see it carried across.

2. Stronger feedback for serious errors

ref. Balancer

The UI makes it very obvious the user is doing something wrong.

1. Input field highlighted with a red stroke
2. Error message in red below the relevant field
3. Additional error message above the CTA
4. The additional error message makes use of a red opacity fill, bold text for the headline, and a warning icon.

This is maybe the strongest, clearest, feedback I’ve seen anywhere in DeFi.

3. Replace ‘balance’ with the wallet icon

ref. Paraswap

The user’s balance is shown next to a wallet icon above each field

Paraswap shows the user’s balance after a subtle wallet icon. This means they don’t have to show the word ‘balance’, reducing the amount of text on a complicated component.

This makes it easier to scan.

The downside is that it might be slightly more confusing for a newcomer, but this would only be for the first time they used it.

4. Show USD equivalent as a tooltip on hover

ref. Paraswap

You can see in the ‘receive’ field there is space to show the usd equivalent alongside. In the ‘Pay’ field, the max button and the many digits leave no space to show this.

Paraswap get around the issue by showing the usd equivalent in a tooltip as the mouse hovers over the box.

I’ll be honest, I’m not sure this is ideal.

I think the best UX would be to always show the USD equivalent underneath the field.

This is more in the category of ‘ooh, nice, not seen that before’.

5. Place the Connect Wallet screen within the primary component

ref. Matcha

Again, this is more in the category of ‘ooh, nice, not seen that before’.

I think it is very cool that Matcha have essentially turned the user flow on its head and only prompt you to connect wallet once you’ve selected the trade.

On the other hand, this feels weird to me. Perhaps because I’m so conditioned to connect wallet first.

Putting this feature within the main component is also very interesting. It seems a bit more user friendly, although it does make the user flow feel a bit disjointed. This would be a good feature to test with users. I’m curious what the response would be.

That’s it for now. I will be challenging myself to uncover and share more UX/UI improvements as I find them. So if you’re interested in crypto UX, feel free to subscribe for future stories.