Как мы сделали главную страницу сайта Альфа-Банка в 7 раз быстрее

А ещё избавились от неработающего слайдера и уменьшили отказы на странице на 40%

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

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

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

Александр Есин,

Начальник управления развития интернет-ресурсов Альфа-Банка

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

Что важно: отказы на главной уже уменьшились на 40%, а переходы на продуктовые страницы выросли на 9%. Рассказываем, как нам это удалось.

Отказались от адаптивного дизайна

60% наших пользователей открывают сайт со смартфона — в этой ситуации странно было бы адаптировать десктопную версию под мобильные устройства. Поэтому мы сделали два разных дизайна: для десктопа и мобайла. Каждый — со своим сторителлингом и сценариями. Для этого у нас есть платформа, которая собирает страницы из виджетов под разные типы устройств, используя ASSR — Alfa Server Side Rendering (да, технические продукты у нас тоже «альфа»).

Вот как выглядит новая главная страница Альфа-Банка в мобайле

Заменили слайдер табами

Слайдеры на главной стали «золотым стандартом» для сайтов с большим количеством продуктов — и банков тоже. Казалось бы, скроль и выбирай нужное. Но наша статистика показывает: то, что отлично работает с картинками в Инстаграме, плохо перекладывается на сайт с продуктами. На старой главной мало кто добирался даже до второго слайда.

Как было раньше — со слайдером

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

Чтобы это исправить, мы решили перенести предложения в табы. Остановились на четырёх: попробовали сделать больше, но это хуже и для пользователей (слишком большой выбор), и для вёрстки. Табы работают! Если раньше второй слайд просматривали только 3%, то теперь — целых 35%.

Теперь главная с табами. Всё видно сразу

Собрали в одном блоке все сервисы, доступные не только нашим клиентам

Такие сервисы обычно разбросаны по всему сайту — пользователь может о них никогда не узнать. Вынесли все сервисы на главную в один блок: теперь там можно скачать Альфа-Мобайл, перевести деньги с карты на карту, посмотреть курсы валют и так далее.

Перенесли меню на мобайле в самый низ

Да, клиенты привыкли, что любимый «бургер» находится в верхнем левом углу, но где вы видели человека с таким огромным пальцем, чтобы дотянуться до меню на 6-дюймовом экране? Хоть Пентагон и подтвердил публикацию видео с НЛО, мы по-прежнему адаптируем сайт только под людей, поэтому сделали так:

Собрали все онлайн-заявки в одном месте

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

Протестировали новую главную на своих

Мы в Альфа-Банке тщательно проверяем все решения, прежде чем запускать их на пользователей. Поэтому сначала мы открыли новую главную для сотрудников банка — а их в Альфе более 20 тысяч. Так мы получили обратную связь от пользователей с самыми разными ожиданиями, устройствами и браузерами — а потом ещё раз провели UX-тестирование в нашей лаборатории. И вот что доработали:

  • Добавили первую версию поиска по сайту.
  • Убрали банкоматы и офисы из верхнего меню: пользователи сказали, что привыкли искать их внизу.
  • Добавили более явную кнопку «Онлайн-заявки» на десктопе.
  • Адаптировали вёрстку под планшеты.

  • Сделали меню более контрастным: некоторые пользователи не замечали его, потому что оно сливалось с контентом.
  • Доработали мелкие баги вёрстки и поведения некоторых элементов.

Оцените новую главную сами и расскажите, что вам понравилось, а что нет — так вы поможете нам доработать сайт и сделать его лучше. Писать можно на [email protected]

0
14 комментариев
Написать комментарий...
Zoibana
где вы видели человека с таким огромным пальцем, чтобы дотянуться до меню на 6-дюймовом экране?
Крестик закрытия всплывающего окна расположен в самой недоступной для пальца зоне
Главная кнока "оформить онлайн" расположена в самой недоступной для пальца зоне

П - последовательность

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

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

Ответить
Развернуть ветку
Евгений Лебедев

Вы это серьёзно? 25 балов на мобильной версии - это стало в 7 раз быстрее? 🤦‍♂️ А раньше главная вообще не открывалась? 🤔https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Falfabank.ru%2F&tab=mobile

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

Год разрабатывали, а перфоманс в лайтхаузе - 34. 

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

у циана вообще 10-15, и похер - занимают 95% видимости в поиске по недвижке, весь топ окупирвоан.

Херня эта все

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

Гугл теперь будет опускать такие страницы.

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

Он лет 5 назад заявил о занижении.
На монополистов в выдаче это никак не повлияло. Ну будет не 95% видимости, а 94.
Все остальное будут делить между собой сотни и тысячи их конкурентов

Ответить
Развернуть ветку
Daniel V. Thomas

С одной стороны, и материал хороший и улучшения масштабные - интересно и познавательно, надо больше таких и подробнее описывать процесс  :)

Но с другой, получается, что все было настолько плохо последние несколько лет? Если на 40% отказы сократили и второй слайд теперь смотрят в 10 раз больше юзеров (35%vs3%)?
А что последние несколько лет делали ответственные за сайт? И почему вообще имела место такая вопиющая ситуация? 

Как бы... если продукт был хорош, то улучшения на проценты, этакий fine tuning, вполне ожидаемы, а если аж на десятки процентов, это значит, что было... хреново, но всех устраивало? Или это скрывали? :)

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

А как сделали страницу быстрее я так и не понял =(
Где цифры? Было-стало? Ясно.

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

Сайт красивый, многие моменты проработаны очень качественно. Позвольте несколько замечаний (собственных впечатлений): 

1. Шрифт не нравится. Во-первых, он "не выделяется", а во-вторых производит какое-то отталкивающее впечатление. 
2. Ушел корпоративный стиль, из-за этого сайт смотрится хуже, чем версия, где были видео от Лебедева. Да, это лишь восприятие, конверсия может вырасти, но формирование бренда - тоже важная задача. 
3. Стиль визуализации не нравится. Кроме элементов с Ургантом - остальные, на мой взгляд, смотрятся слабовато (несовременно, малопривлекательно).
4. Много мелких замечаний по мобильной версии сайта (технического характера). Стоит протестировать на разных устройствах и убрать недочеты и ошибки. 
5. Сайт получился "музейным" - зашел, посмотрел, изучил, заполнил форму  - но не хватает какого-то импульса. Для сравнения зашел к "зеленым" - энергетически тянут к действиям - гораздо более сильный в этом контексте. 

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

Успехов во всех проектах! 

Ответить
Развернуть ветку
Евгений Середа

а зачем было отказываться от адаптивной версии? зачем тратится на поддержку несколько платформ (рисовать дизайны, верстать и вот это всё)? 

Ответить
Развернуть ветку
Евгений Тартаковский

Редакция: *выпускает репортаж о том, как людям тяжело в текущей ситуации, им нужны деньги и они соглашаются на условия микрозаймов.*

Альфа-Банк: Наш редизайн увеличил конверсию! Мы уменьшили отказы! Магия!

Автор, вы не думаете что рост метрик связан с текущей ситуацией в мире, а не с редизайном?

Ответить
Развернуть ветку
Игорь Самонов

Выглядит круто!

Ответить
Развернуть ветку
Алексей Фролов

а почему "Расcчитать кредит наличными" - "с" русская и потом "си" английская? О_о

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