Проектирование CX–сценариев игрового продукта & UX/UI дизайн

Рассказали про процесс проектирования CJM, тестирование сценариев и создание нового пользовательского опыта для Polemica — крупнейшего онлайн–сервиса по игре в «мафию» с более чем 350 тысячами зрителей на площадке Twitch.

24 янв. 2022
СЕРВИСЫ
Кейс
Жанр «мафии» относится к сегменту интеллектуальных игр, который существует более 30 лет. По «мафии» проводятся профессиональные спортивные турниры под надзором федерации ФИИМ. Polemica дает возможность испытать себя в этом жанре, однако новым пользователям не всегда бывает просто разобраться в интерфейсе, понять правила игры и жесты соперников. Нашей задачей было помочь Polemica стать массовой игрой за счёт оптимизации пользовательского опыта, переработки интерфейса и построения стратегии масштабирования.

Задача

9
месяцев длительность проекта
В работе с клиентским опытом мы фокусировались на росте количества игроков, которые сыграли хотя бы одну игру — это критерий, что клиент прошел путь после регистрации, и смог испытать себя в новом жанре. Для этого нам пришлось заново собрать клиентский маршрут через качественные исследования и тестирования прототипов. Другие значимые показатели, которые отражали качество CX — индексы NPS и CSI. Чтобы усилить их рост, мы разработали новый интерфейс игровой комнаты и её мобильную версию.

Вторая группа метрик была связана с маркетингом и качеством обработки трафика. В процессе исследования мы увидели существенный потенциал в SEO-продвижении и предложили гипотезы для развития канала через контент-маркетинг. Для роста числа пользователей мы провели работу над конверсией сайта и предложили инструменты удержания зрителей трансляций через усиление продакшена.

Метрики проекта

Для формирования стратегии развития на ближайший год Polemica организовала недельный буткемп — офлайн-событие для команды, на котором руководители бизнес-юнитов выступали с гипотезами роста.
Мы приняли участие в буткемпе в роли кураторов страт. сессий и держателей CX/UX-экспертизы. По итогу мы собрали список из 15 главных гипотез, провели приоритезацию исходя из целей бизнеса.

Исходные гипотезы

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

Рекламные тесты

среднее значение CTR рекламного креатива
1.8
средний показатель CPC рекламного креатива
5
%
Самые успешные рекламные креативы Polemica
Запуск таргета показал, что аудитория охотно отзывается на знакомые ей фирменные слова из жанра «мафии». Неэффективными оказались призывы найти друзей через игру, развивать навыки коммуникации или круто проводить время. Так мы определили, что идею «мафии» не нужно дополнительно продавать клиенту, он сам понимает ценность игры, нужно только показать, что это существует в онлайне.

Больше всего нас впечатлили результаты посадочной страницы,
на которой мы добились рекордного значения конверсии 37% в регистрацию. Вернее, в нажатие на кнопку регистрации. Поскольку мы тестировали гипотезу быстро, промо-страница была собрана через no-code решение без модуля регистрации. Но как только стало понятно, что лендинг работает, встроили его на главный сайт.

средняя стоимость нажатия на кнопку «зарегистрироваться»
13
конверсия промо-страницы через связку с таргетом
37
%
Следующим шагом на пути к новому UX было проектирование клиентского маршрута и определение слабых точек интерфейса. Мы провели 46 качественных интервью с клиентами разной степени осведомленности: новыми пользователями, платящими клиентами и зрителями трансляций Polemica. Нам было важно определить различное видение продукта от новичков и профессиональных игроков.

Проектирование CJM

Polemica Customer Journey Map
Главная точка роста, которую мы выявили — донесение новым игрокам слэнга и правил. Многие зрители не пробовали себя в игре именно из-за тревоги и непонимания. При этом они регулярно просматривали трансляции и испытывали интерес к жанру.

