Как команда банка сделала сайт 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) и дизайнеры. Конкретные требования читайте на странице с вакансиями.

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

22 Сентября, 2022

Исследования в Газпромбанке: какие инструменты делают цифровые продукты удобными

UX-аудит, дизайн-мышление и другие способы сделать клиентский опыт лучше.

Читать

20 Сентября, 2022

Performance Management: платформа, которая помогла увеличить продажи на 12%

Как в банке разработали автоматизированную систему Performance Management

Читать

13 Сентября, 2022

Как запустить DevOps-конвейер на полную мощность

Head of engineering о том, какие 5 шагов помогут сделать команды независимыми, а запуски - быстрыми.

Читать

25 Августа, 2022

DevRel: команда, которая делает жизнь разработчиков лучше

Для чего в Газпромбанке появилась команда DevRel

Читать

3 Августа, 2022

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

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

Читать

6 Июля, 2022

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

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

Читать