основная задача сайта банка — предоставлять необходимые сервисы клиентам и доносить миссию бренда. на проекте по редизайну сайта Райффайзенбанка нашей целью было обновить внешний вид и добавить мобильную версию для удобства клиентов.
для бизнеса — переработать структуру для более удобного добавления новых страниц и создать гибкий сервис, который легко адаптируется к потребностям клиентов.
в этом проекте нашей главной целью было упростить жизнь нашим клиентам и повысить эффективность сайта, как канала продаж. мы сделали особый акцент на мобильной версии сайта. доступный со смартфона, сайт всегда под рукой — удобно найти информацию, получить сервис, оформить заявку и пообщаться с банком в онлайн-чате.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
проблемы и задачи
- страницы продуктов не отражали полностью их преимуществ, у сайта сложная структура
- стоит больше внимания уделить представлению продуктов и сервисов, навести порядок в навигации
- сайт не отвечает потребностям развития бизнеса, отсутствует онлайн-оффлайн связь бренда
- предстоит обновить внешний вид сайта, сделать его более гибким для будущих изменений и добавления новых страниц
исследования и аналитика
- из отчетов мы выяснили ux-оценку текущего сайта, портреты и жизненный стиль клиентов, конкурентную оценку за год
- сравнили навигацию и продуктовые страницы разных банков. пришли к типовым группировкам, чтобы пользователя было легче отличить продукт от сервиса — ранее с этим возникали проблемы
Навигационное меню по результатам карточной сортировки. Подробнее о методе.
сценарии и проектирование
мы двигались от сценариев использования сервиса. выделили основные, сформировали структуру сайта и его типовые страницы — разводная, продукт, заявка. целью было создать гибкий фреймворк.
безусловно, некоторые гипотезы не подтвердились, главным образом речь шла о мобильном отображении шаблона сайта. адаптивность — удобное и изящное решение, однако оно накладывает определенные ограничения на структуру и визуальную составляющую, поэтому перед запуском мы еще раз прошлись по всем разделам и совместно с aic доработали некоторые страницы.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
затем мы спроектировали единую структуру для всех продуктовых страниц, сформировали базовые элементы и правила, на которых будет строиться интерфейс.
мы хотели оживить сайт, поэтому интегрировали в интерфейс удачные рекламные ролики и баннеры, которые уже были у банка.
Промо-ролики из других рекламных каналов подготавливались для сайта.
фейслифтинг сайта приносит плоды. сайтом стало проще пользоваться, клиентам легче получить необходимый сервис из-за улучшения навигации и структуры представления контента. им нравится общаться с нами в онлайн-чате, доступ к которому теперь есть на каждой странице, независимо от места нахождения клиента. уровень удовлетворенности в этом канале на 10 пп выше по сравнению с голосовой информационной поддержкой. мы продолжаем работу в контексте улучшения юзабилити.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
новый подход даёт нам значимый рост конверсии
детали на примере ипотеки
как было
все продуктовые страницы визуально разнородные. невозможно эффективно сравнить детальную информацию о продуктах. также это не способствует доверию пользователей. отсутствует мобильная версия.
Сравните две страницы продуктов из раздела «Ипотека» на старой версии сайта
оказалось при подготовке контента новых страниц не учитывались уже имеющиеся. мы рассматривали разные решения этой проблемы и пришли к неожиданному решению — шаблон страниц в ppt.
в шаблоне указаны все возможные блоки продуктовой страницы и правила их наполнения. продуктолог заполняет его при подготовке контента для новой страницы. шаблон идентичен компонентам, которые забирали в работу дизайнеры (в sketch) и разработчики (заверстанные части). тем самым мы дали инструменты для каждого участника процесса.
новая система подготовки контента помогает нам максимально быстро запускать продукты. фактически перед запуском у нас уже есть понимание, как будет выглядеть страница еще до сборки.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
Слайд из ppt-шаблона страниц
мы считаем новый вариант оптимальным. он позволяет комбинировать различные информационные блоки, не нарушая общую стилистику.
например, страница с описанием продукта должна выглядеть так:
- заголовок — лучше сокращать до 2 строк;
- краткое описание — должно содержать главную ценность продукта;
- value propositions — все, что можно выразить цифрами: скидка, кэшбек, ставка.
мы добились единообразной структуры подачи и подготовили набор контентных блоков, из которых формируются страницы. предложили возможность разнообразного наполнения страниц, при этом ограничили четкими рамками маркетинг.
Стандартный контентный набор продуктовой страницы
стандартный контентный набор продуктовой страницы такой:
- описание продукта или как его получить;
- тарифы и условия. внутри могут быть дополнительные документы о продукте;
- сервисы, важные информационные страницы и разделы.
новые продуктовые страницы просто, понятно и четко рассказывают о продукте. для клиентов, изучающих детали, страницы содержат всю необходимую подробную информацию (тарифы, документы, специальные условия). при этом мы не перегружаем разделы — структура очень здорово продумана для этих целей. кроме того, мы стараемся максимально упростить доступ к заявке и ассистенту на каждом этапе просмотра страницы клиентом. отдельный плюс — это красиво благодаря отличному дизайн-решению.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
Пример страницы продукта после редизайна
результат
во-первых
упростили навигацию, сделали акцент на флагманских продуктах, сформировали новый визуальный стиль, который соответствует позиционированию банка.
«Райффайзенбанк» теперь представляет собой не витрину продукта, а банковский сервис, которым комфортно пользоваться и с десктопа, и со смартфона.
клиентам удобно получить на сайте информацию о продуктах банка и сразу подать заявку на оформление.
во-вторых
для разработчиков сформировали три инструмента, которые решают проблему гибкости и масштабирования:
- презентация с описанием типовых блоков для менеджеров, которая доступно объясняет, как использовать дизайн-компоненты;
- sketch файл для дизайнеров со всеми элементами;
- сверстанный гайдлайн для разработчиков, который позволит быстро собирать продуктовые страницы.
«Райффайзенбанк» с новой версией сайта стал победителем «высшей ипотечной лиги-2018» в номинации «удобный ипотечный сайт».
мы очень рады, что запуск прошёл без затруднений. «Райффайзенбанк» объективно крайне требовательный и взыскательный заказчик — коллеги с достоинством прошли все наши испытания. у нас нет сомнения в профессионализме aic, мы видели желание коллег сделать лучший финансовый сайт в России, однако такие задачи не решаются одномоментно. нам кажется, что мы сильно продвинулись в этом направлении и скоро добьемся своей цели.
Мария Магдеева, заместитель начальника управления каналов продаж, АО «Райффайзенбанк»
цифры
10
пунктов к уровню удовлетворенности общением в онлайн-чате
4
часа на вывод новой продуктовой страницы на сайт
3
награды получил обновленный сайт в 2017 году
