Хабрахабр

Как упаковать три больших банка в один сайт

До недавнего времени сайт vtb.ru вполне отвечал требованиям банка ВТБ. Но после присоединения Банка Москвы и ВТБ24 он стал охватывать только небольшой сегмент разросшегося массива продуктов и услуг. Собственные сайты Банка Москвы и ВТБ24 должны были со временем прекратить свое существование. Поэтому нам нужно было придумать, как соединить всю информацию, чтобы пользователь четко понимал, что происходит у него на дисплее. В этом посте мы расскажем, как решили эту задачу и пришли к обновленному vtb.ru, запущенному в начале года.

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

Вот как мы создавали новый официальный сайт ВТБ — единую точку доступа ко всем продуктам банка. Но обо всем по порядку.

Личный опыт — это главное

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

Изучить мнения сотрудников и пользователей. Как решить проблему? Полученные сведения оказались чрезвычайно полезны — подкрепленные нашей оценкой, они стали фундаментом для поиска наилучшего решения. Мы провели более 100 глубинных интервью с клиентами и сотрудниками банка. А структуру и наполнение отдельных страниц нам помогали определять посетители сайта. По структуре сайта мы общались в основном с сотрудниками банка. Они рассказали, зачем приходят на сайт, что ищут, чего им не хватает.

Сначала мы планировали объединить разделы для среднего и крупного бизнеса в один под названием «Среднему и крупному бизнесу» (или «Корпоративному бизнесу»). Общение с коллегами и клиентами меняло наши представления. После встреч с коллегами и клиентами из «корпоративного бизнеса» стало понятно, что в такой структуре можно легко потеряться. И там же для простоты поместить информацию для финансовых организаций. В итоге мы ушли от начального плана и разнесли разделы в отдельные блоки.

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


Если клиент введет в кредитный калькулятор сумму меньше 100 тысяч, то увидит предложение оформить кредитную карту.

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

Переходы на страницу с тарифами на скриншоте обведены красной рамкой.
Две страницы для малого бизнеса на новом сайте: главная страница раздела и страница с тарифами.

Мы выяснили, что многие клиенты из этого сегмента не понимали и не использовали преимущества премиального обслуживания, потому что на старом сайте эта информация была представлена незаметно. Еще один пример, на этот раз из области Private Banking. На скриншоте ниже обведена одна из них — «Семейный офис». На новом сайте мы разделили все услуги для таких клиентов на четыре категории и сделали на них крупные ссылки.


Старая и новая версии страницы для клиентов Private Banking.

Чтобы проверить нашу структуру раздела “Акционерам и инвесторам“, мы нарезали карточек с названиями разделов и попросили реальных держателей акций банка составить из них меню сайта. Помимо интервью мы проводили карточные сортировки, чтобы сформировать или скорректировать структуру некоторых разделов. Это была отличная новость. Разделение по группам совпало!


Карточная сортировка для проверки структуры раздела «Акционерам»

Прорабатываем доступность

При создании сайта мы учитывали, что им будут пользоваться люди с ограниченными возможностями. Слабовидящие пользователи могут увеличить масштаб до 500% без появления горизонтальной прокрутки, и при этом сайт будет отображаться корректно (руководство по обеспечению доступности WCAG требует обеспечить беспроблемное масштабирование до 200%).


Главная страница сайта при масштабе 400%

Ширина строки не превышает 80 символов, как рекомендует WCAG. Все тексты на сайте набраны крупными и контрастными шрифтами: размер основного текста — 15px, размер заголовков — 23px.

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


Контрастные красные кнопки на сайте ВТБ

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


Отображение сайта с повышенной контрастностью шрифта, подчеркнутыми ссылками и увеличенным межстрочным расстоянием

Они озвучивают то, что выведено на экран пользователя. Чтобы сайт был доступен людям с серьезными проблемами со зрением, мы обеспечили корректную работу сайта с программами экранного доступа.


Фрагмент документа с разметкой последовательности чтения на макете одной из внутренних страниц сайта

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

Шаблонизация

Наш новый сайт реализован на платформе Sitecore Web CMS и насчитывает несколько сотен страниц. Если рисовать макеты каждой из них, да еще делать это единообразно, можно потратить уйму времени. Так что для облегчения этой задачи и обеспечения масштабируемости в будущем мы решили создать шаблоны для всех типовых страниц.

В итоге получилось 18 типов страниц: 7 для частных лиц, 6 для корпоративных клиентов и 5 в разделах для акционеров, инвесторов, аналитиков и прессы. Начали эту работу с систематизации дизайна всех страниц старого сайта ВТБ, сайтов Банка Москвы, ВТБ24 и всех приложенных документов. Создали 18 шаблонов.

В них можно поместить любую страницу старого или нового сайта.

Длина страницы может меняться в зависимости от количества и характера контента.
Шаблон «Продукт с преимуществами» (слева) и его реализация на сайте (в центре и справа).

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


Пример шаблона «разводящей» страницы, на которой перечислены основные услуги, связанные с расчетным обслуживанием.

Макеты и поиск компромиссов

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

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


Страница «Малому бизнесу»: две промежуточные концепции и конечная реализация на сайте

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


Первые, еще не детализированные, концепции главной страницы сайта

Во-первых, это обеспечивало преемственность с сайтом Банка Москвы и ВТБ24, что было важно для клиентов этих банков. Мы выбрали концепцию с крупным баннером по двум причинам. Во-вторых, это было проверенное решение с точки зрения продвижения ключевых продуктов банка — оно давно доказало свою эффективность.

Нечто подобное есть на многих внутренних страницах сайта. Блок «Продукты на все случаи жизни» создан по концепции «блока комплексных решений» — удобной витрины продуктов банка. Но только на главной странице блок полностью воплощает наш изначальный замысел: показывать продукты банка через призму жизненных задач посетителей сайта, которые мы определили в результате интервью (например, «накопить большую сумму»).


Блок «Продукты на все случаи жизни» на главной странице сайта

В дальнейшем при помощи платформы Sitecore мы планируем полностью персонализировать содержимое главной страницы сайта для каждого конкретного пользователя.

Еще несколько месяцев заняла разработка, и в январе 2018 года новый сайт был запущен. Подготовительный этап к созданию сайта — анализ требований разных сторон, разработка макетов, согласования, дизайн — занял полтора года, с начала 2016 года до середины 2017.


Лог обсуждения проекта: 109 тем, 1199 комментариев, 417 файлов

А пока ждем ваших комментариев. В следующих статьях мы планируем рассказать о технической стороне вопроса: реализации сайта при помощи Sitecore Web CMS и персонализации контента.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть