Как объяснить on-chain репутацию без крипто-жаргона
Nomis рассчитывает репутацию кошелька в разных сетях и использует её в программах партнёров. Я сделал механику понятной ещё до того, как человек погружается в детали web3.
Nomisnomis.cc
Контекст
В продукте уже были скор, награды и партнёрские активности. Их нужно было представить не набором отдельных функций, а связанной системой: пользователь видит свой статус, понимает его ценность и находит следующий шаг.
Задача
Главный барьер — абстрактность on-chain данных. Пользователь должен за несколько секунд ответить себе: что показывает скор, почему он важен и как использовать его в кампании.
Моя роль
Вёл дизайн продукта и бренда. Придумал, как показывать скор кошелька, сделал сайт, личный кабинет, лендинги кампаний и Telegram mini apps, а ещё брендбук, персонажей коллекции и креативы для соцсетей.
Результат
Единый продуктовый язык
Собрал общую логику и визуальный язык для сайта, лендингов, кампаний и Telegram mini apps.
1. С чего начинал
- Скор кошелька считается из on-chain данных и сам по себе абстрактен. Человеку нужно за несколько секунд понять, много это или мало.
- Скор, награды и партнёрские кампании легко принять за три отдельные функции, хотя это один путь: увидел статус, понял его ценность, нашёл следующий шаг.
- Продукт живёт на сайте, в кабинете, в Telegram и в соцсетях, у каждой сети и партнёра свой цвет и логотип. Всё это должно узнаваться как один Nomis.
2. Кольцо скора
Главный элемент — кольцо с числом внутри. Дуга показывает, насколько заполнен скор, цвет меняется от красного к зелёному вместе со значением, и оценка читается раньше, чем человек разберётся в методике. В блоке очков те же кольца идут в ряд по сетям (Multichain, zkSync, LayerZero), над ними общая сумма очков и кнопка «Show All».
3. Веб-кабинет
Слева боковое меню с профилем, уровнем и раскрывающимся списком скоров по сетям, в центре вкладки «Tokens», «Transfers» и «Stats». Правую колонку отдал карточке репутации: текущий скор, его изменение, среднее значение и кнопка «Mint My Score». Сразу под ней поставил блок ScoreFront с карточками кампаний и меткой «Live», так что от своей цифры человек переходит к тому, где она пригодится.
4. Перенёс ту же логику в телефон и Telegram
Главный экран мобильной версии повторяет кабинет, сверху вниз идут сумма очков, ряд колец по сетям и карточки кампаний ScoreFront с фильтром. В mini app сверху закреплена строка с аватаром, балансом очков, наградами, кошельком и местом в рейтинге, она остаётся на всех экранах. У достижений в блоке «Daily Streak» три состояния: закрыто на замок, можно забрать по кнопке «Claim», уже получено.
5. Знак, партнёрские карточки и персонажи
Знак Nomis стоит в шапке сайта, в мобильном приложении и в центре таб-бара mini app. Для партнёрских карточек репутации сделал общий каркас из надстрочника, заголовка «Unlock your Reputation with…», знака Nomis внизу и объёмного логотипа партнёра справа. Цвет и фактура остаются за партнёром, поэтому Hemi медный, Abstract зелёный, а у Zora небо и клавиши. Персонажи коллекции нарисованы в одной манере, это зелёные герои с вытянутой шеей, которые отличаются одеждой, очками и мимикой.
6. Сложности и решения
Сложность
Человеку без опыта в web3 число скора ничего не говорит. Непонятно, хороший это результат или слабый.
Решение
Дал цифре три подсказки. Дуга кольца показывает заполненность, цвет показывает уровень, а в таблицах уровень ещё и подписан словом. Рядом со скором всегда есть действие, выпустить скор или открыть кампанию.
Сложность
У кошелька отдельные оценки по сетям. Если показать все сразу, экран превращается в таблицу.
Решение
Мультичейн-скор сделал главным, он стоит первым в ряду и подсвечен. Остальные сети идут за ним одинаковыми кольцами со значком сети. Полный список открывается по «Show All», а в веб-кабинете убран в раскрывающийся пункт меню.
7. Продуктовые метрики
Каждое решение привязано к показателю: что на него работает и по чему это видно в аналитике.
Доля кошельков, которые переходят от скора к кампании
- Что на это работает
- Карточки кампаний ScoreFront стоят сразу под карточкой репутации — от своей цифры человек видит, где она пригодится.
- Что смотреть в аналитике
- Воронка: просмотр скора → открытие кампании → участие.
Конверсия в выпуск скора
- Что на это работает
- Кнопка «Mint My Score» находится в карточке репутации, рядом с самой цифрой и её уровнем.
- Что смотреть в аналитике
- Доля подключивших кошелёк, которые выпустили скор.
Возвращаемость в mini app
- Что на это работает
- Блок Daily Streak с тремя состояниями достижения и строка с балансом очков, закреплённая на всех экранах.
- Что смотреть в аналитике
- Удержание на 1-й, 7-й и 30-й день, средняя длина серии.
8. Что получилось
- Сайт, личный кабинет, мобильные экраны, Telegram mini apps и креативы для соцсетей сделаны на одном визуальном языке. Общие у них знак, градиенты, кольцо скора и персонажи.
- Скор, статус и награда стоят рядом на каждой поверхности, от виджета до кабинета.
- Продукт, для которого я делал дизайн, работает в 50+ сетях. Скор посчитан для 1.3M+ кошельков, в наградах распределено $8.6M+.
Чем пришлось пожертвовать
Все сети можно было показать одной таблицей. Так точнее и привычнее тем, кто давно в web3. Я оставил ряд колец с одним главным скором: новичку так понятнее с первого взгляда, но опытному пользователю нужен лишний шаг, чтобы открыть полный список через «Show All».
Что вынес
Когда рядом с цифрой стоят её уровень и следующее действие, человеку не нужно знать, как она считается.