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


Обо всем по порядку.


Level up


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


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


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


Roadmap запуска


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


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


Но вернемся к проекту.


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


Этап первый


  • Режем второстепенный функционал и разделяем принцип 20/80;
  • Выстраиваем механику по сбору и обработке обратной связи;
  • Создаем конструктор блоков;
  • Запускаем бета-версию и размещаем её по ссылке на старом сайте;
  • Корректируем структуру;
  • Формируем новую навигацию;
  • Через А/В тесты (если целесообразно) «переобуваем» все ключевые продукты банка.

Этап второй


  • Запускаем оставшиеся разделы на сайте;
  • Прорабатываем страницы с точки зрения SEO, повышая целевой трафик;
  • Пересматриваем решения, которые плохо отработали на первом этапе;
  • Подключаем инструменты персонализации;
  • Итеративно улучшаем сайт через A/B тесты и поступающую обратную связь.

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


Сложности, возникшие по пути


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

Наши действия тоже становились причиной сложностей:


  • Новые страницы, по которым не проводили авторский надзор дизайнера, выглядели сыро и их приходилось перерабатывать.
  • Торопясь, мы интегрировали блоки хард кодом, что приводило к «костылям» и страданиям контентщика.
  • По seo затянулся тендер на выбор нового подрядчика и мы просели по показателям сильнее, чем рассчитывали. Сейчас наверстываем.

Все проблемы решили, в том числе и с конструктором блоков, который сначала нам упростил работу, а потом немного затормозил.


Конструктор блоков


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


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



Далее создали для блоков новый дизайн, наполнили вариантами, сверстали и интегрировали с нашей CMS. В конечном итоге всё это упаковали в документ, где отразили правила, принципы построения и примеры.



Аналогичные конструкторы были созданы для мейлеров и посадочных страниц.


Что дал такой подход?


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

С чем мы столкнулись?


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

Это упущение быстро исправили и конструктор продолжает свое развитие по сей день. Инструмент этот динамичный и постепенно должен эволюционировать во что-то близкое к дизайн-системе.


Релизы


В предыдущей статье я упоминал про работу над бета-версией, теперь хочу поделиться результатом релизов основной версии.


Главная страница


Запустив новую главную страницу на 100% пользователей, получили весьма неплохие показатели. Количество вернувшихся на старую версию сайта через панель, составило чуть больше 10%.



Число хорошее. Однако большой объем еще требовал доработок, что и было сделано, пока не достигли отметки в 4%.



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


Ключевые продукты банка


На ключевых продуктах A/B тесты были обоснованы и послужили инструментом по измерению эффективности наших действий.



Результаты следующие:


  • Ипотека (РБ): +36% CR в заявку;
  • Дебетовые карты (РБ): почти в 2 раза увеличили количество заявок;
  • Потребительские кредиты (РБ): +36% CR в заявку;
  • РКО (МБ): первый запуск — существенных изменений нет. Собрались, погрузились в продукт ещё глубже, переработали и выбили + 34% CR в заявку;
  • Кредиты (МБ): + 22% CR в заявку;
  • Регистрация бизнеса (МБ): + 55% CR в заявку.

С одной стороны, результаты достойные, с другой – это всего лишь данные с A/B тестов. Посмотрим, как новые страницы покажут себя дальше и как изменится конверсия в оформление.


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


Обратная связь


Работа с обратной связью – обширная тема, в которой удалось много чего интересного внедрить, лучше расскажу об этом в отдельном материале. Здесь только кратко затрону основные моменты.


Хранилище всех отзывов


Свой рабочий день начинаю с изучения отзывов и порой оттуда узнаю о каких-либо проблемах быстрее, чем мне сообщают мои ребята.


Все отзывы делим на две ветки:


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


Связь отзыва с вебвизором


Кроме стандартных параметров о пользователе, мы пробрасываем Client ID Яндекса, что позволяет нам разбирать интересующие сессии, связывая текст отзыва и видеозапись на вебвизоре.



Активно используем данную механику, как для воссоздания багов, так и для изучения паттернов поведения пользователей на сайте.


Интервью с релевантными респондентами


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



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


Даем обратную связь


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


Что в итоге и что дальше?


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


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


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


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