Как команда банка сделала сайт Gazprombank.ru удобнее и современнее
На этой странице

Увеличили количество экранов, под которые адаптируется сайт

Обновили функции по управлению блоками

Заменили карусель на три отдельных баннера

Сделали главный экран информативнее и удобнее

Переработали меню навигации

Сделали сайт современнее



Тэги
ДБО UX разработка
Как команда банка сделала сайт Gazprombank.ru удобнее и современнее

Газпромбанк постоянно развивает свои продукты. Недавно разработчики обновили приложение — объединили платежи и переводы в один раздел и сделали оплату по QR-коду проще. А в апреле запустили новую версию сайта. Что в нем поменяли и как обновления отразились на показателях, рассказали руководитель веб-проектов Руслан Рамазанов и главный дизайнер продуктового дизайна Олег Фогель.

Увеличили количество экранов, под которые адаптируется сайт

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

Раньше адаптивная верстка сайта включала три брейкпоинта: десктоп, планшет и мобильный. Это контрольные точки, которые определяют, когда макет должен изменить ширину и подстроиться под особенности другого экрана. Теперь брейкпоинтов шесть: два для мобильных устройств, один для планшета и три для десктопа. Такое решение занимает больше времени на разработку, но при этом облегчает пользователям восприятие контента.

По статистике, 70–75% пользователей заходят на сайт Газпромбанка с мобильных устройств. Чтобы им было удобно читать и находить нужную информацию со смартфона, мы решили создать отдельную мобильную версию сайта. Теперь макет не просто растягивается, а перестраивается под определенный тип экрана.

Руслан Рамазанов

Начальник Управления веб-проектов.

Обновили функции по управлению блоками

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

Чтобы специалисты могли проверять гипотезы без привлечения разработчиков, команда добавила в консоль администратора функциональность проведения простых А/В-тестов. Например, они помогают узнать, на какой призыв к действию, или CTA (call to action), больше кликают: «Получить кредит» или «Оставить заявку на кредит».

Чтобы проверить гипотезу, сотрудник создает два разных блока. Для первого нажимает «Отображать на версии А», для второго — «Отображать на версии В». Далее аналитики подсчитывают результаты теста и говорят, что лучше конвертируется.

Руслан Рамазанов

Начальник Управления веб-проектов.

Заменили карусель на три отдельных баннера

Раньше пользователи видели на экране главной страницы баннер, который состоял из десяти элементов. Каждый рекламный формат занимал всю ширину экрана. Чтобы увидеть другие предложения, надо было прокрутить карусель или подождать 5 секунд, пока элемент не переключится автоматически.

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

Чтобы пользователи видели сразу все предложения, карусель заменили на три отдельных баннера. Они стали меньше по размеру, легче и информативнее.

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

Так теперь выглядят баннеры на экране главной страницы

Сделали главный экран информативнее и удобнее

Специалисты переработали структуру главного экрана:

  • Вынесли востребованные продукты в раздел «Популярное», раньше их надо было искать в категориях.
  • Добавили баннеры, которые ведут на страницы с важной информацией, например на лендинг с ответами на главные вопросы о работе банка.
  • Добавили блоки о других продуктах и партнерских проектах — мобильном операторе Газпром Мобайл и подписке Огонь.

Раздел «Популярное» на экране главной страницы

Блок с партнерскими продуктами и проектами

Переработали меню навигации

Раньше, чтобы открыть счет или подать заявку на кредит, пользователю нужно было зайти в категорию, выбрать продукт и лишь потом перейти к оформлению. Команда упростила этот путь до двух кликов. Теперь надо нажать на кнопку «Стать клиентом» и выбрать в меню нужный продукт.

Результаты UX-исследования показали, что количество страниц, которые просматривают пользователи за один раз, уменьшилось с 5–6 до 2–3. Это значит, им стало проще и быстрее находить нужные продукты и переходить к их оформлению.

Руслан Рамазанов

Начальник Управления веб-проектов.

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

Теперь в мобильной версии клиенты могут выбрать нужный продукт за пару кликов

Сделали сайт современнее

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

Что дальше

Текущие обновления — это начало. В планах, например, переработать продуктовые и разводящие страницы. Чтобы реализовать все идеи, нужны frontend-разработчики на React, TypeScript, Next.js, мобильные разработчики под iOS (Swift) и Android (Kotlin) и дизайнеры. Конкретные требования читайте на странице с вакансиями.

Другие статьи по теме

3 Августа, 2022

Не трогайте разработчиков. Отстаньте. Просто не беспокойте

Победитель Highload++ рассказывает, как трансформировался отдел разработки.

Читать

6 Июля, 2022

Как комьюнити разработчиков Газпромбанка помогает сотрудникам в работе и общении

Рассказываем, зачем нужно профессиональное сообщество и какие инструменты разработчики используют для общения.

Читать

23 Мая, 2022

Java школа: как в Газпромбанке учат разработчиков

В начале 2022 года в Газпромбанке стартовала Java школа. Ее преподаватель и студент рассказывают как это было.

Читать

19 Мая, 2022

Фулстек-разработка: идти или не идти. Опыт тимлида

Разбираемся, почему в финтехе редко ищут фулстек-разработчиков и в каких ситуациях им быть все-таки выгодно.

Читать

24 Февраля, 2022

Как черновики в мобильном банке и увеличили количество заявок на кредитную карту

Рассказываем, сколько клиентов вернула Газпромбанку новая функция и как ее планируют использовать в будущем.

Читать

15 Февраля, 2022

Платформы Low-code и No-code: что это такое и зачем они нужны

Рассказываем, как развиваются Low-code и No-code платформы в финтехе и Газпромбанке.

Читать