Пара обновлений — и +4 млн рублей каждый месяц.
На примере редизайна мобильного сайта Альфа-Банка расскажем, как, казалось бы, простые дизайн-решения в моменте увеличили количество переходов на продуктовые страницы от 200 до 300% и стали приносить банку дополнительные несколько миллионов рублей в месяц.
Почему мы решились на редизайн мобильного сайта и как это было
В какой-то момент пару лет назад мобильная версия сайта Альфа-Банка достигла своего потолка по конверсии. Главная страница в то время была собрана из однотипных баннеров, которые с трудом поддавались масштабированию. К тому же они дублировали друг друга в плане креатива: часто рядом находились картинки, похожие по тексту и визуалу.
Например, был момент, когда всё крутилось вокруг идеи «0%». Один баннер анонсировал кредитную карту с 0% годовых в течение льготного периода. Другой — комиссию 0% за переводы с дебетовой карты. Следующий — 0% за снятие наличных с кредитки. Так получилось не специально: изменения мы внедряли по отдельности, а без комплексного подхода сложно увидеть общую картину.
В итоге у пользователей сформировалась «баннерная слепота» — усталость от рекламы. Команда стала думать, как улучшить метрики.
В 2022-м году мы надеялись исправить положение итерациями: постепенно меняли баннеры, уходили от повторений в креативах и добавляли на страницу новые блоки, чтобы разнообразить структуру. Но A/B-тесты подтверждали, что кардинально показатели не меняются.
Более того, точечные обновления скорее мешали: из-за регулярных, но выборочных обновлений страница окончательно потеряла единую концепцию и структуру. Новые элементы смотрелись негармонично, и на главной странице сформировался беспорядок. В итоге в команде пришли к выводу, что Альфе просто нужен новый сайт.
Что получилось
Весной прошлого года Альфа-Банк создал рабочую группу, в которую вошли сотрудники из разных подразделений: маркетологи, исследователи, дизайнеры, разработчики. Новая команда сделала несколько макетов, на которых попыталась переосмыслить структуру главной страницы. Самый удачный вариант отправили тестировать в исследовательскую лабораторию Alfa Research Center (ARC).
В ARC изучили эмоциональный отклик пользователей на новый дизайн, легкость оформления продуктов, когнитивную нагрузку от взаимодействия с сайтом и потенциальную конверсию. Например, выяснилось, что люди находят нужные страницы и сервисы до 2,5 раз быстрее, чем раньше, а уровень напряжения от пользовательского опыта снизился на 67%.
За исключением некоторых нюансов, новый дизайн показал на исследованиях потрясающий результат — цифры были обнадеживающие. Многие наши гипотезы подтвердились: страница действительно стала понятнее и легче для восприятия.
Мобильный сайт с новой главной страницей запустили в мае 2023 года. Сначала направляли на неё только 5% трафика и наращивали его постепенно. К июлю новым сайтом пользовались уже более полумиллиона пользователей, а ключевые метрики сходу стали расти.
Ниже — три ключевых дизайнерских решения для главной страницы, которые позволили нам серьезно повысить метрики, конверсии и прибыль.
1. Сделали видеобаннер вместо статичного
Чтобы разнообразить страницу и задать ритм, команда дизайнеров и разработчиков Альфы отказалась от статичного главного баннера, который ведёт на страницу оформления того или иного продукта, — его заменили на видео. Тем более, банку было, что показать: в тот момент маркетинг запускал коллабы с моушен-дизайнером Brickspacer — вероятно, вы видели его креативы для Альфа-Банка с летающим мишкой.
Чтобы воплотить в жизнь идею с видеобаннером, предстояло решить сложную техническую задачу: сделать так, чтобы баннер работал на разных смартфонах в разных условиях. Дело в том, что мобильный интернет нестабилен — если скорость слабая, ролик не подгрузится. Еще он может не воспроизвестись по другим причинам: например, на смартфоне установлен старый браузер или устройство перешло в режим энергосбережения.
Изначально планировали использовать технологию стриминга, но у неё были существенные недостатки. При слабой скорости стриминг не мог подтянуть картинку вместо видео и место на странице просто оставалось пустым. К тому же это сторонний сервис, что вызывало дополнительные сложности с точки зрения безопасности. Тогда команда реализовала функционал, который позволяет мгновенно измерить скорость каждого отдельного визита на сайт и воспроизвести видео оптимального качества.
Мы изучили несколько десятков сайтов, где идея видеобаннера воплощена без подключения внешних сервисов. В итоге обратили внимание на решение Apple: на своём лендинге они подкладывали статичную картинку и замеряли скорость ее загрузки. Если она подгружалась быстро, то поверх загружалось видео. Если картинка грузилась долго, видео не показывалось вообще — пользователь видел неподвижное изображение. Мы взяли этот подход за основу и усовершенствовали его.
Алгоритм, считывающий скорость загрузки, работает в связке со статичным баннером, который загружается первым. Если соединение плохое или видео не подгружается по другим причинам, баннер остается статичным. Потом включается градация по качеству ролика: чем лучше скорость, тем выше разрешение видеобаннера.
После запуска баннера CTR тут же вырос в 2,5 раза и продолжал расти на протяжении всего времени.
2. Переосмыслили витрину продуктов
Один из инсайтов, который разработчики получили после исследований в Alfa Research Center: надо отказаться от множества баннеров, которые ведут на продуктовые страницы, и заменить их на иконки. При этом анонсы отдельных продуктов в витрине заменить на каталог.
Теперь сайт не предлагает сходу конкретную дебетовую «Альфа-карту» или, скажем, кредитную карту «100 дней без процентов». Сначала пользователь перейдёт в нужный раздел — «Дебетовые карты», «Кредитные карты», «Кредиты», «Инвестиции» и так далее — и уже там выберет продукт.
Оказалось, такая логика людям понятнее. Особенно тем, кто еще не стал клиентом банка. Аудитория, не знакомая с продуктами, плохо считывала разницу между той же «Альфа-Картой» и картой «100 дней без процентов». Теперь путаницы нет, и пользователи находят нужный раздел быстрее. По сравнению с аналогичным блоком на старом сайте, CTR сразу после перезапуска вырос в 2 раза.
3. Упростили переход в раздел для малого бизнеса
В прошлом году в банке заметили резкий рост сегмента малого бизнеса: люди активно регистрировались в качестве ИП и открывали ООО, а значит, и подключали банковские услуги: от расчетного счета до эквайринга. Чтобы не упустить эту волну, решили сделать предложения для бизнеса заметнее.
Главное, что дал новый раздел — сократил путь пользователей из сегмента малого бизнеса к нужным продуктам. Теперь эти предложения отображаются не после перехода по ссылке (которую еще надо было найти), а сразу на главной странице — достаточно переключить таб с «Для всех» на «Для бизнеса». Это решение в 3 раза увеличило количество переходов в раздел для малого бизнеса.
Какие результаты
Основная метрика главной страницы — переходы в разделы с оформлением банковских продуктов. В среднем за год этот показатель по всем продуктам вырос на 5%. Это значит, что пользователи быстрее и проще переходят к целевому действию — оформлению заявок.
И самое интересное: сколько это в деньгах? Мы всё посчитали: только на новых дизайн-решениях банк зарабатывает около 4 339 000 ₽ чистой прибыли каждый месяц. На общем фоне сумма кажется незначительной, но ровно до того момента, пока не взять во внимание один факт: эти 4 млн ₽ — заработок, который мы получаем только благодаря дизайну, без дополнительной маркетинговой или продуктовой поддержки.
Что дальше
В редизайн, заранее того не планируя, разработчики заложили хороший задел на будущее: на главной странице теперь достаточно места для размещения новых элементов. Это поможет двигаться в сторону развития партнёрских программ: предлагать не только финансовые продукты, а добавлять также сервисы для путешественников, страховые стримы, маркетплейсы и прочее. Возможно, появится подписка на небанковские услуги — мы уже тестируем, как это будет работать на сайте с технической точки зрения.
Кроме того, в планах банка развивать персонализацию не только для клиентов, а вообще для всех пользователей — научить алгоритмы подбирать нужные конкретному человеку продукты и решения, даже если он зашел на сайт впервые.
В основном все делают персонализацию не на сайтах, а в приложениях, и только для клиентов. Мы хотим поработать с персонализацией для не-клиентов. Уже предпринимаем первые подходы, теперь нужно углубиться в эту тему. Одно мы поняли точно: персонализация для не-клиентов — это будет непросто, но интересно. Ей и планируем активно заниматься в 2024 году.
Если у Альфабанка так все хорошо с конверсией на сайте, то можно как-то попросить ваших агентов не звонить так часто с предложение банковских продуктов?
Если звоним мы, то можем это отключить. Напишем вам в личку, чтобы узнать ваш номер, звонки уберём 👌
а можно было в статье обойтись без вставок с 3д-шечками, а просто понятно показать, каким экран был до и каким стал после
Вспоминая старую мобильную версию сайта, скажу так, новый сайт - это прям попадание в яблочко. Для меня уж точно.
Да, они сделали по максимуму, чтобы ввести народ в заблуждение.
Наконец-то если ты предприниматель тебе не нужно стоять что называется отдельную очередь на обслуживание, а всё в одном месте можно сделать
Да если ты и не предприниматель всё равно так и манит зайти в этот раздел посмотреть чем там живёт бизнес)
Согласен. В сравнении с тем же Т-банком большой плюс - там полностью отдельное приложение.
Не обманешь - не продашь (с)
Кредиты у них под 0%, ага!
Вероятно, люди просто устали от вашего вранья.
Типичная завлекаловка. На % и зарабатывают, в ущерб себе никакой бизнес не будет работать. Наверняка там условие под * что кредит под 0% это 1-2 месяца, а потом уже 19%-40% годовых, условия такие хитрожелтые. Ну и люди это понимают.
Устали от вранья красного банка-это не то слово и от их бестолковых звонков бесконечных с предложением снять деньги с кредитной карты.
Здравствуйте, подскажите, пожалуйста, у меня 2 вопроса:
1.Почему в моем мобильном приложении написано, что мне доступна кредитка с балансом 524 000 руб, а когда мне ее привез курьер мне дали карту с лимитом на 15 000 руб.? (см скрин моего приложения)
2.У вас появились какие-то личные знакомства/крыша в ФАС?
Кирилл, приветствуем!
Если не пишем в баннере с предложением «Одобрено», то лимит предварительный. Финальное решение сообщаем при встрече.
В дальнейшем лимит можем сделать больше. На это легко повлиять — пользуйтесь кредиткой чаще и вовремя вносите платежи. Сообщим о новом лимите в пуш или смс 👌
Это либо предодобрение, либо максимально возможный лимит. Мне тоже дали сначала только 30, а потом через 2 месяца повысили до 90, а потом и до 300, как обещали
Они конечно сделают все, чтобы ввести клиента в заблуждение. Отстойный банк. Бегите
Комментарий удален автором поста
Не курьер, а специалист банка. Курьеров в Альфа Банке нет, курьер привозит пиццу и уходит. Тот, кто вам привез карту и выдал это специалист.
мишкой.
Это один из лучших коллабов эвер
видеобаннер топ
Мы, прям, порадовались за себя: у нас - статичная картинка с подгрузкой видео..."верным путём идём, товарищи!"
Подскажите, пожалуйста, какие исследования вы проводили чтобы выяснить уровень напряжения. - "а уровень напряжения от пользовательского опыта снизился на 67%."
Заранее большое спасибо за ответ)
Екатерина, привет! Спасибо за вопрос. Проводили качественный UX-тест наживых респондентах с айтрекером. Такой тест позволяет оценить: вовлечение, удивление, напряжение, концентрацию, фрустрацию и тд.
Неужели такой подход тоже существует, а то сейчас редезайнами и ребрендингами только из клиентов делают не-клиентов)
Самое главное до сих пор продолжают) "Гениальные маркетологи" видят фидбек, что пользователям не нравятся такие инновации, ни старым, о новых говорить вообще не приходится, но утверждают, что это наш путь, упрощение и тд.. Альфа в этом плане молодцы предлагают удачные, обдуманные решения и прислушиваются к аудитории
А как вы посчитали когнитивную нагрузку от взаимодействия с сайтом?
Илья, привет! Спасибо за вопрос. Для тестов использовали айтрекер. Что позволяет оценить: вовлечение, удивление, напряжение, концентрацию, фрустрацию и тд.
Добрый день, заблокировали карту и приложение, не могу разблокировать и получить ответ,23 февраля 2024г хотел совершить покупку запчасти через интернет ресурс мне дали данные карты Альфа банка куда сделать перевод средств, после чего я сделал перевод а деньги не списались и я еще раз нажал перевод такой же суммы после чего заблокировалось приложение и карта, позвонив в службу поддержки мне ответили что нужно идти в отделение банка, сходил в отделение банка заполнил заявление приходили смс подтверждения которые диктовал сотруднику банка г.Буденновск, после чего сказали ожидать от 30минут либо до конца рабочего дня, прошло уже два рабочих дня не звонков не смс не поступило, позвонив в службу поддержки мне сказали по вам мы не видим не каких действий идите снова пишите в банк, происходит какой то беспредел с обслуживанием банка, мне в банк добираться 70км так же нужно брать отгул за свой счет на работе так как банк не работает в сб. и вс. И так же все мои средства зависли на карте которыми я не могу распоряжаться, прошу разблокировать карту либо вывести мои средства на мой расчетный счет в другом банке!
Для них кайф нагадить клиенту. Закройте счет в этом недобанке
Добрый день. Видим, что написали нам в личные сообщения. Уже проверяем. Вернёмся с ответом в ЛС 🤝
Как обычно длинный текст про успехи, но при заходе в их приложение все нивелируется забагованностью и нелогичностью интерфейса) А «Витрина» в которой вся реклама банка это, похоже, вообще кил-фича 🙂
Когда уже и другие компании наконец поймут, что важно думать о таких моментах, а главное делать. Дизайн-это визуал, чуть ли не самую большую роль играет
Только дизайн не всегда визуал, важнее всего удобство и понимание как и что где сделать
Ну для этого люди в компаниях реально шарящие должны работать, не все могут такими похвастаться если уж быть честными )
Мне поступили переводы в размере 54 тысячи рублей,после этого заблокировали и требуют чеки отправителей в заверенном виде отсканнированые,я не знаю этих людей так как продавал товар через интернет,сотрудники банка не знают как мне помочь, ближайшее отделение 70 км от меня,что бы попасть в банк приходится брать на работе отгул тратить свои деньги на автобус и в итоги ничего не разблокированно и не знают что делать! на просьбу верните деньги они отвечаю что пока карты банк не разблокирует они не могу мне их вернуть! ПОМОГИТЕ ВЕРНУТЬ ДЕНЬГИ
Мой совет, закройте в этом банке все счета. Им доверия нет
Дарья, в ситуации уже разбираемся, постараемся помочь как можно скорее. Напишем в личные сообщения о решении 👌
На десктопном сайте при разрешении браузера 1280 пкс появляется горизонтальный скролл. Из-за одного криво свёрстанного блока. Подробности — на скриншоте.
@Альфа-Банк
Иван Грозный, наверное, вырвал бы руки этим фронтендерам, чтобы они не смогли повторить такой видеобаннер!
Облегчает жизнь окрщикам и перфекционистам
А как определили 'самый удачный вариант макета' и в чем заключалось его тестирование в Лаборатории? Как долго тестировали?
Дмитрий, привет! Спасибо за вопрос. В ARC проводили два теста:
1. Качественный UX-тест на 18 респондентах
2. Количественный немодерируемый тест ~1000 человек
Вместе с поиском респондентов и обработкой результатов, времени ушло примерно 5 недель.
Ребята, привет, если не секрет расскажите как и какими методами, с помощью каких калькуляций, перемножений/делений метрик вы посчитали, что на новых дизайн-решениях банк зарабатывает около 4 339 000 ₽ чистой прибыли каждый месяц?
Артем, привет! Спасибо за вопрос. Мы знаем LTV, средние показатели прибыли по каждому продукту. Аналитика сайта позволяет измерить все до и после изменений.
Дизайн дизайном, это всё весело и интересно, но главное что по метрикам это дает какой-то результат, иначе всё это как играть в песочнице
Так тут об этом и пишут, что показатели улучшились после редизайна
А 4 ляма - это скока в % от оборота банка? Практически нискока?
Зря делали, всего-то 4 ляма, дураки какие
~ 0.06% от месячной прибыли банка
интересно. Ей и планируем активно заниматься в 2024 году
Без понятия, что это значит, но окей)
У меня примерно есть представление о чем они говорят, но было бы интересно более подробно узнать, во-первых, как это будет выглядеть, а во-вторых, чекнуть потом аналитику
Ребят, а вы не хотите открыть курсы от себя для других брендов по дизайн-решениям?)
а мы даже из этого скудного описания многое для себя почерпнули...хоть и понимаем - "куда нам до них тягаться"...
Главное, что не как у тинька)
редкостная чушь
Если дизайн добавил прибыли, то она за счёт тех, кто толком не понимал, что ему надо и повёлся на красивые завлекалки. То есть, метрика достижений в 4 млн. показывает не сторону нормальных и постоянных клиентов, которые терпят рекламную плесень, чтобы пользоваться услугами и платить комиссионные банку. Меня вы скорее огорчили, чем порадовали.
Комментарий удалён
Зачем вы вообще существуете, у вас даже нет апки 😂
Реально лучше стало. Правки по делу
Дизайн маст хев
Никому не советую брать кредитки красного банка, типа год без процентов. Нигде не указывают условия и порядок погашения. Вводят в заблуждение, чтобы получить повышенные проценты! А еще звонят и предлагают с кредитки снять наличку.... Красавцы... Не ведитесь
Большинство банковских продуктов непростые. Я лично считаю, что к ним ко всем просто нужно подходить серьезно, досконально читать и узнавать условия, а потом думать подходят они тебе или нет и исходя из этого пользоваться/не пользоваться. И будет вам счастье) Считаю эту кредитку одной из самых выгодных кстати говоря. К сожалению, многие люди сначала не вникают в суть использования, а потом жалуются, какой банк плохой. Как будто кто-то их заставлял насильно ее брать
Интересны кейсы Alpha Research больше)
Срочно в номер!!
Программисты альфа-банка замеряют скорость картинками и сортируют пузырьковым методом!
Непонятно зачем было пересматривать десяток чужих решений, ведь конечное решение лежит на поверхности.
Две мысли, по поводу статьи. Если рост вашего бизнеса на 5% не окупает вам работы по разработке сайта, то не стоит и заморачиваться.
Ну и, все же, главное не сливать в унитаз запросы своих клиентов. Как это было недавно с нашим обращением за кредитом. Где "персональный менеджер" просто забыл о нашем запросе. В итоге мы взяли деньги в другом банке.
Который раз убеждаюсь на сколько крутые в Альфе работают специалисты. Только грустно, что они свой потенциал они тратят проработку очередных темных паттернов.
Альфа всё больше начинает походить на наркотик или секту: пока с ними вроде бы не все так страшно, а стоит задуматься об уходе или приостановить активность, так сразу появляются тонны услуг, которое кроме как через бота или поддержку не отключить, а для закрытия счета нужно ВЖУВУЮ идти в отделение.
В общем фу, не верю, что конверсию нельзя повысить БЕЗ использования dark UX
Страховки, оповещения и все остальное я через чат отключал спокойно. В офис никто не тащил. Даже когда кредит закрывал досрочно. С счетом для физ лиц не скажу, может и тянут. Но расчетный тоже закрывал онлайн
Люди, добавляющие видео на главной своего сайта и/или не дай бог приложения, должны гореть в аду.
До сих пор с теплотой в районе жопы вспоминаю тех гениев из Альфы, которые в свое время поставили видео с тюльпанами на домашний экран приложения.
Зная альфа-банк, статья должна называться 3 дизайн-решения как наебать клиента
И почему то я не удивлен, что идея с видео баннером была взята с сайта Apple 😁
Подскажите пожалуйста уважаемый банк, почему вы не платите уже 2 месяц деньги агентам которые привлекли вам клиентов
Невозможно дозвониться до поддержки. Пытаюсь второй день((
Приветствуем, Людмила!
Сейчас получаем много вопросов на горячей линии и в чате, поэтому отвечаем дольше. Извините, будем стараться работать быстрее.
Хотим разобраться и помочь, но нужно побольше деталей. Уже написали вам в личку.
Ребят, я час вишу на линии. Ну рили, так же нельзя