Zerion Navigation

Обзор

Редизайн навигации был одной из самых влиятельных дизайн-инициатив, направленной на переход к трейдинг-ориентированной архитектуре. Предыдущая концепция навигации следовала принципу "Browse First, Finance Second,", фокусируясь в основном на отслеживании портфеля и удобству работы с DApps. Однако, когда мы перешли в Zerion перешли к модели Trading‑First — приоритизируя транзакции, торговлю и активное участие пользователей, то стало очевидно, что старая навигация требовала полного переосмысления.

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

Постановка проблемы

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

Пользователи не видели верхние вкладки, такие как Watchlist и Explore.
Переключение между контекстами Browser и Portfolio было запутанным.
Кнопка Home была неясной — пользователи нажимали на неё, и ничего не происходило.
Баннеры и виджеты не способствовали достижению основных бизнес-целей (Fee‑Generating Volume).
Настройки были скрыты и их было трудно найти.
Поиск не был доступен во всех контекстах.
Нижняя панель была слишком большой и тратила пространство.
Центральная CTA кнопка страдала от баннерной слепоты — пользователи игнорировали её.
Запутанно для новичков — новые пользователи не знали, с чего начать, что означает каждая секция или как совершить первую сделку.

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

Цели

Глубоко понимая болевые точки пользователей и анализируя данные, мы определили следующие цели:

1

Усилить переход Zerion к Trading-First UX, сделав транзакции и торговые действия центральными

2

Создать единую архитектуру навигации, согласованную на всех платформах

3

Уменьшить трение для частых и повседневных действий пользователей

4

Повысить обнаруживаемость новых и социальных функций (Feed, Explore, Loyalty и т.д.)

5

Обеспечить масштабируемость для будущих функций, без UX-долга

6

Сделать Zerion намного более удобным и интуитивным для новых трейдеров

Исследования и инсайты

Наше исследование включало три слоя:

Внутренняя аналитика

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

Конкурентный анализ

Мы изучили паттерны навигации ведущих Web3 и FinTech продуктов, чтобы выявить знакомые ментальные модели. Самый сильный инсайт: пользователи думают чаще о контекстах, затем о действиях — они сначала выбирают с чем взаимодействовать и уже затем определяют что хотят сделать.

Гипотезы

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

Процесс дизайна

Информационная архитектура

Определены 5 основных контекстов: Home, Following, Swap, Rewards, Explore.
Сопоставлены все функции по намерениям (Проверка балансов, Инициация действий, Доступ к наградам, Исследование новых активов и так далее).
Каждая вкладка представляла одно четкое действие для предотвращения двусмысленности или перекрывающихся значений.
Решена проблема переключения кошельков и видимости контекста аккаунта (например, "From Portfolio → To dApp").

Прототипирование и тестирование

Создан единый прототип и валидирован в трех фазах:

Приватный пилот — для валидации сценариев и раннего выявления критических проблем.
Внутренний (среди сотрудников) — для сбора более широкой обратной связи и уточнения текстов, User Flows и иконографии.
Внешний (две волны) — сначала с нашим комьюнити существующих пользователей, затем публичная волна, включая людей, которые не использовали Zerion до этого ни разу.

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

Юзабилити-тест

Мы провели немодерируемый юзабилити-тест с 200+ пользователями для проверки ясности навигации и успешности задач. Участники выполняли задачи, такие как поиск Bridge, переключение между Wallet ↔ dApp, поиск Settings и доступ к программе Loyalty.

Ключевые результаты:

100% успешность для целевых задач и ключевых функций.
99% успешность в поиске ассетов и балансов.
83% предпочли новую навигацию старой версии.
Средняя оценка: 6.5/7

Качественная обратная связь подтвердила лучшее понимание потоков и более легкое ментальное сопоставление между контекстами.

UI и интеграция системы

Протестирована и доработана система иконок, улучшены контраст и дифференциация между выбранными и неактивными состояниями.
Соблюдены принципы адаптации, чтобы навигация ощущалась нативной на каждой платформе: iOS следует обновленным Apple Human Interface Guidelines, Android использует принципы Material, а версия Extension адаптирует свои элементы к специфическому для браузера контексту и функциональности.
Релиз обновления был прогрессивным по проценту пользователей, постепенно увеличивая охват (например, 10% → 30% → 100%) для мониторинга стабильности и обратной связи.
Подготовлено несколько A/B тестов — например, два варианта CTA на странице Asset — для валидации того, что пользователи замечают ключевые действия и понимают контекст.

Уроки

Парадигмы навигации
Навигация может быть спроектирована через подходы action‑first, context‑first (реже гибридный подход). Ключевой урок — понимать, когда каждый паттерн подходит ментальной модели пользователей и применять их намеренно, а не единообразно.

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

Данные и тестирование как драйверы редизайна
Непрерывные исследования, внутренние пилоты и тестирование сообщества стали главным двигателем этого знакового редизайна. В отличие от более ранней модели Browse‑First, которая не имела тестирования, эта итерация была сформирована и валидирована через измеримую обратную связь пользователей.

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

Техническое согласование на раннем этапе
Даже небольшие навигационные корректировки могут иметь серьезные последствия для реализации. Ранняя синхронизация с разработчиками предотвращает дорогостоящую переработку и обеспечивает плавную доставку на разных платформах.

"Проектирование навигации было не просто перемещением вкладок — это было о формировании того, как люди распознают Zerion как кошелек."

Кейс Zerion Navigation