От любви к ненависти и обратно. Как проводили редизайн сайта Parimatch

Меня зовут Алексей Стикс. Я Head of Product Design в Parimatch Tech. Редизайн — сложный поэтапный процесс, который является отличной проверкой продуктовой команды. А ещё это риск, ведь аудитория редко положительно воспринимает радикальные изменения на любимых платформах. Так случилось и при редизайне сайта Parimatch. В своей колонке хочу рассказать, как проходил редизайн, какие проблемы возникли в процессе и как их решили.

Зачем компании делают редизайн

Основная причина — в определенный момент дизайн продуктов просто перестает соответствовать современным трендам. В идеале, компании это замечают, тщательно анализируют ситуацию и принимают взвешенное решение — проводить редизайн.

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

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

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

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

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

Если говорить о редизайне Parimatch, то тут история чуть сложнее. Причиной стал переход продукта на новую платформу. Старый сайт был написан около 20 лет назад — в начале 2000-х. Поддерживать его стало сложно, долго и дорого. Потому была нужна новая платформа, которая должна не только улучшить стабильность и скорость работы.

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

Как проводили редизайн

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

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

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

Откуда брали референсы

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

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

Что изменил редизайн

Примерно 80% аудитории Parimatch использует мобильные платформы. Потому мы начали переход с мобильной версии. Для десктопа же решили использовать существующий фронт.

Это стало возможным, поскольку работало сразу два отдельных сайта, у которых не пересекалась аудитория. У десктопа есть своя небольшая фанатская база. Примерно 5% этой аудитории заходили на него со своего смартфона, чтобы сделать ставку, хотя это и очень неудобно.

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

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

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

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

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

Пришлось снова анализировать все возможные варианты:

• купить готовое решение;
• не переезжать вообще;
• собрать какое-то отдельное простое десктоп-решение;
• выйти без десктопа и открывать мобильную версию на вебе;
• взять больше времени и доделать десктоп.

В итоге решили попробовать mobile first подход — «растянуть» мобильную версию на десктоп. Так делают Facebook, Twitter и другие крупные площадки. Этот подход вполне логичный, ведь с каждым годом трафик мобильной аудитории продолжает вытеснять десктопную. Эстимейт на такой формат был во много раз меньше, поэтому мы приняли решение двигаться с ним.

Какие проблемы возникли

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

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

Люди писали в поддержку с просьбами вернуть все обратно. Наши саппорты краснели и обещали, что «скоро станет лучше». Нам даже предлагали деньги (не шучу). Мы были готовы к отторжению — это базовая реакция на внеплановые изменения. Потому, собственно, не предоставили возможность «вернуться на старую версию».

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

В итоге часть аудитории была в восторге. Потому мы посчитали, что остальные привыкнут, но все оказалось сложнее. Даже на первых тысячах пользователей мы заметили просадку аудитории. Она не выравнивалась за недели, как это обычно бывает, когда кардинально меняешь продукт. Это значило, что мы ошиблись в прогнозах.

Как решали проблему

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

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

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

Тестированием занималась не только продуктовая команда, но и часть топ-менеджмента. Это в конечном итоге повлияло на вариативность и скорость внедрения улучшений.

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

Чем все закончилось

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

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