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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените новую главную сами и расскажите, что вам понравилось, а что нет — так вы поможете нам доработать сайт и сделать его лучше. Писать можно на sitefb@alfabank.ru

2525
15 комментариев

где вы видели человека с таким огромным пальцем, чтобы дотянуться до меню на 6-дюймовом экране?

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

Главная кнока "оформить онлайн" расположена в самой недоступной для пальца зоне

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

11
Ответить

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

2
Ответить

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

2
Ответить

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

1
Ответить

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

Херня эта все

1
Ответить

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

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

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

1
Ответить

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

Ответить