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

Пара обновлений — и +4 млн рублей каждый месяц.

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

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

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

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

Весной прошлого года Альфа-Банк создал рабочую группу, в которую вошли сотрудники из разных подразделений: маркетологи, исследователи, дизайнеры, разработчики. Новая команда сделала несколько макетов, на которых попыталась переосмыслить структуру главной страницы. Самый удачный вариант отправили тестировать в исследовательскую лабораторию Alfa Research Center (ARC).

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

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

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

1. Сделали видеобаннер вместо статичного

Чтобы разнообразить страницу и задать ритм, команда дизайнеров и разработчиков Альфы отказалась от статичного главного баннера, который ведёт на страницу оформления того или иного продукта, — его заменили на видео. Тем более, банку было, что показать: в тот момент маркетинг запускал коллабы с моушен-дизайнером Brickspacer — вероятно, вы видели его креативы для Альфа-Банка с летающим мишкой.

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

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

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

После запуска баннера CTR тут же вырос в 2,5 раза и продолжал расти на протяжении всего времени.

2. Переосмыслили витрину продуктов

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

Оказалось, такая логика людям понятнее. Особенно тем, кто еще не стал клиентом банка. Аудитория, не знакомая с продуктами, плохо считывала разницу между той же «Альфа-Картой» и картой «100 дней без процентов». Теперь путаницы нет, и пользователи находят нужный раздел быстрее. По сравнению с аналогичным блоком на старом сайте, CTR сразу после перезапуска вырос в 2 раза.

3. Упростили переход в раздел для малого бизнеса

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

Главное, что дал новый раздел — сократил путь пользователей из сегмента малого бизнеса к нужным продуктам. Теперь эти предложения отображаются не после перехода по ссылке (которую еще надо было найти), а сразу на главной странице — достаточно переключить таб с «Для всех» на «Для бизнеса». Это решение в 3 раза увеличило количество переходов в раздел для малого бизнеса.

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

И самое интересное: сколько это в деньгах? Мы всё посчитали: только на новых дизайн-решениях банк зарабатывает около 4 339 000 ₽ чистой прибыли каждый месяц. На общем фоне сумма кажется незначительной, но ровно до того момента, пока не взять во внимание один факт: эти 4 млн ₽ — заработок, который мы получаем только благодаря дизайну, без дополнительной маркетинговой или продуктовой поддержки.

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

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