Адаптивный сайт «Связного банка»

www.svyaznoybank.ru
  • Задача:

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

  • Решение:

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


В рамках проекта было разработано:

Макеты под четыре
основных разрешения
Более двухсот пятидесяти прототипов
Восемьдесят три уникальные страницы сайта
«Svyaznoybank.ru — уникальный по сложности проект. Мы сразу понимали,
что традиционный подход здесь не сработает и предложили клиенту гибкую методологию управления проектом с выкупом часов и ранжированием приоритетов — это помогло сосредоточиться на самом важном: существенно сократить сроки разработки и не потерять в качестве».
Иван Антипин руководитель группы разработчиков AGIMA

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


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


143 Кб 84 Кб

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

Для обеспечения кросс-браузерности и кросс-платформенности, многие модули меню написаны на нативном JavaScript.

Usability тестирование

В рамках работы над данным проектом мы решили провести usability-тестирование сайта
с участием клиентов банка. В течение нескольких дней специалисты AGIMA предлагали посетителям отделений банка оценить удобство и прозрачность нового сайта.

Три города
Респондентов
Ключевых параметра
Cценариев для тестирования

Участники должны были выполнить несколько несложных заданий, к примеру:
«У вас есть 5000 рублей наличными и мобильный телефон. Найдите на сайте ближайший банкомат, чтобы положить деньги на карту».

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

«С самого начала стояла задача сделать сайт, который будет удобен и понятен разным аудиториям: розничным клиентам, юридическим лицам, контролирующим организациям и СМИ. Поэтому очень важно было сделать такую структуру и дизайн, чтобы любой человек мог в 2-3 клика найти нужную информацию.

Как заказчик, заинтересованный в результате, мы активно участвовали в каждом этапе работ: от создания прототипов до согласования адаптивных макетов каждой страницы. Вся работа заняла более полугода ежедневного кропотливого труда,
и только благодаря эффективному взаимодействию внутри команды и с агентствами у нас получилось добиться отличного результата».
Марина Глущенко Начальник Управления маркетинговых коммуникаций и исследований, Связной Банк (ЗАО)

Техническая отладка и мультидевайсовое тестирование

Баг-лист проекта с легкой руки разработчиков был переименован сначала в Жук-лист, а затем в Жукопись. Среди скриншотов, снятых тестировщиками, периодически мелькали Битлз, Битлджус и суровый призыв "Будь мужуком!".

Сайт протестирован на 20 различных устройствах тестового набора AGIMA.

«Динамичное развитие, яркость и скорость – то, что всегда отличало Связной банк
на рынке. Мы понимаем – чтобы держать пальму первенства, необходимо меняться быстро
и не тратить время на бесконечный долгострой. Мы поставили себе амбициозную цель выпустить первый в России адаптивный сайт банка, опередив конкурентов. И успешно справились с ней, работая с агентством AGIMA в одной команде».
Дина Тарасова Digital marketing manager Связной Банк