Альфа-Банк

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

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

Зачем вообще заниматься сайтом

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

Так сейчас выглядит сайт 

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

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

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

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

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

Зачем нужны эксперименты

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

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

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

Мы добавили подсказки ко всем полям: фамилию нужно писать как в паспорте, номер телефона в формате +7 и так далее.

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

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

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

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

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

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

Зачем ещё и юзабилити-исследования

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

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

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

Тепловая карта страницы кредита наличными

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

Экспериментов недостаточно

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

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

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

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

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

Разные площадки банка

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

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

Зачем нужны виджеты

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

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

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

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

​Новый фирменный шрифт

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

Каким будет сайт Альфа-банка в 2020 году

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

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

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

​Так будет выглядеть главная страница в новой архитектуре и с обновленным интерфейсом

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

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

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

0
41 комментарий
Написать комментарий...
Alex Barashkov

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

По пунктам:
- Альфа бизнес веб версия ужасная фигня, которую пытаются заменить на новую версию, но пока без успешно. Часть функциональности по-прежнему редиректит на старую версию, которую нельзя даже открыть в двух вкладках.
- Alfamiles - еще одна жуть, закрыли по-моему только в этом году, заменив на Alfa travel, без сохранения/переноса миль. 
- Alfa-forex - ужасный инструмент для трейдинга, в никакое сравнение с Тинькоф Инвестиции не идет. Пытался когда-то зарегистрироваться, мне сказали прийти получить usb электронный ключ...получил. Как итог, на маках вообще не работает,а на винде 10 крешилась ошибка, которую тех поддержка так и не смогла решить. 

Ответить
Развернуть ветку
Владимир Сон

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

А насчёт сайта, все изменения двумя словами-ВОЗЬМИТЕ КРЕДИТ.

Ответить
Развернуть ветку
Николай Полай

Предположу, что речь об услуге банка “Alfa FX”.
Альфа-Форекс - это российский Форекс-дилер, регистрация в котором состоит из трёх кликов ok и одной смс-ки. Весь сервис выполнен в трёх средах: браузер, MetaTrader, приложения iOS и Android.
Испытать, какие-то технические трудности с этим сервисом не так легко.

А если говорить про “Alfa FX”, то это услуга обмена валюты для фл и юл. Выглядит он гораздо проще нежели вы описали.

Оба сервиса на столько же сравнимы с «тинькофф инвестиции» как vc.ru с газетой Коммерсантъ. Три сервиса по работе с ценными бумагами и два источника информации. Поэтому ваше утверждение сродни фразе: «vc.ru лучше газеты Коммерсантъ».

Ответить
Развернуть ветку
Альфа-Банк
Автор

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

- Над версией для бизнеса тоже работаем;
- Сейчас как раз и переходим на Alfa Travel. Эта программа более интересная.

 

Ответить
Развернуть ветку
Alex Barashkov

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

Ответить
Развернуть ветку
Viktor Ivanov

Если слово виджеты заменить на компоненты (чем по сути они и являются) то всю статью можно уместить в одно предложение. У нас есть дизайн система которой мы будем пользоваться в 2020.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Артем Богданов

"Один из результатов — на 500 тысяч больше заявок по кредитным картам."

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

Ответить
Развернуть ветку
Maxim Gubin

На примере мобильного приложения могу сказать, что удобство использования и поддержки вашего банка отстает от банка Тинькофф. И красный корпоративный цвет негативно влияет при длительном использовании – раздражает. Это частное мнение) Если ночью в авто я включаю вашу прилу, то потом еще секунд 10 перед собой вижу красный прямоугольник вместо дороги.

Ответить
Развернуть ветку
Artem Petrenkov

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

Ответить
Развернуть ветку
Maxim Gubin

Это я на основе спонтанных воспоминаний написал. Да, посмотрел, основные цвета не красные. Но так как я провёл много времени в ожидании ответа в чате с красными баблами - сложилось впечатление, что я в социальной сети для вампиров

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Igor Tarasov

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

Ответить
Развернуть ветку
Альфа-Банк
Автор

Зато, пока карта в офисе вы ей уже можете пользоваться выпустив при этом только токен для себя, а пластик получить потом. 
 
Привязать уже действующую карту к счёту можно сразу после его открытия, но вот изменится он только в течение 24 часов. 
Какие именно глюки на сайте? Расскажите подробнее. 
Что именно с кэшбэком не так? Начисляется в зависимости от выполнения условий  

