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

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

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

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

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

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

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

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

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

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

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

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

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

• Адаптировали вёрстку под планшеты.

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

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