Платформа для продажи зеленых токенизированных активов
Задача - создать плафторму, где пользователи смогут продавать и обменивать свои активы. Платформа должна быть в игровой стилистике и отображать большое количество данных и аналитики.
Главная страница Web3Eco — это пример современного “game-inspired” UX:
Максимум действий на одной странице, наглядное распределение блоков, акцент на игровые эмоции и мгновенный отклик — всё это делает работу с платформой не только удобной, но и увлекательной.
Игровой эффект:
Страница выглядит как «центральный хаб» или лаунчер, где игрок выбирает миссию, а не просто как банальная платформа. Это вовлекает, мотивирует исследовать дальше и в целом облегчает процесс обучения интерфейсу даже новичку.
Простота взаимодействия
Максимум действий на одной странице, наглядное распределение блоков, акцент на игровые эмоции и мгновенный отклик — всё это делает работу с платформой не только удобной, но и увлекательной.
Игровой эффект:
Страница выглядит как «центральный хаб» или лаунчер, где игрок выбирает миссию, а не просто как банальная платформа. Это вовлекает, мотивирует исследовать дальше и в целом облегчает процесс обучения интерфейсу даже новичку.
Простота взаимодействия
- Все важные действия реализованы одной кнопкой; ничего лишнего, минимум кликов до результата.
- Фильтры покупки (с выбором размера участка) реализованы в виде «блистеров» — ощущается, будто выбираешь игровой предмет или перк.
- Вся информация по активам (доступность, юрисдикция, награды и прочее) подана таблицей иконок и лейблов — аналог игровых характеристик персонажа/предмета.
Дашборд
Структура и визуальная иерархия
Информация структурирована по блокам: Баланс, Фарминг, Активы — каждый секция отчётливо отделён, плюсом является используя цветовых акцентов и карточного размещения (игровой стиль).
Крупные цифры и жирные акценты делают основной показатель (баланс, доход) легко заметным на первый взгляд, что важно для пользователя, следящего за финансами.
Геймификация и мотивация
Информация структурирована по блокам: Баланс, Фарминг, Активы — каждый секция отчётливо отделён, плюсом является используя цветовых акцентов и карточного размещения (игровой стиль).
Крупные цифры и жирные акценты делают основной показатель (баланс, доход) легко заметным на первый взгляд, что важно для пользователя, следящего за финансами.
Геймификация и мотивация
- Элементы “уровней” и “поинтов”: все активы считываются не только как деньги, но и в очках (points), присутствуют карточки с “Farming points/day”, номера мест — это мотивирует собирать больше, напоминает таблицы достижений из игр.
- Визуализация роста: блоки с разным цветом фона для farming points визуально ощущаются “левелапами” (уровнями, ступенями).
Реферальная программа
Страница реферальной программы Web3Eco реализована визуально чисто, “игрово”, и функционально понятно. Всё разбито на смысловые блоки, информация подана максимально прозрачно, а мотивация работает через уровни и статистику. Благодаря таким решениям интерфейс не только увеличивает вероятность рекомендаций, но и доставляет удовольствие от самого процесса развития своей партнёрской сети.
- Чётко описанная структура линий (1–5) показывает масштаб потенциального заработка по уровням сети: логика и границы прозрачны.
- Количество людей и % от линии прописаны явно (геймификация + информативность)
- Динамическая лента с последними выплатами, аватарками, именами пользователей, купленными активами и суммой вознаграждения — интерфейс немного напоминает игровые “Lootbox history” или список ачивок.
- Указаны точные суммы, таймстемпы (“1 hour ago”) — создаётся ощущение активности платформы (“живой” продукт, сообщество дышит).
- Пагинация снизу делает управление историей удобным.
Профиль
Структурированность и логика
- Вся основная информация пользователя собрана в одном месте, визуально разделена на блоки по типу (личные данные, финансы, безопасность), что облегчает поиск и редактирование.
- Редактируемые поля (Display name, Telegram, Phone number) снабжены отдельными кнопками “Save” — это минимизирует случайные правки и повышает контроль пользователя.
- Основные реквизиты (Wallet, Email, Personal address) представлены отдельными интегрированными блоками с иконками-копированием, что облегчает быстрое взаимодействие.
- KYC статус – большой и выделенный зелёным надписью “Completed”, пользователь сразу видит связан ли профиль с верификацией и может контролировать доступность функций.
- Видимость настроек 2FA (двухфакторная аутентификация) и опция disconnect — быстрая работа с безопасностью, удобно и минимизирует риски.
- RSA-секции дают легко увидеть и управлять ключами: список, названия, опция подписать новый или скачать сразу все одним нажатием (“Download all”). Это удобно для продвинутых пользователей и повышает доверие к платформе.
Аналитика
Основная цель - дать пользователю быстрый обзор эффективности своих рефералов по основным метрикам, а также позволить управлять доступом и видеть статус активации.
Поиск и фильтрация
Поиск и фильтрация
- В верхней части — удобная строка поиска (по имени или email), что облегчает навигацию даже при большом количестве рефералов.
- Присутствуют фильтры по линиям, уровням, продажам — это повышает контроль и удобство анализа структуры.
- Referral (Имя и email): Чёткая идентификация партнёра, видно сразу кто приглашён.
- Line (Линия): Показывает принадлежность реферала к определённой “ветке”, облегчая анализ глубины структуры.
- Level up (%): Геймифицированный прогресс бар — отображает активность/прогресс реферала до повышения уровня, мотивирует следить за активностью связей.
- Number of personal sales: Прямой показатель эффективности приглашённого.
- Total personal sales: Сразу понятен вклад каждого реферала в общий оборот/выручку.
- Access: Статус (“Pending”/“More”) отображает, активирован ли партнёр или требуется действие.
- Кнопки “More” открывают подробности по конкретному участнику — это ускоряет анализ и даёт granular control.
- “Pending” выделено оранжевым, сразу акцентируя внимание на тех, кто ещё не активен.
- Внизу — удобная пагинация для быстрого просмотра больших списков.
Верификация
Минимум шагов, всё в одном экране:
Это ускоряет завершение процесса и делает его прозрачным.
Современный и доверительный визуал:
Оформление подчёркивает важность и серьёзность процедуры, внушает доверие пользователю.
Доступность:
Контрастные цвета, понятные подписи, логичная группировка — всё для удобства и быстрого восприятия.
Это ускоряет завершение процесса и делает его прозрачным.
Современный и доверительный визуал:
Оформление подчёркивает важность и серьёзность процедуры, внушает доверие пользователю.
Доступность:
Контрастные цвета, понятные подписи, логичная группировка — всё для удобства и быстрого восприятия.
Дизайн-система для мобильной, планшетной и десктопной версий
В рамках работы над проектом было создано три версии для разных экранов. Созданы сквозные компоненты кнопок и виджетов
