Просто о сложном: дизайн криптосайта Copilot

На связи дизайн-студия Odo, и недавно мы сделали дизайн для своего первого криптопроекта. Безумно хотим этим поделиться, не задушив вас терминами и локальной лексикой. Поэтому сегодня рассказываем о крипте понятно и легко, чтобы вы нас поняли.

Кстати, мы поработали уже над 5 саб-продуктами от Copilot, а значит готовьтесь к сериалу — у нас точно будет продолжение.

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

Sybil — мультиаккер или человек, создающий много аккаунтов с целью получить airdrop.

Copilot — продукт для фарма airdrop, который сохраняет большое количество времени фарминга, сильно уменьшает вероятность невыдачи airdrop'а и снижает риск идентификации как sybil.

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

Стейкдропы, хардфорки, баунти — погружение в проект было плотным и стремительным, за что отдельное спасибо команде Copilot. Мы изучили особенности продукта, портреты клиентов и конкурентов, чтобы отстроиться от других airdrop-площадок и правильно раскрыть суть сервиса опытным майнерам.

Для знакомства с ними лицом к лицу мы прописали Job Stories (JS). То есть вероятные ситуации, в которые могут попасть пользователи, их мотивы, желания и образ наилучшего результата. К слову, это фундамент любого хорошего сайта. Ведь данные диктуют все: как подсветить информацию, что убрать или добавить, на чём сделать акцент, чтобы достучаться до пользователя, снизить количество сомнений и вопросов относительно продукта.

JS-анализ красной нитью связывает смыслы, структуру и дизайн, помогая нам создавать то, что действительно нужно людям.

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

Эту пошаговую инструкцию по пользованию платформой нам нужно было показать пользователям.

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

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

В новой странице буквально сквозило мета-сообщение: «всё быстро и понятно».

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

Команда Copilot нас еще раз убедили: от заинтересованности выигрывают все. И мы, с ювелирной точностью закрывая бизнес-задачу, и пользователи, пользуясь классным продуктом, и сам клиент, радостно смотря на новый сайт.

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

Ps: ультраспасибо и суперлайк за позитивный фидбек, юмор в процессе работы и созвонов.

Сайт планировали не под CMS, в команде клиента были разработчики, знающие продукт от и до, поэтому вёрстка осталась на их стороне. В нашу зону ответственности входила грамотная передача проекта, поэтому мы сделали следующее:

1. Cоздали UI-киты со всеми стилями и причесали компоненты. Собрали всё необходимое: цвета, типографика, главные и второстепенные кнопки, чекбоксы, табы, дропдауны, меню, прогрессбары, сетки и другие элементы — наша зона ответственности, и мы уважительно относимся ко времени разработчиков, потому что сами знаем, сколько времени уходит на поиск необходимых значений.

2. Создали адаптивы сайта под 4 разрешения: desktop (1440 px), tablet (1024 px), tablet (770 px), mobile (375 px), чтобы не резать возможный процент посетителей с мобильных устройств.

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

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

5. Сопровождали от и до. Отвечали на возникающие по ходу верстки вопросы, оперативно присылали скрины и подробности.

С Copilot для нас началось становление в новой нише — крипто-проектах.

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

А пока смотрите полный кейс на Behance и оставайтесь с нами на связи в Telegram-канале Odo.