Launchpad UX/UI Design Development
Launchpad is a product with multiple audiences simultaneously: projects launching; investors participating; liquidity providers staking for tier. Each group has own user journey, own tasks and own pain. If design tries serving everyone from one screen—it serves no one.
Plus, launchpad operates under extreme time pressure: IDO opens at 15:00 UTC, 5 minutes before—page doesn't load, button doesn't respond, MetaMask hung. Not edge case—guaranteed scenario at normal traffic. UX must be designed accounting for this.
User Flow Structure
Investor Journey
Main investor flow consists of several stages, each needing clear UI state:
1. Discovery—project page. Here investor decides to participate. Critical: social signals (round size, participant count, backers), technical parameters (vesting schedule, token distribution), time markers (when opens, how much left).
2. Eligibility check—before registration user sees if they can participate: wallet connected, KYC passed, tier matches. Should be checked early, not on "Buy" click moment.
3. Registration / Whitelist—if registration required before IDO, separate step with explicit confirmation. Countdown to registration close.
4. Purchase—most critical screen. Simplicity more important than beauty: input amount field, show allocation, approve → buy buttons. No extra elements. States: idle → approving USDC → confirming purchase → success / error.
5. Post-purchase—how many tokens bought, vesting schedule, when first claim, documentation links.
Staker Journey (Tier System)
Separate flow for users staking platform token for tier:
- Dashboard of current tier and progress to next
- Calculator: "stake X tokens for Y days → get tier Z → allocation $W"
- Staking history, unlock time
Project Launcher Journey
Form for project submission, dashboard for real-time IDO monitoring (participants, raised, tier breakdown). Admin-like interface but part of launchpad product.
Key UI Components
Countdown and Time Pressure
Countdown timer—one of most psychologically loaded elements. Several rules:
- Synchronize with blockchain timestamp, not client time
- At < 5 minutes—increase visual weight, add urgency indicator
- When IDO opens—smooth transition without page reload (WebSocket or polling 3-5 sec interval)
- At completion—immediate feedback, don't wait for next RPC request
Transaction Status Flow
EVM transactions go through several stages, user must see each:
[Waiting for signature in wallet]
↓
[Transaction sent: 0x1234...]
↓
[Confirmation 1/3]
↓
[Success] or [Error: <human-readable reason>]
Show errors understandably: not execution reverted, but "Your allocation exhausted" or "Purchase period ended". Requires mapping revert reasons to UI messages.
Wallet Connect and Network Switching
Multi-wallet support mandatory: MetaMask, WalletConnect v2, Coinbase Wallet, Safe. On connecting to wrong network—immediate prompt to switch, not just error.
// Hook for network state management
function useNetworkGuard(requiredChainId: number) {
const { chain } = useNetwork();
const { switchNetwork } = useSwitchNetwork();
const isWrongNetwork = chain?.id !== requiredChainId;
return {
isWrongNetwork,
switchToRequired: () => switchNetwork?.(requiredChainId),
networkName: CHAIN_NAMES[requiredChainId]
};
}
Allocation Display
Investor should see allocation in several formats simultaneously:
| Format | Example |
|---|---|
| In tokens | 10,000 TKN |
| In USD | $500 |
| % of round | 0.05% |
| Vesting | 20% TGE, 80% 6 mo. linear |
States and Loading UX
Launchpad works with multiple async data sources: RPC for on-chain state, backend API for off-chain data (KYC status, tier), price oracle. Each can be slow or unavailable.
Loading state rules:
- Skeleton screens instead of spinners for content blocks—user sees page structure while data loads
- Stale data with indicator—better show 30-second-old data marked, than empty screen
- Optimistic updates for purchase—show "Success" right after confirmation, don't wait subgraph indexing
- Retry logic with exponential backoff for RPC requests, without user notification
Mobile Adaptation
Significant part of launchpad audience—mobile users via WalletConnect. Specifics:
- Deep link to open wallet on transaction confirmation
- Touch targets—minimum 44px for interactive elements
- Keyboard on amount input—numeric, not standard (type
inputmode="decimal") - Scroll to purchase form on IDO opening (form might be below fold on mobile)
Design System and Design Tokens
For launchpad with multiple projects important—design system letting each project have own colors/fonts without rewriting components:
// Themeable component via CSS custom properties
const IDOCard = styled.div<{ theme: ProjectTheme }>`
--accent-color: ${p => p.theme.accentColor};
--background: ${p => p.theme.cardBackground};
background: var(--background);
border: 1px solid var(--accent-color);
`;
IDO states should have consistent color coding: UPCOMING (neutral), LIVE (green/accent), ENDED (gray), FILLED (gold). Helps quickly orient when scrolling project list.
Launchpad UX—designing for stress and rush. User hurried, connection unstable, interface competes with dozens of tabs. Design task—remove all barriers between buying intention and confirmed transaction.