How I designed LiquidFi to boost Liquidity Participation by 50%, increase Total Value Locked (TVL) by 20%, and reduce drop-off rates by 35%
Project Overview
Complex wallet integrations in DeFi apps led to low user engagement and high abandonment.
Key Task
Simplify liquidity management, improve portfolio tracking, and enhance user engagement in staking and rewards.
Year & Duration
Year: 2022
Duration: 12 weeks
Role
UX/UI Designer (Team of 3)
Toolkit: Figma, InVision, Maze
TL;DR
Problem
Cluttered interfaces, confusing data, and complex wallet integrations in DeFi platforms led to poor navigation and low engagement in liquidity pools and staking.
What I Did
Designed a user-friendly platform with clear APR visuals, real-time data, and seamless wallet integration to simplify liquidity management, staking, and rewards for all users.
Context
WavesTech’s users, both novice and experienced, were struggling with real-time data accessibility and
the steep learning curve of managing crypto investments.
Secondary Research Insights
70% of new crypto users abandon DeFi platforms
due to overly complex interfaces and unclear guidance on basic actions such as staking and liquidity management
40% of active DeFi users report difficulties in tracking APR
and understanding real-time data, leading to missed opportunities for better returns
50% of users expressed dissatisfaction with wallet integration
on existing platforms, citing challenges in connecting their wallets and managing their portfolios effectively
Primary Research Insights
(Conducted moderated user interviews and surveys with 20 novice and experienced crypto users to understand their pain points)
Beginners frequently abandoned platforms
due to confusing jargon and a lack of guidance on how to stake or add liquidity.
Experienced users were frustrated
by the lack of real-time APR tracking and poor data visualization, complicating liquidity pool management.
Both groups wanted better wallet integration
and a more intuitive user flow for liquidity and staking, with real-time feedback and portfolio clarity.
User Journey Map
(See enlarged version here)
Summary of Opportunity Areas
Easy Onboarding: Simplified wallet setup with clear guidance.
Intuitive Navigation: Filtered liquidity pools with APR insights.
Seamless Staking: Transparent APR, fees, and simplified forms.
Real-Time Tracking: Centralized portfolio & performance dashboard.
Instant Withdrawals: Easy liquidity access & reward claiming.
User Engagement: Personalized alerts & community features.
Problem Statement
How might we simplify DeFi by making data clearer, wallets easier, and liquidity more accessible?
Early concept testing
(moderated) with a control group of 15 novice and experienced DeFi users to evaluate usability across key features.
1. Liquidity Pool
Real-time data on liquidity pools, APR, and rewards.
Metrics and performance indicators simplify pool selection for better decision-making.
Feedback: The amount of real-time data overwhelmed some beginner users.
Insight: Progressive disclosure (e.g., hover-over tooltips) for complex terms like APR could reduce confusion for novice users while keeping experts satisfied.
2. Swap Feature Token Selection
Simple dropdown options for token pairs.
Slippage Settings: Customizable slippage tolerance for optimal transaction rates.
Real-Time Token Values: Shows value and equivalent amounts before confirming the swap.
Review Swap: Breakdown of pay/receive details, slippage tolerance, and transaction route.
Feedback: Several users struggled with understanding slippage tolerance and how it impacted their transactions.
Insights: Include a brief explanation or example next to the slippage setting to help users adjust it according to market conditions.
3. Stake for Incentives
One-click staking for rewards.
Add/Remove Liquidity: Simple liquidity contribution and withdrawal actions.
Token Search & Slippage Settings: Quick search, dropdown options, and adjustable slippage tolerance.
V1: Prioritizes detailed breakdown with boost multiplier and clear APR separation for transparency.
V2: Streamlines information by condensing layout, making it more scannable for quick decision-making.
Guide Wizard where users might need more information
Feedback: A few users found the staking process complex and expected a more guided flow for first-time stakers.
Insight: A step-by-step wizard for staking could simplify the process for beginners and encourage greater participation.
Information Architecture
Key Strategy
Small Tasks: Simplified, smaller steps for complex processes
Minimized Confusion: Reduced decision fatigue
Access to Critical Features: Staking, pool creation with minimal friction
Real-Time Feedback: Boosts user confidence
Seamless Transitions: Smooth task progression
User Engagement: Suitable for both new and experienced users
Design System
Introducing
LiquidFi
Wallet Integration and Onboarding
Wallet Explanation: Simple, clear explanation of wallet functions.
Supported Wallets: Integration for MetaMask, Coinbase, etc.
Connect Wallet CTA: Bold, visible button for seamless connection.
1.
Liquidity Pools Overview & Real-Time Data
Add Liquidity Button: Easy-to-find action button for pool engagement.
Pool Information: Displays clear TVL, APR, and reward data with color-coded performance indicators.
Charts & Graphs: Visual representation of 30-day pool performance and liquidity data.
2.
Portfolio Management & Staking
Portfolio Dashboard: Overview of claimable incentives and staked assets.
Stake Pools: Pool value, APR, and staking options easily accessible.
3.
Creating & Managing Liquidity Pools
Create Weighted Pool: Step-by-step setup with real-time previews.
Pool Summary: Shows token prices, composition, and fees before finalizing.
4.
Swap Feature
Token Selection: Simple dropdown options for token pairs.
Slippage Settings: Customizable slippage tolerance for optimal transaction rates.
Real-Time Token Values: Shows value and equivalent amounts before confirming the swap.
Review Swap: Breakdown of pay/receive details, slippage tolerance, and transaction route.
5.
Review Swap
Pay/Receive Details: Shows token amounts for both input (wstETH) and output (ETH).
Slippage Information: Displays max slippage tolerance and expected received amount.
Transaction Route: Clear breakdown of the exchange path and token conversion.
Key Design Tokens & Actions
6.
Stake for Incentives: Simplified staking to earn rewards.
Add Liquidity: One-click option to contribute liquidity.
Remove Liquidity: Easy access to withdraw funds from liquidity pools.
Slippage Settings:
Customizable slippage tolerance (1%, 2%, 3%),
Toggle for using signatures.
Staking Tokens:
Summarized staking details (total value, share),
Confirmation buttons for approval.
Token Search:
Dropdown options for selecting tokens,
Quick filter and search bar for easy navigation,
Display of popular tokens.
Impact
Liquidity Engagement 50% ▲
Participation rate: 30% → 50%
Clear APR visibility and real-time updates encouraged more users to engage with liquidity pools.
Staking Engagement 65% ▲
Staking participation: 25% → 65%
Streamlined staking and real-time reward tracking made it easier for users to participate.
Drop-Off Rates 35% ▼
Drop-off rate: 40% → 35% drop-off rate
Simplified wallet integration and onboarding reduced friction, improving user retention.
Reflections
When financial tools are confusing, users disengage and distrust.
Straightforward design makes complex tools accessible to all users.
📊 Designing for FinTech Requires Clarity
Complex DeFi concepts like APR and liquidity overwhelmed users. Simplifying data visualization and using progressive disclosure built trust and engagement.
🔍 Balancing Simplicity & Functionality is Key
User testing revealed that minimal interfaces helped new users, while experts needed detailed insights. Iterative design ensured the right balance for both.