Розробка UX/UI дизайну launchpad

Розроблення UX/UI дизайну launchpad

Launchpad — це продукт з кількома аудиторіями одночасно: проекти, які запускаються; інвестори, які беруть участь; liquidity providers, які стейкають ради tierу. Кожна група має свою user journey, свої завдання та свою біль. Якщо дизайн намагається обслужити всіх з одного екрана — він не обслужує нікого.

Крім того, launchpad працює в умовах екстремального часового тиску: IDO відкривається в 15:00 UTC, за 5 хвилин до — сторінка не грузиться, кнопка не реагує, MetaMask завис. Це не edge case — це гарантований сценарій при нормальному трафіку. UX повинен проектуватися з урахуванням цього.

Структура користувацьких потоків

Investor journey

Основний потік інвестора складається з кількох етапів, кожен з яких повинен мати чіткий UI state:

1. Discovery — сторінка проекту. Тут інвестор приймає рішення про участь. Критично важливо: соціальні сигнали (розмір раунду, кількість учасників, backing), технічні параметри (vesting schedule, token distribution), часові маркери (коли відкривається, скільки залишилось).

2. Eligibility check — до реєстрації користувач повинен бачити, може ли він брати участь: підключений кошелек, пройдений KYC, tier відповідає. Це повинно бути перевірено заздалегідь, не в момент клику "Buy".

3. Registration / Whitelist — якщо реєстрація потрібна до IDO, окремий крок з явним підтвердженням. Countdown до закриття реєстрації.

4. Purchase — найкритичніший екран. Простота важливіше за красу: поле вводу суми, показ аллокації, кнопка approve → buy. Жодних зайвих елементів. Стани: idle → approving USDC → confirming purchase → success / error.

5. Post-purchase — скільки токенів куплено, vesting schedule, коли перший claim, посилання на документацію.

Staker journey (tier system)

Окремий flow для користувачів, які стейкають платформенний токен ради tier:

• Dashboard поточного тиру та прогрес до наступного
• Калькулятор: "застейкаю X токенів на Y днів → отримаю tier Z → аллокація $W"
• Історія стейкингу, час до unlock

Project launcher journey

Форма для подачі проекту, dashboard для моніторингу IDO в реальному часі (учасники, зібрано, tier breakdown). Це admin-like інтерфейс, але він частина launchpad продукту.

Ключові UI компоненти

Countdown та time pressure

Таймер зворотного відлічування — один з найбільш психологічно навантажених елементів. Кілька правил:

• Синхронізувати з blockchain timestamp, не з клієнтським часом
• При < 5 хвилин — збільшити візуальний вага, додати urgency індикатор
• Коли IDO відкривається — плавний перехід без перезавантаження сторінки (WebSocket або polling з інтервалом 3-5 сек)
• При завершенні — негайний feedback, не чекати наступного RPC запиту

Transaction status flow

Транзакції в EVM проходять кілька стадій, користувач повинен бачити кожну:

[Очікування підпису в кошельку]
       ↓
[Транзакція відправлена: 0x1234...]
       ↓
[Підтвердження 1/3]
       ↓
[Успішно] або [Помилка: <human-readable причина>]

Показуємо помилки зрозуміло: не execution reverted, а «Ваша аллокація вичерпана» або «Період покупки закінчився». Це потребує маппінгу revert reasons на UI повідомлення.

Wallet connect та network switching

Multi-wallet support — обов'язковий: MetaMask, WalletConnect v2, Coinbase Wallet, Safe. При підключенню до неправильної мережі — негайний prompt на переключення, не просто помилка.

// Хук для управління мережевим станом
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

Інвестор повинен бачити свою аллокацію в кількох форматах одночасно:

Стани та loading UX

Launchpad працює з кількома асинхронними джерелами даних: RPC для on-chain стану, backend API для off-chain даних (KYC статус, tier), ціновий оракул. Кожен може бути повільним або недоступним.

Правила роботи з loading states:

• Skeleton screens замість spinners для контентних блоків — користувач бачить структуру сторінки, поки грузяться дані
• Stale data з індикатором — краще показати дані 30-секундної давності з позначкою, ніж пусту сторінку
• Optimistic updates для purchase — показувати "Успішно" одразу після confirmation, не чекати індексацію subgraph
• Retry логіка з exponential backoff для RPC запитів, без сповіщення користувача

Мобільна адаптація

Значна частина аудиторії launchpad — мобільні користувачи через WalletConnect. Специфіка:

• Deep link для відкриття кошельку при підтвердженні транзакції
• Touch targets — мінімум 44px для інтерактивних елементів
• Клавіатура при вводі суми — цифрова, не стандартна (тип inputmode="decimal")
• Scroll до форми покупки при відкритті IDO (на мобільному форма може бути за fold)

Design system та дизайн токени

Для launchpad з кількома проектами важливо — система дизайну, яка дозволяє кожному проекту мати свої кольори/шрифти без переписування компонентів:

// Themeable компонент через 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 повинні мати консистентну кольорову кодування: UPCOMING (нейтральний), LIVE (зелений/акцентний), ENDED (сірий), FILLED (золотий). Це допомагає швидко орієнтуватися при скролі списку проектів.

UX launchpad — це проектування для стресу та спішки. Користувач тиснеться, зв'язок нестабільний, інтерфейс конкурує з десятками вкладок. Завдання дизайну — убрати всі бар'єри між намірою купити та підтвердженою транзакцією.