NFT-маркетплейс, где игрок торгует так же легко, как играет

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

MON's задумывался как главный инструмент торговли между игроками и витрина для всей экосистемы: лутбоксы, коллекции, аналитика рынка и обучение новичков.

Отвечал за продукт целиком: структуру, сценарии, дизайн-систему и качество того, что уходит в релиз.

• Исследование. Бенчмаркинг 10+ маркетплейсов и выбор паттернов, к которым привыкла аудитория
• Архитектура. Маркетплейс, личный кабинет, административная панель и лендинг
• Дизайн-система. UI-кит на автолейаутах, светлая и тёмная темы
• Арт-направление. Работа с 2D- и 3D-художниками над персонажами и элементами
• Качество. Аудит вёрстки после каждой итерации фронтенда

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

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

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

Главный вывод: аудитория уже привыкла к определённой структуре. Поэтому верхний уровень навигации построил на знакомых разделах — Explore, Marketplace, Create, Resources. Отличаться решили не структурой, а подачей: игровым визуалом, геймификацией и заботой о новичках.

Сложность мультичейна не должна ложиться на пользователя. Он всегда должен понимать, в какой сети находится и в чём цена.

• Переключатель сети в шапке. Текущий блокчейн виден на любой странице и меняется в одно действие
• Цена в родной валюте сети. Карточки показывают цену сразу в нужном токене, без пересчётов в голове
• Подключение кошелька — главное действие. Кнопка Connect выделена цветом и всегда на виду

Чтобы человек доверял площадке, он должен видеть, что рынок живой.

Спроектировал разделы Rankings и Metrics: графики объёма торгов и числа транзакций за выбранный период, подсказки с точными значениями на графике. Трейдер оценивает рынок за секунды, а новичок видит, что здесь действительно торгуют.

Торговля должна ощущаться как продолжение игры, а не как биржа.

• Лутбоксы. Подборка Top lootboxes с фильтром по периоду превращает покупку в событие
• Арт вместе с художниками. С 2D- и 3D-художниками создавали персонажей, кристаллы, монеты и карты, которые живут и в играх, и на площадке
• Уникальные механики. Ещё несколько игровых фич держим в секрете до релиза

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

• Карусели. Статьи и коллекции листаются свайпом — на экране помещается больше, а страница не растягивается
• Фильтры в списках. Период и сеть для рейтинга выбираются выпадающими списками прямо над ним
• Поиск и фильтры каталога. Строка поиска и кнопка фильтров вместо боковой панели
• Футер-аккордеон. Разделы сайта свёрнуты и не заставляют долго скроллить

9:41

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

• Экосистема. Лутбоксы, маркетплейс и игровой движок — три карточки вместо длинного текста
• Mon.Land. Лента персонажей показывает мир игры, а не абстрактный «метаверс»
• $MON для инвесторов. Три выгоды токена по шагам и прозрачная токеномика в цифрах
• Роадмап. Четыре этапа от NFT до Mon.Land — видно, куда движется продукт

180+ страниц невозможно держать в одном стиле без системы.

Хороший макет ничего не стоит, если в продакшене он выглядит иначе.

1. Аудит после каждой итерации фронтенда. Замеры, скриншоты и описания расхождений
2. Детальный user flow. Разработка видит, как экраны связаны между собой
3. Закрытая бета. Тестируем с реальными игроками
4. Telegram-чаты сообщества. Обратная связь напрямую попадает в бэклог

За год продукт прошёл путь от идеи до закрытой беты.

Дальше: завершение беты, постепенное открытие функций и новые фичи по обратной связи сообщества.

• В Web3 главный враг — страх. Понятная сеть, цена и кнопка подключения важнее любой анимации
• Знакомая структура — фундамент, а отличие — в подаче. Игроков удерживают визуал и механики, а не новая навигация
• Дизайн-система окупается на объёме. Без неё 180+ страниц в двух темах разъехались бы за месяц