Как мы сделали простой и понятный интерфейс для сложного криптовалютного проекта. Кейс лаунчпада BoostPad

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

У каждого стартапа в сфере криптовалют свой подход, единых стандартов пока не существует. Поэтому сейчас 9 из 10 проектов на этом рынке слишком сложны и запутаны.

В этом и кроется вызов для дизайнеров и разработчиков криптовалютных проектов — сделать простыми и понятными сложные вещи. Здесь нужно не просто умение создавать интерфейсы, но и глубокое понимание технологии, чтобы превратить сложные концепции в удобные и понятные инструменты. Это намного сложнее, чем сделать очередной интернет магазин или промо-сайт, но зато открывается огромный простор для творчества. Мы применили дизайнерский и продуктовый опыт, чтобы создать удобный и функциональный интерфейс для сложного криптопроекта — лаунчпада BoostPad.

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

Стартапам BoostPad предоставляет инфраструктуру для привлечения средств, управление токенами, маркетинговую поддержку и аудит.

Инвесторам он дает доступ к проектам, проверенным аналитиками на безопасность и перспективность, и возможность приобрести токены на выгодных условиях до их листинга на крупных биржах.

Как правило, лаунчпады являются частью более крупных проектов, из-за чего часто теряются на фоне остальных продуктов. Отличие именно этого проекта в том, что мы создали отдельную платформу, без лишних наворотов. Сфокусировались только на лаунчпаде. Мы поставили цель решить одну конкретную задачу одним продуктом - этого пока не хватает на рынке криптовалют. Кроме того, мы стремились сделать его настолько интуитивно понятным, чтобы даже неподготовленный пользователь мог проанализировать проект и принять участие в лаунчпаде.

Нашей задачей было провести полное исследование рынка подобных проектов и очень быстро сделать первую версию лаунчпада.

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

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

Весь путь пользователя разбит на пять этапов, каждый из которых отражается на таймлайне:

1. Скоро в продаже (upcoming) — этап, когда проект анонсирован, но покупка токенов еще не началась

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

2. Покупка токенов (swap) — активная стадия продажи, когда можно приобрести токены проекта.

3. Продажа завершена (filled) — этап, когда все токены распроданы, и покупка больше невозможна.

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

5. Проект закрыт (ended) — финальная стадия, указывающая на завершение всех обязательств по проекту.

Главная сложность заключалась в работе над информационной структурой и смыслом. Разработка смысловой структуры в таком проекте требует баланса: важно донести сложные концепции и функционал, не перегружая интерфейс и сохраняя внимание пользователя на ключевых шагах.

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

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

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

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

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

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

Если вам интересны дизайн-системы, пишите в комментариях — сделаем отдельную публикацию на эту тему.

Задача была полностью выполнена. В итоге мы создали продукт, который интуитивно понятен, прост в использовании, удобен в разработке и легок в поддержке. И заказчик оценил:

Мы превращаем сложные интерфейсы в понятные и удобные. Работаем с разными нишами и продуктами, включая такие сложные, как криптопроекты (в частности, dApps, staking, GameFi, blockchain, wallets) и web3. Если вам нужно решение, которое будет простым, интуитивным и современным, обращайтесь — будем рады сотрудничеству! Пишите на почту или нашему менеджеру в Telegram — и мы свяжемся с вами в течение рабочего дня.