Ребрендинг и usability-оптимизация сайта ОАО АКБ «РОСБАНК»
Веб-проект, над которым работали 20 человек и 3 специализированных агентства.
РЕЗЮМЕ
  |
Создать новый сайт для банка, который обслуживает 3 миллиона клиентов, — задача не из тривиальных. Интернет-ресурс, как «единое окно», должен отвечать требованиям самых разных групп потребителей — как частных, так и корпоративных клиентов. Должен быть удобным, технологичным, стильным. |
Как учесть все факторы? Это осуществимо, если каждый этап разработки выполняет веб-компания с профильной специализацией.
Коротко о бизнес-задачах
Новый сайт создавался в контексте объединения Росбанка и BSGV и ребрендинга Росбанка в рамках программы консолидации российских активов международной финансовой Группой Societe Generale.
За свои 150 лет истории группе Societe Generale не раз приходилось проводить ребрендинг и решать задачу адаптации своих стандартов к местным условиям — сегодня банки группы находятся в 85 различных странах мира.
 BRD - Groupe Société Générale (Румыния) |  Komerční Banka (Чешская республика) |  Geniki Bank (Греция) |
В апреле 2011 года Росбанк представил широкой общественности свой новый логотип, частью которого стал всемирно известный красно-черный квадрат Societe Generale. В июле этого же года был запущен новый сайт объединенного Росбанка. Этому событию предшествовали семь месяцев кропотливой работы.
Ключевые изменения
Для веб-ресурса была выбрана концепция сайта-витрины, на котором есть возможность сравнить продукты и услуги и немедленно оформить заявку.
Адаптация фирменного стиля
Новый сайт Росбанка отличается цветными плашками для маркировки продуктов, цветными сайдбарами, прорисованными иконками. Здесь много динамических и интерактивных элементов: разворачивающихся меню, табов, всплывающих описаний и подсказок.
 |  |  |
Дизайнеры приложили максимум усилий, чтобы привести оформление сайта в соответствие с корпоративной стилистикой Группы Societe Generale, но не разочаровать клиентов, лояльных бренду Росбанка.
Оптимизация системы навигации
В новой версии сайта отказались от выпадающих меню, заменив их на аналог интерфейса поисковой машины. Теперь пользователь выбирает продукт по короткому списку опций и получает выдачу, аналогично «Яндексу» или Google. Карта сайта также была оптимизирована, а число уровней меню сокращено.
 Пластиковые карты в выпадающем меню |  Интерфейс «поисковика» для подбора карт |
Это позволило эффективно отобразить все продуктовое предложение банка. Оно обширное и структурировано как трехуровневое (иногда пяти или шести-уровневое) дерево. Например, (1) «Частным лицам» - (2) «Сбережения» - (3) «Вклады» - (4) «Оптимальный».
В предыдущей версии сайта уровни были представлены вкладками и выпадающим списком. Хотя перейти на любую страницу в этом меню чаще всего можно было в два клика, поиск нужных продуктов занимал много времени. Поисковый интерфейс ускорил этот процесс.
Разгрузка переполненных страниц
Банковские услуги имеют массу опций, и их описания занимают страницы текста. Даже гипертекстовые страницы иногда оказывались чересчур нагруженными. Требовалась система размещения контента, которая позволила бы пользователям кликать на искомую информацию интуитивно, почти не вчитываясь в гиперссылки.
 Страница «Вклады» перегружена ссылками |  Та же страница на новом сайте – со свернутым списком |
- Контент страниц с большим объемом информации разделили на несколько частей.
- Списки ссылок свернули: популярное - в видимой зоне, остальное «под катом».
- Всю вспомогательную информацию вынесли на стандартную плашку в сайдбаре.
Оптимизация навигации, структурирование контента на страницах и множество других полезных изменений значительно ускорили поиск информации на новом сайте. Это, в свою очередь, снижает отказы, увеличивает время пребывания посетителя на сайте и, в конечном итоге, конверсию посетителей в клиентов.
Ход проекта
Прототип. В проект создания нового сайта объединенного банка в декабре 2010 г. первой включилась UsabilityLab. Она выиграла тендер на аудит и проектирование интерфейса.
Специалисты компании провели исследование потребностей бизнеса и аудитории, используя интервью с членами рабочей группы и клиентами банка, а также онлайн опрос посетителей сайта. На основе полученных данных в UsabilityLab приступили к прототипированию нового сайта. К концу марта 2011 г. был готов первый прототип с низкой детализацией, который стал основой технического задания:
Наступил этап разработки. Эту часть проекта выполнил давний партнер обоих банков — компания BINN. Годом ранее BINN перенесла сайт Росбанка на систему управления S.Builder и, кроме того, осуществляла разработку и поддержку сайта BSGV. Сильная сторона BINN – программирование и веб-интеграция.
Дизайн ключевых страниц сайта выполнило креативное агентство Creative People. Арт-директором проекта от агентства выступил Андрей Щепкин, креативным директором – Александр Ковальский. За 10 дней агентство подготовило концепцию дизайна, представив макеты в двух вариантах.
 |  |
