Редизайн мобильной навигации
Как новая навигация повысила проникновение в категории и метрики активации
Overgear — ecommerce платформа для геймеров из США и Европы, где геймеры покупают и продают внутриигровые услуги и валюты
Задача
Сделать редизайн мобильной навигации, отойти от десктоп-ферст подхода
Бизнес-ценность
Выход на рынок мобильных RPG игр, повышение количества мобильных пользователей и метрик активации
Аудитория
Пользователи мобильных RPG, MMORPG и шутеров из США, Европы и Канады
Критерии успеха
Приблизиться в мобильных метриках: проникновение в категории, CR в продукт к десктоп показателям
Проблемы навигации
Большинство новых пользователей попадают в игру, но больше 70% не доходят до страницы продукта
Игра
Категория
🚩 Листинг длинный,
нет фильтрации
🚩 Попадая сюда новые пользователи видят 3 категории и листинг всех продуктов по игре
🚩 Слишком большие карточки
🚩 Спрятаны точки входа на навигацию
Моя роль
01
Уточнение бизнес‑целей с продакт‑менеджером и стейкхолдерами
02
Планирование и проведение исследований (12 интервью, Hotjar‑анализ, сегментация)
03
Проектирование Lo‑Fi и Hi‑Fi прототипов с учётом edge‑кейсов и анимаций
04
Формирование гипотез (бенчмаркинг, точки роста)
05
Проведение UX‑тестов и A/B‑тестов, анализ результатов
06
Взаимодействие с разработкой и QA: спецификации, дизайн-ревью
Контекст
Аналитика
Пользователи не могут быстро найти нужную категорию или продукт в ленте, что приводит к оттоку.
В то время как на десктопе есть меню категорий и хедер и ими пользуется более больше 47% новых пользователей, для мобильных юзеров нет очевидного перехода в категории.
х$% уходят уже после первого клика
Исследование
Вместе с продактом я поговорила с 12 пользователями, которые в первый раз сделали покупку с мобильных устройств
💡 Инсайты
• Мотиваторы к покупке:
доверие и безопасность, большая продуктовая матрица, гибкие офферы
• Есть 2 типа пользователей: покупатели услуг и валют. Аудитория этих разделов не пересекается
Услуги — сложные, кастомизируемые офферы, пользователь настраивает их полностью под свои нужды. Покупка услуг сезонна, зависит от ивентов в играх и времени внутриигровых активностей.
Валюты — быстрая, импульсивная покупка, зависит от потребности пользователя в игре в конкретный момент, кроме названия валюты и ее количества пользователю нужно ничего настраивать.
Итерация 1
Навигация в игре и категории
Наша гипотеза заключалась в том, что пользователи не могут быстро найти нужную категорию или продукт в ленте, что приводит к оттоку и добавление категорий на страницу игры может повысить конверсию в просмотр категорий и, потенциально, страниц продуктов.
Гипотеза 1
Если добавим вкладки с категориями на страницу игры, пользователи смогут получать релевантную выдачу на странице, пользователь сможет быстро переключаться по категориям.
Гипотеза 2
Если добавим фильтры на страницу игры, пользователи смогут гибко настроить их и отфильтровать выдачу под свой запрос. Повысим CR в просмотр офферов.
Гипотеза 3
Если добавим карточки категорий на страницу игры, пользователи смогут проваливаться на категорию-тип услуги, за которым он пришел. Повысим проникновение в категории.
Гипотеза 4
Если добавим подборки на страницу игры, пользователи увидят самые популярные и выгодные предложения, компания получит промо-инструмент.
Релевантна, если пользователю нужен конкретный тип услуги
Сработает, если для пользователя частый сценарий-переключаться между категориями
Бенчмаркинг
Параллельно я провела ресерч решений конкурентов и продуктов в смежных доменах. Глобально, все дизайны делятся на два типа:
  1. Вкладки с категориями
  2. Классический каталог-разводящая
UX тесты
Я совместно с продактом провела серию UX тестов. Мы провалидировали гипотезы и остановились на трех из них: вкладки, подборки и карточки. Я подготовила прототипы для каждой и оценивала скорость прохождения флоу, смотрела, переключаются ли пользователи между разными категориями, скроллят ли экран и количество ошибок, которые возникают в процессе.
Дизайн
По результатам стало понятно, что пользователи чаще всего знают тип услуги, которую искали
При этом попадая на этот экран пользователи не идут в каталог или глобальный поиск. Мы сделали вывод что переход в другие категории-не самый частый сценарий и остановились на решении с карточками.
Сделали поиск контекстным
Провели A/B тест на новых мобильных пользователях
Когда пользователь в игре или категории, открываем поиск по игре
Результаты
Мы провели серию A/B‑тестов новой навигации в играх и категориях, постепенно раскатывая на всех пользователей. Отдельным треком был поиск, написала о нем тут.
%
Средняя конверсия по воронке игра-категория-продукт. Мы считаем это хорошим показателем, таким образом мы к десктопной конверсии.
в 4 раза
Выросла конверсия в просмотр категорий, таким образом она почти приблизилась к десктопным показателям, где есть меню категорий.
на 12%
Увеличили конверсию в покупку, продолжаем наблюдать т.к в услугах есть сезонность, но мы прогнозируем долгосрочный эффект от фичи у новых пользователей.
на 15%
Повысилось количество завершенных поисков (когда пользователи доводили процесс поиска до конца и переходили в продукт).
Итерация 2
Верхнеуровневая навигация
Навигация была устаревшей и не пользовалась популярностью у пользователей. Хедером в мобильной версии пользовалось в 3 раза меньше пользователей, чем на десктопе. Так же на юзабилити-тестированиях респонденты неоднократно упоминали неудобную навигацию.
Хедер в каталоге
Фиксированная навигация
🚩 Было
Дизайн
Мы переместили часть функционала хедера в bottom bar и убрали бургер-меню, что повысило конверсию в каталог у новых пользователей. Затем доработали верхнюю навигацию: зафиксировали заголовок при скролле и сделали поиск контекстным, показывая его только на нужных экранах.
✅ Стало
Итерация 3
Мобильные карточки продуктов
Карточки были перегружены, дублируя десктопный вид. Мы обновили их дизайн, потом провели ухудшающий A/B тестов, чтобы оценить влияние описания и кнопки на конверсию. Такого влияния не было и мы начали тестировать маленькие мобильные карточки без описания.
🎉 Карточка C показала более высокую конверсию в клик среди новых пользователей
🚩Было
✅ Вариант B
✅ Вариант C
Результаты
Проведя A/B‑тесты карточек, мы подтвердили гипотезу: упрощённый дизайн (вариант C) максимально соответствует ожиданиям мобильных пользователей.
в 2 раза
Увеличилась скорость прохождения флоу мобильной навигации. При этом пользователи не стали реже пользоваться поиском и каталогом.
%
Стала конверсия в просмотр категорий, это хороший показатель, даже выше, чем на десктопе у новых пользователей.
на 43%
Вырос CR в просмотр продукта. Конверсия в покупку так же выросла, в дальнейших изменениях мы целимся в десктопную конверсию в покупку.
заметили
Что раньше пользователи чаще скроллили страницу оффера в поисках цены. Теперь когда цена стала контрастнее, мы не видим такой глубины скролла в Hotjar.
Планы на будущее
Дизайн и интеграция глобального поиска
Пока не охвачена полноценная система поиска: пользователи по-прежнему тратят лишнее время на поиск конкретных товаров вне категорий.
Внедрение индивидуальных подборок
Отсутствует персонализация контента: все пользователи видят единый набор карточек, вне зависимости от их истории и предпочтений.