DeFi Design Tips Vol. 2

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 do not endorse every thing I notice, nor do I do think every protocol I mention is perfect. I am just collecting some things I find interesting, useful, or delightful. As a DeFi designer myself, I want to design the best apps I can and have a bunch of ideas to test. Eventually, I will probably synthesise the volumes into some definitive learnings.

Read Volume One here.

1. Show weekly yield

reference Beets.fi

This is a nice example of turning abstract information into something useful for the user.

It is common for yield farms to show the apy and the daily interest as a percentage. This isn’t really that useful though, because yields change all the time, and most farmers don’t leave their assets in one place for a year. And without usd amounts, it forces the effort of calculation onto the user.

A lot of degens, however, will claim rewards once a week (depending on chain + transaction fees). Showing a dollar value per week is a genuinely useful piece of information.

2. Use a modal to display error messages — don’t rely on snackbars or metamask

reference Spookyswap

Spookyswap have custom modals for every state. I like how this error message also gives understandable instructions: “try raising slippage”

I’m a big fan of the Spookyswap UX/UI — if you work there, write me, I want to talk to you !— because they have gone above and beyond on the UI.

In particular, they have added confirmation modals for every state, including errors. DeFi is sorely lacking in feedback states, which often leaves the user wondering if anything even happened. You sometimes get a disappearing snackbar, but that’s about it. This can be especially frustrating when you get an error, because it’s not in your face enough to really register, and you don’t get enough of a clue to figure out what went wrong.

Here you get a sad looking cat, an error message, and some useful information that can be read by humans: “try raising slippage”.

3. Allow multiple token approvals at once

reference Voltage

Action is confirmed with simultaneous snackbars

You have to approve everything in DeFi before you can actually do it.

When providing liquidity, this looks something like:

click approve > confirm in metamask > button may change to “approve [token 2]” or maybe just stays the same > click approve again > confirm in metamask > watch button change to “supply” > click supply > confirm in metamask.

Depending on network speed this can be a bit tedious. Voltage Finance shows buttons for both approvals at the same time, which means you can get it over with quickly. Once approved, these buttons disappear.

4. Use on-brand UI to draw attention

reference Osmosis

This is a really minor tip. But while this would be taken as a basic assumption in most of the design world, it’s not always standard in DeFi. :)

Osmosis highlight the “best” option for the user, and they do so with a relevant gradient stroke + a custom icon. Simple. Attractive. Effective.

5. Group multiple actions together to show continuous progress

Reference Solidly

People are motivated by Progress, Mastery and Control (see the work of Daniel Pink).

Showing even small signs of progress can have a powerful effect.

Solidly combines the separate allowance+action steps into one modal. This and the relevant icons (check circle, timer) clearly indicates progress to the user.

It also gives them the feeling of control as they are made aware of future steps before they reach them.

Andre Cronje’s Solidly project may have been ill-fated, but perhaps this design pattern will live on… 👻

See you in volume 3…

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.