Прошло полгода с момента публикации первой статьи о работе над сайтом банка. За это время Промсвязьбанк превратился в ПСБ, моя команда пополнилась еще тремя сильными спецами, мы запустили 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 тесты и плотная работа с обратной связью позволили нам достаточно безболезненно перевести аудиторию на новый сайт и улучшить показатели по всем флагманским продуктам банка.

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

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

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