До недавнего времени сайт vtb.ru вполне отвечал требованиям банка ВТБ. Но после присоединения Банка Москвы и ВТБ24 он стал охватывать только небольшой сегмент разросшегося массива продуктов и услуг. Собственные сайты Банка Москвы и ВТБ24 должны были со временем прекратить свое существование. Поэтому нам нужно было придумать, как соединить всю информацию, чтобы пользователь четко понимал, что происходит у него на дисплее. В этом посте мы расскажем, как решили эту задачу и пришли к обновленному vtb.ru, запущенному в начале года.
Команда цифрового бизнеса ВТБ совместно со специалистами компании USABILITYLAB проводила исследования, сводила требования пользователей и сотрудников банка, формировала логику нового сайта и разрабатывала макеты страниц. Специалисты банка преображали макеты в интерфейсы: анализировали UX прототипы, обсуждали решения, все согласовывали и взаимодействовали с дизайнерами и техническими специалистами.
Но обо всем по порядку. Вот как мы создавали новый официальный сайт ВТБ — единую точку доступа ко всем продуктам банка.
Личный опыт — это главное
Любой крупный банк состоит из множества подразделений с различной функциональностью. Информация о них должна быть на сайте, поэтому нужно было обязательно учесть мнение коллег. План вроде бы простой: проводим встречи, собираем фидбэк, делаем сайт. Но в итоге остаемся с россыпью блоков, которые едва ли можно связать воедино.
Как решить проблему? Изучить мнения сотрудников и пользователей. Мы провели более 100 глубинных интервью с клиентами и сотрудниками банка. Полученные сведения оказались чрезвычайно полезны — подкрепленные нашей оценкой, они стали фундаментом для поиска наилучшего решения. По структуре сайта мы общались в основном с сотрудниками банка. А структуру и наполнение отдельных страниц нам помогали определять посетители сайта. Они рассказали, зачем приходят на сайт, что ищут, чего им не хватает.
Общение с коллегами и клиентами меняло наши представления. Сначала мы планировали объединить разделы для среднего и крупного бизнеса в один под названием «Среднему и крупному бизнесу» (или «Корпоративному бизнесу»). И там же для простоты поместить информацию для финансовых организаций. После встреч с коллегами и клиентами из «корпоративного бизнеса» стало понятно, что в такой структуре можно легко потеряться. В итоге мы ушли от начального плана и разнесли разделы в отдельные блоки.
Или вот пример от клиентов. Приходят на наш сайт люди, которые хотят взять небольшой кредит. Видят, что минимальная сумма составляет 100 тысяч рублей, и уходят — не нужно им столько денег. Но ведь многим из таких посетителей могла бы подойти кредитная карта, просто они об этом не знают. Поэтому если на новом сайте посетитель введет в калькулятор кредита наличными на сумму меньше 100 тысяч, то мы покажем ему предложение кредитной карты.
Из исследования мы также узнали, что на старой версии сайта начинающим предпринимателям было трудно найти тарифы на обслуживание и разобраться в сложных документах. На новом сайте на первом экране раздела «Малый бизнес» мы дважды продублировали ссылку на тарифы, а сами тарифы теперь показываем в виде понятной таблицы.
Еще один пример, на этот раз из области Private Banking. Мы выяснили, что многие клиенты из этого сегмента не понимали и не использовали преимущества премиального обслуживания, потому что на старом сайте эта информация была представлена незаметно. На новом сайте мы разделили все услуги для таких клиентов на четыре категории и сделали на них крупные ссылки. На скриншоте ниже обведена одна из них — «Семейный офис».
Помимо интервью мы проводили карточные сортировки, чтобы сформировать или скорректировать структуру некоторых разделов. Чтобы проверить нашу структуру раздела “Акционерам и инвесторам“, мы нарезали карточек с названиями разделов и попросили реальных держателей акций банка составить из них меню сайта. Разделение по группам совпало! Это была отличная новость.
Прорабатываем доступность
Наш новый сайт реализован на платформе Sitecore Web CMS и насчитывает несколько сотен страниц. Если рисовать макеты каждой из них, да еще делать это единообразно, можно потратить уйму времени. Так что для облегчения этой задачи и обеспечения масштабируемости в будущем мы решили создать шаблоны для всех типовых страниц.
Начали эту работу с систематизации дизайна всех страниц старого сайта ВТБ, сайтов Банка Москвы, ВТБ24 и всех приложенных документов. В итоге получилось 18 типов страниц: 7 для частных лиц, 6 для корпоративных клиентов и 5 в разделах для акционеров, инвесторов, аналитиков и прессы. Создали 18 шаблонов.
В них можно поместить любую страницу старого или нового сайта.
Один из шаблонов был разработан с учетом не только удобства пользователей, но и требований SEO — это шаблон «разводящей страницы» из разделов для юридических лиц. Изначально мы планировали, что переключаться между подразделами внутри одного раздела пользователь будет при помощи верхнего выпадающего меню. Но чтобы продукты банка хорошо индексировались поисковиками, ссылки на них нужно собрать на отдельной странице.
Макеты и поиск компромиссов
Интерфейсы нового сайта начинались с набросков, которые мы постепенно меняли по результатам исследований и внутренних обсуждений.
Сначала на странице для малого бизнеса мы хотели сделать фильтр карточек с описаниями продуктов банка в основной части экрана. Но после очередной серии интервью с пользователями поняли, что им в первую очередь необходима информация об открытии счета в банке: тариф, набор необходимых документов и т.п. Это мы и разместили на первой странице раздела вместо того, что собирались ранее.
Много обсуждений вызвал, конечно же, макет главной страницы. Изначально было три концепции: главная страница как обложка сайта, главная страница как витрина продуктов и более привычный для корпоративных сайтов вариант с баннером в верхней части, на котором мы в итоге остановились.
Мы выбрали концепцию с крупным баннером по двум причинам. Во-первых, это обеспечивало преемственность с сайтом Банка Москвы и ВТБ24, что было важно для клиентов этих банков. Во-вторых, это было проверенное решение с точки зрения продвижения ключевых продуктов банка — оно давно доказало свою эффективность.
Блок «Продукты на все случаи жизни» создан по концепции «блока комплексных решений» — удобной витрины продуктов банка. Нечто подобное есть на многих внутренних страницах сайта. Но только на главной странице блок полностью воплощает наш изначальный замысел: показывать продукты банка через призму жизненных задач посетителей сайта, которые мы определили в результате интервью (например, «накопить большую сумму»).
В дальнейшем при помощи платформы Sitecore мы планируем полностью персонализировать содержимое главной страницы сайта для каждого конкретного пользователя.
Подготовительный этап к созданию сайта — анализ требований разных сторон, разработка макетов, согласования, дизайн — занял полтора года, с начала 2016 года до середины 2017. Еще несколько месяцев заняла разработка, и в январе 2018 года новый сайт был запущен.
