Привет, меня зовут Марта Цисарук, я Product Designer компании Enestech Software, части холдинга TECHIIA. Полгода назад мы провели полный редизайн одного из наших основных продуктов — . В процессе мы нашли все старые грабли, а также придумали, как подружить бизнес, который хочет заработать, и пользователей, которые хотят поменьше замечать интерфейс.
Ниже я расскажу, зачем понадобился редизайн, каким маршрутом мы шли и какие выводы сделали.
О продукте и том, как мы пришли к редизайну
В 2017 году наша компания запустила Senet — SaaS-решение для управления компьютерными клубами и кибераренами. Оно состоит из панели управления для владельцев и администраторов, а также интерфейса игрока, который геймеры видят сразу после запуска системы.
С помощью интерфейса геймера посетитель клуба оплачивает сессию, выбирает и запускает игру, узнает время до конца сессии и получает информацию об акциях, которые проводит клуб.
Фото: eSport Club SKiLL
При запуске мы были сосредоточены на B2B-части, так что первую версию интерфейса игрока делали на скорую руку. Опирались больше на свой пользовательский опыт и предложения управляющих клубами.
Senet стал успешным продуктом и вошел в шорт-листы лучших SaaS-решений. Админпанель позволяет контролировать загрузку и финансы клуба из любой точки мира. На старте продаж в 2017 году у нас было всего два клиента — сеть IT Land и одесский клуб SKiLL. Сегодня мы обслуживаем почти 2000 компьютерных клубов в 60+ странах мира.
Фото: блог Senet.Cloud
Когда у нас появилось так много клиентов, мы решили улучшить интерфейс игрока. К редизайну подтолкнула и пандемия: продукт добавил новую freemium-модель, но старый интерфейс игрока не позволял ее внедрить.
Весь процесс у нас уложился в 12 этапов. Их, как и выводы, можно применить к разным продуктам.
1. Определяем проблемные места старого интерфейса
Мы выделили в старом интерфейсе несколько главных точек для изменений.
- Сложная поддержка и масштабирование
Из-за скорости мы делали оболочку без дизайн-системы и стандартов. Каждый разработчик писал код по-своему, и со временем производить апгрейды интерфейса стало невозможно. Привести к стандартам старые элементы интерфейса было дольше, чем создать интерфейс с нуля.
- Несоответствие трендам развития мониторов
Создавая старый интерфейс, мы ориентировались на Украину и ближнее зарубежье и не учли, что на глобальном рынке клубы все больше и чаще используют мониторы с разрешением более 2560 пикселей. Это одна из фишек, завлекающих игроков — не каждый позволит себе крутой дисплей домой.
- Неудобство настройки
В зависимости от потребностей клубы могли менять в интерфейсе игрока только фон, логотип и тему интерфейса. Но не могли, например, вывести нужную им информацию для игрока на первый экран. В новой версии мы хотели добавить возможность собирать главную страницу как конструктор.
- Сложные и лишние элементы
Отзывы и аналитика показали, что не все части оболочки понятны геймерам. А некоторые функции, вроде оформления игровых каталогов, вообще не использовались.
2. Учитываем требования бизнеса
Senet работает по подписке. Клубы платят фиксированную стоимость за месяц пользования и выбранный функционал.
При масштабировании мы обнаружили, что в некоторых странах такая модель не сработает. Владельцы клубов принципиально не платили за лицензионный софт и предпочитали пусть ломаное и малофункциональное, но бесплатное ПО. Тем не менее, это рынки с огромными аудиториями клубов и игроков. Закрепиться на них было возможно, если предложить им Senet бесплатно, но с показом рекламы.
С другой стороны, клубы, которые пользовались платной версией, хотели размещать видеорекламу, баннеры и новости о клубных акциях. Это важная часть системы клубной монетизации.
Здесь-то и была проблема: встроить рекламу в старый интерфейс игрока было невозможно. Поэтому одной из задач редизайна было добавление рекламных мест.
Главная страница старой и новой Shell
3. Изучаем алгоритм поведения пользователей
Senet — это B2B-продукт. Однако пользуются им не только владельцы и администраторы клубов, но и геймеры. Значит, его можно позиционировать как B2B2C. В первом интерфейсе мы не учли фактор его удобства для игроков, а значит обязательно должны были исправить эту ошибку при редизайне.
Мы запланировали улучшить пользовательский опыт, интегрировать рекламу и контент от бизнеса так, чтобы не раздражать игроков. Иначе из-за слишком плотного потока лишней информации пользователь просто не найдет игру, за которой пришел в клуб.
Для решения этой задачи нужно было понять, как геймеры ведут себя во время посещения клубов. Мы поговорили с администраторами клубов в разных странах и по согласию пользователей провели ряд тестов.
В результате родились два важных вывода:
- Если геймер проводит в клубе пять часов, то в интерфейсе из них — всего минут восемь. Это лишь короткий шлюз для запуска игры из каталога. Есть еще локальные особенности. К примеру, в некоторых странах СНГ и Европы пользователь обязательно должен регистрироваться, указывая номер телефона. Таким образом время внутри интерфейса увеличивается еще на 2-3 минуты.
- Менеджмент клубов заинтересован удерживать игроков в интерфейсе подольше, чтобы они переходили по разным страницам, получали информацию о клубных предложениях, новостях и акционных пакетах.
Нам нужно было по крайней мере не увеличивать время, проведенное геймером в интерфейсе. Кроме того, нельзя помещать всю необходимую клубам информацию в одном месте. Если сделать интерфейс слишком сложным и перегруженным, увеличится вероятность того, что игрок не воспримет сообщения.
4. Проводим функциональный анализ
На следующем этапе нужно было понять, какие части продукта важны клиентам. К примеру, 65% клубов продают пакетное время и предлагают пакеты игроку на старте сессии. Для них этот функционал ключевой.
Страница каталога игр старой Shell
Обнаружилось и лишнее. В каталоге старого интерфейса у каждой игры была отдельная страница, на которой размещалось описание, скриншот, видео и дополнительная информация на разных языках. Такие страницы клубы должны были заполнять самостоятельно, мы предоставляли только названия и обложки игр.
При изучении каталогов клубов оказалось, что заполненных страниц было не более 20%. Но даже на них никто из игроков не заходил. Геймеры приходят поиграть в уже знакомую им игру, они знают ее описание. В новом интерфейсе этой опции нет, и о ней никто не вспоминает.
Страница каталога игр новой Shell
5. Проводим интерфейсный анализ
Далее мы анализировали, как именно пользователи взаимодействуют с интерфейсом и какие проблемы при этом возникают.
Стартовая страница продажи абонементов старой Shell
В 65% клубов при запуске компьютера появляется меню с предложением приобрести пакет игрового времени. Клубам интересно продавать время пакетом, так они получают деньги вперед.
Анализ показал, что геймеры путались в этой странице. Нажимали не на те кнопки, не понимали, как закрыть окно и перейти к играм, часто покупали пакеты по ошибке.
Стартовая страница продажи абонементов новой Shell
Это был фейл первой версии: в Senet я с самого зарождения продукта и именно здесь нарабатывала дизайнерский опыт, которого в начале просто не хватало. К тому же, мы спешили завершить продукт и протестировать этот функционал на реальных пользователях не успели. А клубы не рассказали нам об этих сложностях игроков.
6. Проводим интервью с пользователями
Параллельно я запустила по клубам опросник с целью получить контакты игроков, готовых поделиться впечатлением о работе с интерфейсом.
Интервью с геймерами подтвердили предположения: они приходят в клуб с одной целью — поиграть. Геймеры не запоминают интерфейс программы на ПК, для них важнее другие факторы: стоимость времени, уровень техники и удобство кресел в клубе.
Админы рассказали о самых частых проблемах игроков во время работы с интерфейсом. Выяснилось забавное. В старом интерфейсе была функция связи с администратором, позволявшая отправить ему сообщение. Но этой кнопкой никто не пользовался, возможно, они ее даже не нашли. Игроки предпочитали по старинке звать администратора голосом.
Владельцы клубов рассказывали, что приносит их клубам больше дохода. На основании интервью мы сделали вывод, какой функционал для них приоритетнее.
При этом, для нас было важно интегрировать в интерфейс рекламу как источник монетизации продукта. А клубы хотят продавать пакеты времени и свои акции. Между этими задачами нужно было найти баланс.
7. Изучаем продукты конкурентов и тренды продуктового дизайна
Главные из конкурентов Senet— американский ggLeap и греческий Gizmo. Есть еще несколько старых необлачных решений. Они не обновляются и не поддерживаются, но некоторые клубы предпочитают экономить и продолжают устанавливать именно их.
Примеры интерфейсов конкурентов
Отдельные клубы, подобно нам когда-то, создают собственные программы. Но их количество стремительно уменьшается, потому что содержать разработчиков дорого, а конкуренция в этом сегменте слишком высока. Сейчас дешевле перейти на качественный современный SaaS с постоянными обновлениями и круглосуточным сервисом поддержки клиентов.
Изучая продукты конкурентов, мы обратили внимание, что они часто меняют интерфейс игроков, но эти апгрейды касаются преимущественно цветовых решений. Видимо, так пытаются вызвать у игроков новые эмоции.
Главным дизайнерским выводом стало то, что интерфейсы похожих сервисов сделаны по канонам 1990-х — в стилистике скевоморфизма с использованием объемных изображений, как в интерфейсе «танчиков» для Dendi.
Такой интерфейс сложно разрабатывать и поддерживать. Сейчас главный тренд в разработке интерфейсов — простота и легкость. А мы как раз делали акцент на то, чтобы игроку было проще ориентироваться в оболочке, находить нужную информацию и функции. Тем более, большинство все равно не запоминает, как она выглядит.
На эту тему в нашей команде было много споров. Одни считали, что нужно равняться на конкурентов. Другие хотели использовать фирменный стиль и яркие цвета Senet, чтобы продукт ассоциировался с нашей компанией.
В итоге наш дизайн получился простым и гибким — и совсем не похожим на конкурентов. В качестве референса я также опиралась на тренды игровых лаунчеров: например, на очень лаконичные интерфейсы , и турнирные платформы вроде .
Мы позаботились и о мелочах. Для заполнения карточек игр админы, как правило, находили изображения в интернете — и они были вертикальными. В нашем старом интерфейсе форма под картинку была квадратной, из-за чего часть изображения обрезалась к неудовольствию игрока. В новом интерфейсе я ввела вертикальный формат «обложек» и заполнили каталог уже готовыми красивыми обложками, чтобы админы не тратили свое время.
8. Ограничиваем возможности кастомизации
При работе над прототипом нового интерфейса мы учли уже привычный парадокс: чем больше инструментов для кастомизации получает пользователь, тем меньше он будет ими пользоваться.
Пример из другой вселенной — в Slack можно кастомизировать буквально все: и цвет кнопок, и цвет шрифтов. Изменения кода можно вносить прямо в ColorPic. Но кто пользуется этими настройками? Максимум — тема оформления из уже готовых сетапов.
В новом интерфейсе Senet есть возможность заливать фоны и менять темы в пару кликов, не нагружая восприятие пользователей. В старом интерфейсе было четыре цветовые темы: красная, синяя, зеленая и желтая. Статистика показала, что этого вполне хватает. Даже от клубов, у которых есть свои брендбуки с фирменными цветами, запросов на добавление новых тем было не больше десятка. Так что темы мы обновили, но их количество в новом интерфейсе пока не увеличивали.
Пример новой Shell с разными темами, фоном и лого
9. Тестируем прототип на реальных пользователях
В новую версию интерфейса перешли все необходимые функции, вроде покупки абонементов, поиска и запуска игры, входа в личный кабинет. Но некоторые инструменты пришлось полностью переработать.
Фото: Панель гравця в старій Shell
К примеру, в старой версии вверху была панель с информацией о сессии — сколько игрового времени осталось, как тарифицируется время, какой у игрока баланс. Панель была слишком узкой и поэтому плохо читалась. Некоторые показатели, как баланс в казахстанских тенге, просто не помещались. Поэтому первым делом я сделала панель больше, а всю необходимую информацию разместила в виде списка — одну под другой.
Фото: Панель гравця в новій Shell
На этот раз мы тестировали прототип на реальных игроках. Заранее понимали, что переходить на новый дизайн игрокам с опытом использования старого будет непросто, поэтому привлекли к тестам сторонних геймеров.
Прототип переделывался пять раз, пока мы не убедились, что геймеры без проблем находят то, что нужно и интуитивно понимают, как все работает. После тестов я пришла к выводу, что в последней версии игроки быстрее всего находили нужную инфу и совершали действия с минимальным процентом ошибок. Однако у старых пользователей могут возникать сложности ввиду долгого опыта работы с прежней версией.
10. Готовимся к хейту
После окончания тестов прототипа мы перешли к следующей стадии — разработке макетов, написанию документации для разработчиков и созданию новой оболочки игрока.
Когда работа над ней была закончена, клубы предсказуемо разделились на тех, кто очень хотел протестировать новый интерфейс, и тех, кто категорически не желал на него переходить.
Многим админам новый интерфейс игрока зашел сразу, но сами игроки, как мы и предполагали, практически все принялись его хейтить. Их можно понять: слишком много изменений, с непривычки работать с таким решением может быть сложно.
Фото:
Сильнее всего геймеров выводила из себя кнопка выхода. В старой версии она была внизу слева, а перешла вверх вправо — на место, где в Windows расположена кнопка закрытия страницы. Зато игроки, которые никогда не пользовались старой версией, во время тестов прототипа эту кнопку находили безошибочно.
Действительно, очень скоро жалобы прекратились. Опыт показал, что если геймер приходит в клуб раз в две недели, уже через пару визитов он без проблем работает с новым интерфейсом.
11. Учитываем конструктивную критику
Некоторые клубы тестировали новый интерфейс на одном компе, после чего отказались его использовать. Таких пришлось заманивать не новым дизайном, а новыми инструментами. Например, игрок мог оплачивать товары клубного магазина со своего баланса. Многим клиентам зашла эта функция, но она была доступна только в новой оболочке, так что клубы обновились.
Я создала специальный документ для службы поддержки, куда саппорт добавлял комменты от клубов. В начале они представляли из себя необоснованный хейт, но со временем появлялись конструктивные замечания, которые мы учитывали и сразу вносили исправления.
К примеру, мы изначально убрали названия абонементов, а оказалось, что клубы специально называют абонементы не просто «2 часа за 100 грн», а как-то ярко, чтобы лучше продавать. Так что мы вернули названия. А игроки попросили, чтобы в их панели мы сместили баланс и избранное повыше, а программу лояльности спустили ниже, как не такую важную для них.
Когда пользователи распробовали новую версию, мы получили массу комментов с просьбами о добавлении новых функций. Мы обращали внимание на количество одинаковых запросов. Если нам казалось, что эти предложения актуальны, они брались в работу.
Мы выпустили новый интерфейс летом 2020 года и теперь планово переводим на него последние 20% клубов. С одной стороны, уже не поддерживаем старую версию, с другой — наличие нового функционала является для таких пользователей решающим фактором при выборе версии интерфейса. Попробовав новые возможности, даже хейтеры соглашались, что он лучше.
12. Выясняем, удалось ли достигнуть поставленных целей
С помощью нового интерфейса мы решили критичные проблемы, реализовали пожелания бизнеса и пользователей, заложили возможность масштабирования. Теперь в интерфейс можно встраивать рекламу и изменить систему навигации для более эффективной коммуникации с игроками.
Новое главное меню — это место для рекламы и клубной информации. После включения компьютера геймер сразу попадает на эту страницу. Вход в каталог игр выполнен в виде отдельной кнопки. Это один дополнительный клик, зато теперь у администрации клуба появилась возможность два раза повзаимодействовать с игроком: и на главной странице интерфейса, и в игровом каталоге. Размещать все рекламные сообщения в одном месте не нужно.
Выводы
Задумываясь о редизайне, помните, что это — инструмент решения задач, а не выражение чьих-либо эстетических предпочтений. Для него хорошо бы иметь объективные причины. Это могут быть технические проблемы, не позволяющие масштабировать продукт, бизнес-логика, требующая добавления новых инструментов, или сложности в работе с приложением.
У нас объективных причин было предостаточно. Мы не могли плавно менять старый интерфейс на новый, хотя так было бы правильнее. Мы были вынуждены пойти на этот шаг, в том числе для того, чтобы упростить игрокам работу с интерфейсом.
Редизайн всегда сопряжен с серьезными финансовыми и временными затратами. Кроме того, вы точно нарветесь на хейт: пользователи болезненно реагируют на смену интерфейса привычных продуктов. Но если вы понимаете, что изменения сделают продукт удобнее и интуитивно понятнее, шквал хейта обязательно сменится конструктивом.
С Senet так и произошло: за прошедшие после выхода обновления месяцы, на него перешли 80% наших клиентов. Они получили более эффективные инструменты коммуникации с игроками, а Enestech Software — возможность дополнительных доходов от рекламы.
А есть ли у вас кейсы успешного редизайна и не очень? Давайте обсудим в комментариях.
Оригинал статьи на