Неотъемлемой составляющей продукта является необходимость включать камеру и звук, что вызывало дискомфорт у ряда пользователей. Polemica увидела эту точку роста, и в будущих обновлениях уже запланировала релиз с возможностью играть 3D-аватарами в отдельных лобби.
UX–прототипы интерфейса игры
После проведения качественных интервью и составления клиентского маршрута мы сформировали гипотезы улучшения UX и разработали прототипы для проведения повторного HADI-цикла. Главный вызов — адаптировать интерфейс профессиональных игроков под новичков и массовых пользователей, которые только знакомятся с жанром и не готовы тратить время на изучение функционала.

Мы провели повторную серию интервью с прохождением пользовательских сценариев — просили новых и действующих клиентов Polemica зарегистрироваться, найти лобби, и даже сыграть свою первую игру в новом интерфейсе. Так мы зафиксировали, что нужно доработать перед тем, как начать разработку дизайна.
В процессе разработки дизайна мы сформировали ряд правил оформления интерфейса, форм, таблиц, состояний элементов и запаковали всё в UI-кит, который легко масштабировать.
Элемент UI-кита интерфейса
Игровая комната — образующий экран в клиентском опыте, на котором пользователи проводят больше всего времени. Нашей задачей было сохранить лучшие решения интерфейса и упростить их для новичков.
Мы разработали новый дизайн нижней панели, а менее используемый функционал скрыли в боковом меню, куда также добавили быстрые подсказки с жестами и правилами. Так, чтобы новым игрокам стало проще ориентироваться в новом для себя мире.

Редизайн игровой комнаты

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

Игровая статистика

UI-элементы игровой статистики
Отдельными блоками мы выделили количество удалений в первую ночь и показатель точности лучшего хода. Последний отражает, как часто пользователь угадывает, кто за столом играет за «черную» карту.
UI-элементы игровой статистики
Для повышения показателя удержания Polemica разработала систему достижений, которые выдаются за выполнения опредленных условий игроками. Мы подхватили идею и предложили новый способ отображения ачивментов в виде карточек в профиле клиента.
Интерфейс достижений игроков
После сопровождения разработки в течение 3 месяцев Polemica сделала релиз новой версии интерфейса, и мы получили первую обратную связь от игроков. Пользователи заметили ряд позитивных изменений в UX, но намного больше обратили внимание на технические ошибки и баги, которые не были замечены на этапе QA.

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

Запуск интерфейса

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

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

Мобильная версия

Чтобы получить доступ к настройкам мы предлагаем пользователю перейти в раздел «ещё» в нижнем меню, где он сможет изменить звук, качество видео или включить режим трансляции.

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

Меню и навигация

Мы адаптировали интерфейс игровой статистики под мобильные устройства, чтобы даже на небольшом смартфоне данные хорошо считывались и выглядели компактно.
Быстрая доступность — один из ключевых приоритетов, на который мы опирались при UX-проектировании. В любой момент пользователь может перейти в личный кабинет и увидеть данные о прошедших играх.
Мы разработали уникальные элементы отображения внутриигровой валюты и способов пополнения баланса. Данные карточки легко адаптируются под планшетные и мобильные разрешения.
UI-элементы способов оплаты
С помощью внутриигровой валюты клиенты Polemica могут оплачивать участие в турнирах, приобретать доступ к закрытой лиге, а также записываться в обучающую академию для усиления своих навыков.
Если вам было интересно, сделайте ссылку на этот пост в своих социальных сетях — это поможет продвижению нашей компании.

Поделитесь публикацией

Мы используем файлы «cookie», с целью повышения удобства пользования веб-сайтом. «Cookie» представляют собой небольшие файлы, содержащие информацию о предыдущих посещениях веб-сайта. Если вы не хотите использовать файлы «cookie», измените настройки браузера.
ул. Мясницкая, 46с1
Офис, Москва
thats@artux.ru
ответим сегодня
© АО «Арт Юикс»
ИНН 9701171875