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

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

Launchpad — это продукт с несколькими аудиториями одновременно: проекты, которые запускаются; инвесторы, которые участвуют; liquidity providers, которые стейкают ради тира. У каждой группы своя user journey, свои задачи и своя боль. Если дизайн пытается обслужить всех с одного экрана — он не обслуживает никого.

Кроме того, launchpad работает в условиях экстремального временного давления: IDO открывается в 15:00 UTC, за 5 минут до — страница не грузится, кнопка не реагирует, MetaMask завис. Это не edge case — это гарантированный сценарий при нормальном трафике. UX должен проектироваться с учётом этого.

Структура пользовательских потоков

Investor journey

Основной flow инвестора состоит из нескольких этапов, каждый из которых должен иметь чёткий UI state:

1. Discovery — страница проекта. Здесь инвестор принимает решение об участии. Критически важно: социальные сигналы (размер раунда, количество участников, бэкеры), технические параметры (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 в реальном времени (участники, raised, 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 на переключение, не просто ошибка.

// Хук для управления network state
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 — это проектирование для стресса и спешки. Пользователь торопится, соединение нестабильное, интерфейс конкурирует с десятками вкладок. Задача дизайна — убрать все барьеры между намерением купить и подтверждённой транзакцией.