Ответить
Развернуть ветку
Igor Tarasov
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Irina Rybalova

Говно, ваше, обслуживание, ребята. Такого как ваш говно-чат даром не надо. 6К обслуживание годовое, а толку нет - идите в офис где карту получали, лол, что? Я в сбер чтоли звоню? И это Альфа бизнес!

Ответить
Развернуть ветку
Альфа-Банк
Автор

А с какой проблемой обращались в чат? Большинство операций сейчас можно сделать удалено и при этом не посещать офис 

Ответить
Развернуть ветку
Irina Rybalova

Пыталась директ банк настроить. У Тинька это происходит удаленно без выпуска доп эцп. В альфе это альфа линк с эцп, визитом в офис и доп договором. Оператор даже не смогла сказать будет у нас это платная услуга или нет. Тариф просто 1%.

Ответить
Развернуть ветку
Irina Rybalova

Общение с поддержкой. Мне кажется меня тролят просто в чате.

Ответить
Развернуть ветку
Irina Rybalova

То есть вместо выписки из Центрального каталога кредитных историй предлагается видимо взять платную справку со списком БКИ куда Альфа шлет истории.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Irina Rybalova

Очевидно что КИ Вы не храните, но почему поддержка не в состоянии написать что нет услуги предоставления выписки из ЦККИ - не ясно. Почему Вы можете это написать, а операторы в чате - нет? У меня весь чат такой. С какой проблемой не обратись. Помогает поддержка 1. Выделенная телефонная линия на пакете комфорт или как его зовут 2. Соц сети 3. Банки ру. Обычная телефонная поддержка и чат это адский ад. Кстати не ясно почему при приоритетной поддержке по телефону не включается приоритетный чат.

Ответить
Развернуть ветку
Альфа-Банк
Автор

Согласны, что в чате формулировка оказалась более сложной, извините. 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Алексей из LOADING.express

Ещё неплохо бы скорость загрузки сайта улучшить.

6-7 секунд, это неплохо, но у топовых банков страница загружается за 1-2 секунды.
https://loading.express/banks.html

Ответить
Развернуть ветку
Альфа-Банк
Автор

Спасибо, взяли на заметку 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Ероховец

А почему так трудно добавить оплату квартиры в регионе? (Белгород). Да, город не Москва, но областной центр. Оператор у нас практически на весь город один, труда то немного. Написал заявку уже давно, а ни толку ни ответа.

Ответить
Развернуть ветку
Альфа-Банк
Автор

Стараемся поставщиков добавлять. Если в списке не нашли, то можно делать оплату через прочие или все платежи.

Ответить
Развернуть ветку
Irina Griaznykh

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

Но подсказки и текст ещё можно докурутить. И, глядишь, конверсия опять поднимется

Ответить
Развернуть ветку
Irina Rybalova

Знаете как Альфа обслуживает клиентов? Перед НГ в Москве сити очередь 20 чел в банкомат, люди при мне плевали и уходили, на мне банкомат заглючил. А там хвост не вмещается в коридор около банкомата) Три раза звонила и сообщала что банкомат перегружен в течении года, просила добавить банкомат, писала обращение. Повесили табличку про банки партнеры) Какой там Брянск и пр. АЛЬФЕ НАСРАТЬ ДАЖЕ НА МОСКВУ СИТИ!

Ответить
Развернуть ветку
Альфа-Банк
Автор

Подскажите, а когда именно это было? Хотели бы проверить банкомат 

Ответить
Развернуть ветку
Irina Rybalova

30.12.2019 года около 17 часов, Пресненская набережная 6 БЦ Империя. До меня у мужчины банкомат забрал валюту (доллары) и не зачислил на счет. У меня он просто не принял деньги совсем. На моей памяти это вторая его поломка за последние несколько месяцев. Если не верите что там вечная очередь - повесьте вебку. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Dinara Gritsyshina

Новое позиционирова

ИЕ Альфа-Банка 🤦‍♀️
Вот это дизайн-стратегия!

А вообще, мобильное приложение Альфы, конечно, нагромождено, но уж лучше, чем у ВТБ и даже Сбера! Основные ежедневные функции вполне интуитивно доступны. Что-то большее искать, возможно, будет сложнее. Но уже это радует.

Ответить
Развернуть ветку
Читать все 41 комментарий
null