The basic flow for adding liquidity looks like this:
- Find an attractive pool
- Get the right tokens in the right proportions
- Add liquidity
- (If staking) Stake the receipt tokens for more rewards
N.B. UniV3 style liquidity pools introduce additional complexity, but the principles are largely the same.
You can see on the rough user flow above that there are a couple of steps in each section. The user flow could be expanded to show much more detail, and this would be useful in helping to identify more granular problems. Once you have a user flow (of any size), it’s useful to ask the following questions:
🤨 Questions
- Are there any steps that could be combined or skipped entirely?
- Are there any other ways to speed up this flow? (Accelerators 🏎️ )
- What are the pain points at each step?
- Are there any delightful points that I can make even better?
😩 Pain points
Find
- Unable to find the right pool
- Unclear APR
Swap
- Being taken out of the flow to swap
- Swapping 50% of a token
- Saving enough native tokens for gas
Add liquidity
- Not having the right tokens
- Too much clicking
- Potential yield unclear
- Potential fees unclear
Stake
- Being taken out of the flow to stake
- Finding it hard to claim
- Being unable to harvest + stake in one go.
😁 Fixes
Find
- Include some kind of filter. This will depend on the project, but here are some possible categories:
- Eligible (meaning you have the tokens in your wallet)
- Stablecoins
- Main / core / primary pools (large cap tokens etc)
- Risk
- Additional rewards / boosted
- Follow basic accessibility guidelines: good contrast, large text, readable font
- Add tooltips for APR showing where this yield is coming from
Swap
- Include a link to the DEX swap page! It is frustrating to investigate a pool and then realise you’re missing one or both the tokens. Include a quick link back to the DEX reading “Get” or “Trade”.
- Try to integrate this into the flow as much as possible, so the “get” link should go to the dex with one of the tokens preloaded, ready for purchase. 🏎️
- Include a 50% button in the DEX. Many users will end up swapping 50% of one token for another, specifically so they can farm that pair. A 50% button helps with this.
- If the user tries to swap 100% of the native token, warn them that some will be needed for gas.
Add Liquidity
- If possible, add a zapper! This allows the user to essentially skip the entire swap section, making the journey significantly shorter. 🏎️ There could be two levels of Zapper functionality:
- Use either of the two tokens
- Use other tokens (such as other large cap tokens, or anything in the user’s wallet)
There will usually be greater price impact when using other tokens, but it can be a great option for the lazy user who just wants to deposit tokens as quickly as possible.
- Show USD equivalent everywhere. Users should know the real value of every transaction they make.
- Make wrapping and unwrapping tokens invisible - user should be able to use either regardless of what the pool technically consists of.
- Set a generous default gas amount to ensure the transaction goes through (except on mainnet!)
- Explain fees in real terms. Ref: Rhino.fi
- Combine ‘give permission’ and ‘make transaction’ into one automated flow - the next action should begin as soon as the previous one completed, so that the user can just click through their wallet authorisations 🏎️
- Make sure this process is accompanied by feedback at every stage: approve, confirm, in progress, successful
- Use animations, artwork, and friendly language to humanise and reassure the user during this process
- Warn users to keep enough native tokens in their wallet to pay for gas fees — this is very important if the user presses the ‘max’ button
- Display APR in real terms (how much will you earn each week / month)
Stake
- The user should be nudged towards staking as soon as they have added liquidity
- Include a CTA on the completion screen taking them direct to stake
- show how much extra they could earn
- use colour and typography to make this appealing.
- If manual harvesting is required, put the CTA at the top of the main page
- Allow users to “Harvest All”, instead of doing them individually.
- Show earnings in USD as well as / instead of token values
- Allow users to harvest+restake in one go 🏎️
- Combine complicated or frequent actions e.g. harvest+stake, relock, etc
🎆 Celebrate
At the end of the flow, whether adding liquidity or staking, you should celebrate this step with the user. This is arguably one of the hardest, but most frequent, steps in DeFi. There are a lot of approvals, transactions, and screens involved. If your user went through all of that and deposited large amounts of money with you, this deserves some celebration.
There are multiple animations that can be added easily to a site:
- Fireworks
- Ticker tape
- Exploding coins
- Custom