edgeSwap DEX
Decentralized Token Swaps, Liquidity Pools & Yield Design System
End-to-end product design for a decentralized AMM exchange. Delivered friction-free token swaps, liquidity pool provisioning, and a complete design system across 3-4 months of iterations.
edgeSwap
3-4 Months (Iterative Design)
Lead Product & UX Designer
AMM Swaps, Pools & UI Kit
Friction-Free Token Swaps on Automated Market Makers
edgeSwap is a decentralized Automated Market Maker (AMM) exchange designed for instant, permissionless token swaps. It allows crypto users to trade tokens directly from their Web3 wallets without relying on centralized intermediaries or order books.
Over 3-4 months of focused design iterations and usability testing, we engineered the complete swap flow. We tackled major DeFi pain points around slippage tolerance, high gas costs, front-running MEV risks, and confusing token approval transactions.
Instant Token Swap Interface
Core AMM swap module featuring smart token pairing, live conversion rate feeds, balance auto-fill, and configurable slippage settings.
Why Decentralized Token Swaps Required a Human-Centered UX
Trading on decentralized exchanges often intimidates mainstream users. Traders face uninformative error messages, sudden transaction reverts, hidden liquidity provider fees, and impermanent loss. Across 3-4 months of iterative prototyping, we resolved four foundational UX hurdles:
Slippage & MEV Defense
Real-time price impact alerts and dynamic slippage recommendations prevent traders from losing value to front-running bots.
Clear Token Approvals
Separated ERC-20 token allowance approvals from final swap executions with plain-language explanations to build user trust.
Transparent Pool Sizing
Detailed token ratio calculations and pool share percentages help liquidity providers deposit with exact yield expectations.
Self-Custody Wallet Flow
Integrated multi-wallet connection modals with live gas trackers ensure transactions confirm without unexpected network failures.
Swap Confirmation & Slippage Drawer
Pre-transaction confirmation modal detailing minimum received after slippage, price impact severity, liquidity provider fees, and routing.
Eliminating Blind Confirmations and High Price Impact
Most DEX interfaces show estimated swap rates that differ significantly from the final executed price. When liquidity in a pool is shallow, large market orders cause massive price impact, leaving users with far fewer tokens than expected.
We created an intelligent confirmation drawer that breaks down the trade math before signing. Traders review the exact minimum tokens received, price impact percentage with color-coded safety badges, and protocol routing fees. This transparent layer prevents accidental high-impact trades and drastically lowers support requests.
Liquidity Pool Discovery & Yield Provisioning
Automated market makers rely on continuous liquidity. We designed an intuitive pool explorer paired with a streamlined deposit interface so liquidity providers can allocate capital safely and forecast fee rewards with clarity.
Liquidity Pools Directory
Searchable pool scanner displaying Total Value Locked (TVL), 24h trading volume, and estimated annual percentage yields (APY).
Add Liquidity Interface
Dual-token deposit module with auto-balancing 50/50 token ratios, pool share calculator, and LP token mint estimation.
Transparent APY & Yield Metrics
Traders easily identify lucrative yield opportunities and compare pool depth across major trading pairs without jumping between external trackers or blockchain explorers.
Automated Ratio Balancing
Entering an amount for Token A automatically calculates the required amount of Token B based on current pool reserves, preventing failed transactions due to ratio mismatches.
Pool Lifecycle & Capital Management
Managing the complete lifecycle of AMM liquidity requires flexible exit mechanisms and permissionless pair creation. We designed an intuitive removal slider alongside a guided token pairing wizard.
Remove Liquidity Drawer
Flexible capital withdrawal drawer with percentage buttons (25%, 50%, 75%, Max), underlying token breakdown, and burn signature flow.
Permissionless Pool Creation
Step-by-step pool deployment wizard enabling project founders to select token pairs, establish initial exchange rates, and deposit seed liquidity.
Partial Liquidity Removal
Liquidity providers do not need to exit entirely. With quick percentage selectors, users withdraw partial holdings while keeping the remainder earning swap fees in the pool.
Guided Initial Pricing Wizard
Setting an opening price ratio for a new token pair can lead to costly arbitrage loss if done incorrectly. Our wizard validates pricing against external markets before deploying the pool.
Portfolio Positions, Web3 Wallet & Macro Analytics
Traders require clear visibility into their active LP stakes, seamless Web3 wallet connections, and protocol-wide market trends. We created a unified portfolio section and macro intelligence dashboard.
Active Liquidity Positions
Dedicated portfolio view displaying staked LP tokens, share of pool percentages, and accrued trading fees available to claim.
Web3 Wallet Connector
Clean connection modal supporting MetaMask, WalletConnect, Coinbase Wallet, with network auto-switching and transaction status tracking.
Protocol TVL & Volume Insights
Global analytics visualizer charting Total Value Locked (TVL), 24-hour exchange volume trends, and top token performance metrics.
Clear LP Portfolio Tracking
Liquidity providers monitor all deposited pairs in one clean dashboard, with live fee accumulation totals and direct links to add or remove liquidity.
Frictionless Web3 Onboarding
Clear connection feedback, automatic network switching prompts, and visual approval states guide newcomers safely through blockchain signatures.
Macro Protocol Transparency
Live liquidity depth and historical volume charts give traders confidence that edgeSwap possesses sufficient depth to execute trades without slippage.
Design System & AMM Component Kit
An enterprise-grade decentralized exchange requires consistent, reusable UI components that prevent user error during financial transactions. Over 3-4 months of design and testing, we engineered a complete design system for edgeSwap:
Accessible Dark Palette
Calibrated dark charcoal backgrounds with vibrant cyan and violet interactive accents. Meets WCAG AA contrast standards for clear daytime and nighttime readability.
Tabular Number Figures
Integrated monospace tabular numeral fonts for all token balances, exchange rates, and APY figures, ensuring zero layout jitter as balances update.
Verified Token Selector
Engineered modal with contract address search, popular token shortcuts, and scam warning badges for unverified token contract imports.
Slippage Preset Controls
Modular settings drawer with one-tap presets (0.1%, 0.5%, 1.0%), custom tolerance inputs, and transaction deadline countdowns.
Token Selector & Contract Verification
Searchable asset modal with verified list badges, popular quick-select chips, and smart warnings preventing malicious fake token swaps.
3-4 Months of Usability Validation
The design process followed ten structured phases, moving from AMM competitor audits through interactive user testing to final developer handoff:
1. User Persona Development
Mapped requirements for casual swap traders seeking quick token conversions and liquidity providers evaluating APR yields and divergence risk.
2. Prototyping & Feedback Loops
Conducted interactive testing sessions to validate slippage tolerance defaults, reduce transaction revert rates, and simplify token approvals.
Results & 3-4 Month Impact
Across 3-4 months of focused product design, edgeSwap established a clean, dependable decentralized exchange experience:
3-4 Months Design
Fast-paced iteration cycles, wireframe testing, and UI refinement focused on reducing AMM trading friction.
10 Production Views
Engineered swap interfaces, confirmation drawers, pool directories, deposit/withdrawal flows, and analytics.
Zero-Surprise Swaps
Pre-trade price impact alerts and dynamic minimum received calculations virtually eliminated high-slippage errors.
Production UI Kit
Tokenized components, token selector modals, and tabular data displays ready for scalable multi-chain deployments.
Gallery
All 10 production screens designed for the edgeSwap decentralized AMM exchange. Click any view to inspect in high resolution: