-
Задача:
В связи с постоянным приростом мобильного трафика на сайт Связного Банка, появилась необходимость обеспечить комфортное использование сайта не только с десктопов,
но и с телефонов, планшетов и других мобильных устройств. -
Решение:
Связной Банк — прогрессивный, динамичный и современный банк, всегда готовый идти в ногу со временем. Банку было предложено актуальное решение — адаптивный сайт, одинаково удобный в использовании со всех устройств выхода в интернет.
В рамках проекта было разработано:
основных разрешения
«Svyaznoybank.ru — уникальный по сложности проект. Мы сразу понимали,Иван Антипин руководитель группы разработчиков AGIMA
что традиционный подход здесь не сработает и предложили клиенту гибкую методологию управления проектом с выкупом часов и ранжированием приоритетов — это помогло сосредоточиться на самом важном: существенно сократить сроки разработки и не потерять в качестве».
Работа над проектом ведется итерационно. Раздел за разделом мы обновляем сайт,
что позволяет
оперативно отслеживать конверсию и реагировать на обратную связь, поступающую от клиентов.
Графика на главной странице сайта, на первый взгляд, одинакова на любом устройстве.
Но,
присмотревшись, вы увидите, что на мобильных девайсах часть контента сворачивается — благодаря этой
маленькой хитрости, ускоряется загрузка сайта и экономится трафик. Изображения не просто
адаптируются по размеру, но и подстраиваются по весу
под устройство.
Таблицы адаптируются под самые маленькие дисплеи, что позволяет пользователям
любых устройств
получить доступ к важной информации в любой момент. Строки и столбцы перестраиваются, и, в
результате, таблицы удобно просматривать при скроллинге.
Для обеспечения кросс-браузерности и кросс-платформенности, многие модули меню написаны на нативном JavaScript.
Usability тестирование
В рамках работы над данным проектом мы решили провести usability-тестирование сайта
с участием
клиентов банка. В течение нескольких дней специалисты AGIMA предлагали посетителям отделений банка
оценить удобство и прозрачность нового сайта.
Участники должны были выполнить несколько несложных заданий, к примеру:
«У вас есть 5000 рублей
наличными и мобильный телефон. Найдите на сайте ближайший банкомат, чтобы положить деньги на карту».
На этапе программирования выяснилось, что на некоторых смартфонах главное меню ведёт себя некорректно:
скрипт, отвечающий за перехват первого клика по кнопке меню и открытие выпадающего подменю, загружался и
срабатывал позже, чем пользователь нажимал её.
Для решения этой проблемы часть скриптов была
переписана на нативном JavaScript.
В результате, скорость реакции на действия пользователя возросла
как минимум вдвое.
«С самого начала стояла задача сделать сайт, который будет удобен и понятен разным аудиториям: розничным клиентам, юридическим лицам, контролирующим организациям и СМИ. Поэтому очень важно было сделать такую структуру и дизайн, чтобы любой человек мог в 2-3 клика найти нужную информацию.Марина Глущенко Начальник Управления маркетинговых коммуникаций и исследований, Связной Банк (ЗАО)
Как заказчик, заинтересованный в результате, мы активно участвовали в каждом этапе работ: от создания прототипов до согласования адаптивных макетов каждой страницы. Вся работа заняла более полугода ежедневного кропотливого труда,
и только благодаря эффективному взаимодействию внутри команды и с агентствами у нас получилось добиться отличного результата».
Техническая отладка и мультидевайсовое тестирование
Баг-лист проекта с легкой руки разработчиков был переименован сначала в Жук-лист, а затем в Жукопись. Среди скриншотов, снятых тестировщиками, периодически мелькали Битлз, Битлджус и суровый призыв "Будь мужуком!".
Сайт протестирован на 20 различных устройствах тестового набора AGIMA.
«Динамичное развитие, яркость и скорость – то, что всегда отличало Связной банкДина Тарасова Digital marketing manager Связной Банк
на рынке. Мы понимаем – чтобы держать пальму первенства, необходимо меняться быстро
и не тратить время на бесконечный долгострой. Мы поставили себе амбициозную цель выпустить первый в России адаптивный сайт банка, опередив конкурентов. И успешно справились с ней, работая с агентством AGIMA в одной команде».
