Назад

BoostPadКак мы разрабатывали интерфейс для криптолаунчпада

Дизайн-система для криптолаунчпада с минимальным набором гибких компонентов

О проекте

Бренд
BoostPad
Индустрия
Web3, Launchpad, Криптовалюты и блокчейн (Crypto & Blockchain)
Релиз
2024
О проекте
Крипта — мир финансовых инструментов будущего. У каждого стартапа в сфере криптовалют свой подход, единых стандартов пока не существует. Поэтому сейчас 9 из 10 проектов на этом рынке слишком сложны и запутаны. Мы применили весь свой дизайнерский и продуктовый опыт, чтобы создать понятный, удобный и функциональный интерфейс для сложного криптопроекта — лаунчпада BoostPad.
Задачи
  • Провести полное исследование рынка подобных проектов и очень быстро сделать первую версию лаунчпада.
  • Сделать лаунчпад криптовым, технологичным, современным, ярким.
  • Спроектировать процесс покупки и получения токенов таким образом, чтобы сделать его простым и понятным для всех категорий пользователей.
Решение
Как правило, лаунчпады являются частью более крупных проектов, из-за чего часто теряются на фоне остальных продуктов. Отличие именно этого проекта в том, что мы создали отдельную платформу, без лишних наворотов. Сфокусировались только на лаунчпаде. Мы поставили цель решить одну конкретную задачу одним продуктом - этого пока не хватает на рынке криптовалют. Кроме того, мы стремились сделать его настолько интуитивно понятным, чтобы даже неподготовленный пользователь мог проанализировать проект и принять участие в лаунчпаде. И у нас это получилось!

Целевая аудитория BoostPad: UX-решения для частных инвесторов и стартапов

Создан для двух основных сегментов на рынке криптовалют

Стартапам BoostPad предоставляет инфраструктуру для привлечения средств, управление токенами, маркетинговую поддержку и аудит.
Инвесторам он дает доступ к проектам, проверенным аналитиками на безопасность и перспективность, и возможность приобрести токены на выгодных условиях до их листинга на крупных биржах.
Таймлайн с этапами покупки токенов и статусами пользователей

Визуальный стиль. UX/UI дизайн

Основное требование к стилистике лаунчпада — сделать его криптовым, технологичным, современным, ярким. Изначально мы планировали акцентировать внимание на 3D-объектах, но затем отказались от этой идеи, чтобы сосредоточить пользователей на функционале интерфейса. Для визуала использовали минималистичные 2d иллюстрации и градиенты.
Этапы продажи токенов с условиями для разных уровней пользователей

Функциональные возможности лаунчпада

Таймлайн

К функционалу предъявлялись свои требования. В первую очередь, необходимо было сделать процесс покупки и получения токенов простым и понятным для пользователя. И отразить все шаги, которые проходит пользователь, на таймлайне.
Там же, на таймлайне, видно, на каком шаге сейчас находится пользователь, и что (а главное — когда) будет следующим шагом. В будущем таймлайн позволит менять и настраивать уникальные шаги для проектов. Например, можно будет разбить каждый этап на несколько раундов.
Главный экран лаунчпада с ключевыми функциями и навигацией

Этапы пользовательского пути в BoostPad

1. Скоро в продаже (upcoming)

Этап, когда проект анонсирован, но покупка токенов еще не началась. Дополнительным шагом на этом этапе выступает выполнение требований регуляторов — прохождение KYC, процесса верификации пользователей по их документам.

3. Продажа завершена (filled)

Этап, когда все токены распроданы, и покупка больше невозможна.
2D-иллюстрации и градиенты в дизайне интерфейса криптолаунчпада

4. Токены доступны (claimable)

Этап, на котором можно начать получать свои токены и переводить их на личный кошелек. При этом обычно не все токены доступны сразу, а выдаются проектом по частям, чтобы защитить рыночную цену токена от резких скачков. Для этого предусмотрен специальный календарь.

5. Проект закрыт (ended)

Финальная стадия, указывающая на завершение всех обязательств по проекту.

Основные сложности проекта

Главная сложность заключалась в работе над информационной структурой и смыслом. Разработка смысловой структуры в таком проекте требует баланса: важно донести сложные концепции и функционал, не перегружая интерфейс и сохраняя внимание пользователя на ключевых шагах. Интересной задачей было реализовать этап пользовательского пути — Swap. Во-первых, этот шаг проводится в разное время для участников с разными уровнями: чем выше уровень, тем раньше и больше токенов можно купить.
Эту информацию необходимо было четко и понятно донести пользователям. Во-вторых, сложность вызвала форма покупки. Нужно было спроектировать ее так, чтобы при наличии большого количества информации она оставалась визуально простой и всегда была перед глазами у пользователей. Для этого мы отделили зону действий от зоны расчетов.

Интересные детали и фишки проекта BoostPad

На каждом этапе мы добавили таймер, который показывает, сколько времени осталось до завершения текущего шага. Мы постарались сделать его супер заметным, чтобы пользователь не терялся. Это же касается и таймлайна, про который рассказывали выше

Дизайн-система BoostPad

Минимум компонентов, максимум гибкости

Мы создали компактную дизайн-систему, которая удобна для разработчиков. Она проста и быстра в управлении и поддержке, что важно для дальнейшего развития и масштабирования продукта. Мы свели количество компонентов к минимуму, но сделали их гибкими при сборке следующих экранов.
В основе всей дизайн-системы — переменные (variables) и компоненты, что очень удобно. Например, с помощью переменных достаточно сделать небольшое изменение размера шага сетки + кегль — и это повлияет сразу на все макеты. Так мы можем выбрать нужный масштаб всего интерфейса, на финальном этапе проработки дизайна. Так же это помогает быстрее делать адаптивные макеты.