Битва за доли процента: как Альфа-Банк растит конверсию своего сайта

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

Тенденция последних лет — делать упор на приложения. Но списывать веб со счетов рано. Для нас alfabank.ru — главный канал привлечения новых клиентов. Ежемесячно его посещают 4,4 млн пользователей. Только в 2019 году посетители сайта заполнили почти 7 млн заявок на продукты банка, заказали 815 тысяч карт и оформили кредиты на 52 млрд рублей.

Сайт Альфа-Банка — не просто площадка с информацией о продуктах. Он давно превратился в ecommerce платформу, с которой чаще всего начинается первое знакомство потенциального клиента с банком. Сайт конкурирует с другими финансовыми сервисами за внимание людей и сопровождает их в течение всего процесса покупки — от формирования потребности до вручения карты.

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

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

Один из тысячи возможных сценариев: человек может увидеть рекламу кредитной карты на YouTube, открыть banki.ru, чтобы сравнить стоимость, через несколько дней набрать адрес сайта банка, изучить условия. А ещё через неделю по дороге в магазин зайти в отделение банка и оформить заявку.

Чтобы понимать и улучшать разные клиентские сценарии, мы каждый год проводим сотни A/B-тестов и UX-исследований.

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

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

Другой пример: простое изменение подзаголовка блока на странице кредитной карты помогло увеличить конверсию ещё на 5%. Пользователи чаще оформляли заявку на странице с заголовком «Кредит за 7 минут», чем «Кредит ваш за три шага» — акцент на времени быстрее считывается при беглом взгляде.

На форме заказа кредитной карты мы добавили сообщение о бесплатной доставке в течение дня с обратным отсчетом. Благодаря новому блоку количество заполненных анкет увеличилось на 10%.

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

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

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

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

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

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

После этого данные нескольких респондентов объединяются. Это позволяет создать тепловую карту для разных сценариев и выявить места, где пользователю сложнее всего было разобраться с интерфейсом. Подобные исследования показывают проблемы, которые зачастую невозможно обнаружить с помощью A/B-тестов и измерений конверсии.

С помощью таких тестов в 2019 году мы выявили 209 проблем с неочевидными или слишком сложными интерфейсными решениями. К примеру, выяснилось, что при переходе из поля «Фамилия» на поле «Почта» большинство пользователей забывает переключать раскладку клавиатуры, в результате интерфейс сразу выдаёт ошибку. А поле для контактов третьего лица, обязательное при оформления карты, заставляет пользователя остановиться и задуматься о необходимости ввода таких данных.

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

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

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

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

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

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

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

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

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

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

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

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

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

За 2019 год мы сделали технологический конструктор с унифицированным интерфейсом и высокой скоростью работы. Однако банк не может позволить себе мгновенно переключить пользователей на новый сайт.

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

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

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

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