Война за usability: похожие в общих чертах варианты дизайна сильно отличаются оформлением мелких элементов
На основе дизайна в UsabilityLab разработали детализированный динамический прототип, мини-сайт из 35 страниц контента и произвели его тестирование с помощью клиентов Росбанка. В ходе индивидуальных сессий пользователям предложили жизненные ситуации и просили их найти нужную информацию на сайте. Например, «Вы планируете купить автомобиль. Подберите автокредит, экспресс-кредит или нецелевой потребкредит с самыми выгодными условиями». Если пользователь испытывал затруднения, в интерфейс вносились коррективы.
Разработка. Сотрудники BINN выполнили верстку, программирование функциональных модулей, технический дизайн, настройку, функциональное и нагрузочное тестирование.
На проекте использовали многосайтовость CMS S.Builder: пока создавался новый интерфейс, обновление баз данных текущего сайта не останавливалось. По ходу работы вносились и коррективы — как в части размещения конкретных элементов контента, так и сервисов сайта, таких как поиск банкоматов, робот по выбору продуктов для кросс-продаж и так далее. На этом этапе в консультации активно включались все три агентства: и проектировщики UsabilityLab, и дизайнеры CreativePeople, и программисты BINN.
В результате к моменту запуска сайт был существенно доработан сверх того, что успели предусмотреть на этапе прототипа. Интерфейс поисковых сервисов был упрощен и унифицирован. Запланированные в техзадании обычные новостные ленты и одноуровневые меню заменили на динамические, с несколькими перещелкиваемыми вкладками и «катом».
Ajax-скрипты экономят место в видимой
зоне и делают сайт более интерактивным.
Многие сервисы сайта получили апгрейды. Например, банкоматы в Москве теперь фильтруются по ближайшей станции метро и району города, и их стало легче найти с мобильных устройств без подгрузки карты. Модуль автоопределения региона стал работать на новой, автоматически обновляемой базе IP-адресов, поэтому пользователь, заходя на сайт, увидит свой регион и соответствующую контактную информацию.
Поиск по станции метро проходит быстрее,
чем по Яндекс.Картам
При верстке нового сайта необходимо было учесть привычки посетителей «осторожного» типа, обеспечив корректность работы в Internet Explorer 6.0. Поддержка устаревшей версии браузера усложнила разработку, но была успешно реализована.
В список технических требований к сайту вошли удобство администрирования, отчуждаемость CMS и возможность разработки нового функционала без обращения к сторонним подрядчикам. Система управления S.Builder, разработанная BINN и опробованная Росбанком на предыдущих проектах, полностью удовлетворяла этим условиям.
По окончанию разработки сайт тестировали на наличие ошибок, скорость работы под нагрузкой, валидность html-верстки по стандартам W3C и устойчивость к хакерским атакам. К 18 июля новый сайт Росбанка успешно прошел все тесты и был запущен в эксплуатацию.
Итоги
С точки зрения организации проект заметно выделяется на фоне аналогов. Разработчики учитывали требования различных сторон банковского процесса: не только подразделений маркетинга, но и профильных отделов — розничного и корпоративного, а также служб IT, безопасности и менеджмента. Все мнения были систематизированы и приведены к консенсусу. Интерфейс и функционал сайта выполнены с учетом пожеланий клиента.
И, главная особенность, все три интернет-агентства сумели скоординироваться и сообща довести продукт до высокого уровня качества с точки зрения usability, технической составляющей и дизайна.
«Помогали usability-чемпионы»
 | Дмитрий Силаев, менеджер по работе с ключевыми клиентами UsabilityLab «Поначалу была информационная перегрузка – очень много информации в разных форматах от многочисленных участников процесса со стороны клиента. Сориентироваться в объеме информации помогали usability-чемпионы. Так мы называем сотрудников заказчика, которые подробно вникают в процессы и реально заинтересованы в повышении качества сайта. В Росбанке нашими чемпионами были Юлия Денисова и Алексей Ломоносов». |
«Логически объяснить отрисованный элемент»
 | Александр Ковальский, креативный директор CreativePeople «На презентациях (особенно с большим количеством участников) много неудобных вопросов, каждый элемент дизайна часто подвергается сомнению и детально обсуждается всеми участниками встречи. От сомнений заказчика не избавиться, но логика, четкое обоснование расположения каждого элемента и понятные аргументы, помогают уйти от обсуждения в формате «нравится/не нравится» и согласовать концепцию в максимально эффективном варианте». |
«Исключить «испорченный телефон»
 | Заурбек Шехинаев, руководитель проекта BINN «В команде заказчика много специалистов, много аргументированных мнений, с каждым приходилось работать индивидуально, на что у меня зачастую уходило до 4-5 часов в день. Но это было необходимо, чтобы исключить «испорченный телефон» и прийти к единому мнению до того, как списки изменений станут рекомендацией к действию исполнителям. Если координатор – это единственное контактное лицо как для заказчика, так и для команды разработчиков, то проект никогда не превратится в крыловскую басню с лебедем, раком и щукой». |