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
1. Show fees as a proportion of interest earned
ref: Rhino.fi
When a DeFi app charges fees for something, I often find myself calculating what that percentage means in real terms, and how long it will take for me to make it back.
Rhino does the hard work for you and shows exactly this!
The text reads ‘you will be charged a 0.05% fee to remove your funds. This fee is equal to 6 days of interest.’
In the crazy days of late 2020, it was not uncommon for farms to promise huge apy, but have a ~4% withdrawal fee. Which in practical terms meant there was no point in depositing there — you would be tied up for an unreasonable amount of time and probably exit with less than you entered. They were banking on most people not bothering to work that out.
Good guy Rhino is honest about his fee structure. 🦏 👍
2. Show the price stability of the swap route
ref.: Velodrome
When swapping tokens on a DEX, the transaction usually involves a couple of different swaps. Many DEXes show this route, and it can be useful when swapping things like stablecoins because you might find a better result choosing one stablecoin over another.
If token prices are changing quickly, you can also end up with a bit less of your output token than you’d hoped for.
Velodrome shows the route, but it also shows you how volatile the route is, giving you more information about possible price changes.
2a. Separate price info section
This is also cool. It deserves its own point, but I’ve already included one thing from Velodrome.
It’s always useful to see the USDC price for any tokens. These often get squeezed under the main amount, which can look a bit cramped. Velodrome’s airy design uses a lot of white space and gives this information more breathing room.
3. Have a simple walkthrough mode
ref.: Stargate
Stargate has a simple mode, which makes bridging assets a very easy experience.
There’s a lot to enjoy about this:
- Big, clean, UI
- The stepper showing all stages of the process
- Good use of green text to emphasise the main actions
- The progress animation (I love ‘moments of delight’ in painful processes)
- The exceptionally clear feedback (number of seconds until transfer complete)
Simple modes are often basically the same as the complex mode, but with some minor text hidden away. Stargate have actually redesigned the whole bridging UX and made it a step-by-step process.
4. Just say ETH and forget about WETH — most people don’t know or care what this is
After interviewing lot of DeFi users, and speaking to a lot of people who work in web3, I’ve come to realise that most people don’t understand what WETH is.
On top of that, a lot of apps are smart enough that they don’t care if you’ve got wrapped ETH or regular ETH. They wrap and unwrap it for you.
And with layer 2s and different EVM chains, the distinction is meaningless because it’s always a wrapped token.
And in addition to that, a lot of apps themselves use the terms inconsistently or flat out wrong.
I might write a longer piece on the UX of wrapped tokens (for the handful people who care…), but here’s a quick overview from Binance Academy:
Wrapped Ether (WETH) is a token pegged to Ether (ETH). WETH is used in several platforms and DApps that support ERC-20 tokens. While ETH is used to pay for network transaction fees, it doesn’t have the same functionality as ERC-20 tokens.
https://academy.binance.com/en/articles/what-is-wrapped-ether-weth-and-how-to-wrap-it
Essentially:
ETH=the token you use to pay for gas
WETH=the token you deposit in a dApp for earning interest/whatever
If you want to drop ETH in a lending app and earn some interest, you’re actually depositing WETH, not ETH.
However, some apps are really inconsistent with how this is communicated. Take Aave for example, one of the largest of all dApps.
In the recording below, you can see the app detects I have some ETH in my wallet. I select that asset and I’m told my “Ethereum wallet is empty”. Despite the fact that I accessed this vault from a link showing me my balance. I notice the vault title is actually “WETH Wrapped ETH”. I then check all markets, and scroll down to find the Ethereum vault and it again takes me to the WETH vault. If it’s only going to let me use WETH, why does it bother showing me my ETH balance? At least give me the option to wrap it.
Where this gets particularly weird is when dealing with other networks.
ETH is the native token or utility token on the Ethereum network.
Each network has its own utility token. Fantom has FTM. Avalanche has AVAX etc.
ETH on any other network is an ERC-20 representation of mainnet ETH, so it is technically wrapped ETH. But at this point, nobody cares. You can call it WETH or ETH, it does the same thing. It equals ETH on that network.
That network’s native token, however, can be wrapped, and indeed must be wrapped to use it in any applications. So if we look at Polygon (matic), we have:
- Ethereum
eth- the utility token - Ethereum
weth- the erc20 wrapper foreth - Polygon
matic- the utility token - Polygon
wmatic- the erc20 wrapper formatic - Polygon
weth- a polygon erc20 representation for polygoneththat was bridged from ethereum mainnet
So, if you’re with me so far… we should write WETH for ethereum that’s used in a defi app on mainnet. We should also write WETH for any ethereum that’s being used on a different network. For those different networks, we should write w[utility token] any time that token is wrapped and used in an app.
But if we look at a multi-chain yield aggregator, we see this logic go completely out the window! I wanted to find a big list of farms on a few different networks, so I searched for ETH on Beefy:
Netswap shows WETH on Metis. Sushiswap shows WETH on Celo. But Sushiswap shows ETH on both Polygon and Moonriver. Interestingly (infuriatingly?) Sushiswap on Moonriver uses wrapped moonriver (wmovr) but non-wrapped eth. 🤔
I wasn’t sure if Beefy were pulling this info from the liquidity pools or if someone was manually writing in the tokens. I then went to Sushi’s swap page on Polygon and it will only allow you to choose WETH (which is technically correct).
If you scroll down some big multi-chain apps, you’ll see apparently arbitrary usage of wrapped and non-wrapped tokens. The designation seems to vary depending on the aggregator app, the underlying Liquidity Pool and the actual network. I guess every project just write in what they feels works. For example, Autofarm always write WFTM for their Fantom pools and Beefy always write FTM. And seeing as though very few people — even in the industry — understand wrapped tokens, you see inconsistent usage across the whole of DeFi.
But anyway, the point is that none of this matters to most users!
If you’re not on mainnet, this is meaningless. And if you need to deposit FTM on a Fantom app, most apps will happily wrap your FTM for you, it will cost cents, and you won’t realise what just happened behind the scenes. You rarely have to pick the wrapped function. The app just figures it out. They are functionally identical.
On the Ethereum mainnet, the distinction is slightly more important because fees. You want as few transactions as possible, and you probably want to keep a healthy stash of WETH for DeFi.
But for most everything else, it is confusing and meaningless.
Just kill the w, and stop referring to wrapped tokens.
Other volumes here: Vol. 1, Vol. 2, Vol. 3, Vol. 4, Vol. 5, Vol.6
👋 About Me
I am a product designer and UX consultant specialising in web3. I enjoy building and leading design teams, and helping DeFi companies at all stages of their development.
If you’re after some other insights, you might want to check my competitive analysis on DEXes.
Feel free to get in touch: jon [at] joncrabb.com
https://twitter.com/JonCrabb
https://www.linkedin.com/in/jon-crabb/
