18 апреля 2020

Digital-трансформация розничного бизнеса СМП Банка

СМП банк активно развивает собственную технологическую IT-платформу, и к нам обратился с задачей построения единого интернет-канала для своих пользователей. Хотим поделиться кейсом digital-трансформации розничного бизнеса банка: как мы объединили сайт и интернет-банк и открыли возможность для интеграции всех банковских систем от АБС до CRM.  

О клиенте

СМП Банк — это универсальный коммерческий частный банк. Среди продуктов организации: кредитование физических и юридических лиц, депозиты, РКО (расчетно-кассовое обслуживание), эквайринг, банковские гарантии, зарплатные проекты, аренда сейфовых ячеек, возмещение по чекам Tax Free и многое другое.

Банк работает на российском рынке с 2001 года и присутствует в 19 регионах. Входит в число 30 крупнейших банков страны по размеру активов. 

Нашей главной целью было повысить эффективность сайта и интернет-банка в продажах, объединив их в единый интернет-канал. Нужно было перелопатить UX и UI, интегрировать каталоги продуктов с АБС, CRM и другими системами и обновить технологический стек.

Денис Краснолуцкий, Руководитель Управления электронных каналов Департамента информационных технологий АО «СМП Банк»

Задача 

СМП Банк обратился к нам с интересной идеей — создать не просто сайт, а собственный интернет-канал. Для этого нужно было объединить все возможности банка по предоставлению услуг, перенести основное взаимодействие с клиентом в личный кабинет, а пользователю предоставить исчерпывающий функционал по работе с банком в сети.

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

Сложности 

Начнем с того, что дизайн интернет-банка не менялся с 2009 года. Для сайта 10 лет без обновлений — это слишком много. За это время накопился ряд проблем, которые нам вместе с командой СМП Банка предстояло решить:

  • Навигация интернет-банка была выстроена таким образом, что поиск продукта в нем превращался в квест, причем, не всегда успешный. Это говорит о неэффективном UX (пользовательский опыт). Клиентам не удавалось открыть интересные продукты или даже узнать о них, потому что они просто не могли их найти
  • Традиционное разделение публичного сайта и интернет-банка разрывало путь клиента с точки зрения метрик и триггеров (разрыв CJM). (Customer Journey Map (CJM) дословно переводится как «карта путешествия клиента». Такая карта отображает историю коммуникации клиента с компанией, его действия, эмоции, комментарии и так далее).

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

Была чисто внутренняя проблема: два фронта (сайт и интернет-банк) вынуждали дублировать процессы по обновлению данных о продуктах и изменениях, и многое делалось вручную. 

Денис Краснолуцкий, Руководитель Управления электронных каналов Департамента информационных технологий АО «СМП Банк»

Также разделение платформ не позволяло реализовать концепцию «нулевого клиента” (когда посетитель, еще не будучи клиентом, при более плотном взаимодействии с сайтом получает всё больше преференций). 

  • Не было полноценной мобильной версии сайта. Это приводило к большому числу отказов у аудитории. Компания теряла своих потенциальных клиентов. Пользователи заходили на сайт банка с телефона и тут же закрывали его
  • Менеджеры слишком мало знали о том, что действительно интересует клиента. Данные о клиентском поведении на сайте, которые можно использовать для CRM, не поступали. Из-за этого компании приходилось переплачивать за продвижение (большинство банков так делает до сих пор)

Такие препятствия в digital-среде приводили к тому, что эффективность работы сайта и в целом отдача от интернет-каналов была ниже, чем хотелось бы.

Тестирование гипотез

В этом проекте мы работали сразу по четырем крупным направлениям: аналитика, проектирование, дизайн и frontend. Команда банка вела также работу на backend. Дорабатывались системы банка, чтобы объединить внешнюю часть сайта с личным кабинетом и создать клиенту бесшовный пользовательский путь.

Лучший способ убедиться, что концепция отвечает всем поставленным задачам — проверить ее и подтвердить цифрами. Мы провели тестирование и UX исследование: опросили группу респондентов-клиентов других банков, которые используют разные банковские продукты (депозиты, потребительские кредиты, ипотеку, кредитные и дебетовые карты). Во время юзабилити-исследования мы собирали обратную связь в интерфейсе СМП Банка, что помогло нам проверить гипотезы и скорректировать некоторые решения.

Наша первая концепция основывалась на целеполагании клиента. Банк предлагает некий финансовый план по достижению цели (например, купить квартиру или машину, получить образование, съездить в отпуск), проводя клиента через опросник. Перечень продуктов появляется только в конце. Такая концепция предполагала поставить на первое место решение потребностей клиента. Но результаты исследований по методу фокус-группы убедили нас отказаться от такого подхода. Мы выяснили, что наша концепция не учитывает многие нюансы традиционного потребления финансовых продуктов. А это грозило большими показателями отказов на входе. Кроме того, такой сайт сложно поддерживать с точки зрения наполнения. 

Вторая же и финальная концепция была более традиционной – все продукты сразу видны, и клиент сам их выбирает. Такой линейный подход привычен для пользователя. Поэтому мы остановились на классике и сконцентрировались на парадигме единого канала — связи сайта и интернет-банка. И далее стали продумывать мелочи, синхронизируя с бизнес-процессом и банковскими системами.

Дизайн

Также у банка появился персонаж-маскот: белый медведь Симпа (аббревиатура банка «СМП» расшифровывается как «Северный морской путь»). Медведь призван создать образ дружелюбного помощника, но при этом надежного и сильного, который всем помогает и может решить любые вопросы. Мы адаптировали Симпу к новому дизайну, добавили к его изображению некоторые дополнительные элементы, которые визуализируют возможности и продукты банка. 

Создание единой платформы для сайта и интернет-банка 

Мы объединили два “фронта” — сайт и интернет-банк — в единую платформу со сквозным путем клиента. Провели интеграцию платформы с бэк- и мидл-системами (АБС) внутри банка. Это позволило полностью автоматизировать управление банковскими продуктами и свести до минимума ручной труд и вероятность ошибок сотрудников банка.

Для быстрой загрузки данных в браузер клиента мы использовали технологию SPA (single page application), что обеспечило переходы между web-страницами без перезагрузки. Инфраструктура сайта стала более гибкой и простой в поддержке.

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

Компонентный подход при разработке на React позволяет поддерживать целостность интерфейса в соответствии с дизайн-концепцией и разрабатывать новые интерфейсы на том же уровне качества дизайна, UI и UX.

Для взаимодействия с разными источниками данных для сайта мы использовали GraphQL как соглашение единого формата обмена данными. React хорошо адаптирован для работы с GraphQL и позволил нам выстроить понятную и гибкую архитектуру на уровне взаимодействия frontend и API. 

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

Взаимодействие с клиентом

В проекте с СМП-банком мы являлись частью команды, перед которой стояла комплексная задача. Нам предстояло свести воедино все внутренние сервисы банка и предоставить клиентам возможность с ними комфортно взаимодействовать. 

Работа проходила в условиях непрерывной коммуникации. Менеджеры нашли эффективные методы взаимодействия. Разработчики дизайна и верстки могли работать параллельно с программистами, вносить изменения и оперативно передавать новые макеты в работу. Более того, они стали частью команды СМП Банка, работая в рамках time-and-material (Time and material предполагает оплату по факту выполнения работ).

Результаты 

Новый канал запущен, метрики на старте. По нашим расчетам, все традиционные показатели (такие, как конверсия посетителей в заявки и эффективность предложений для текущих клиентов) улучшатся на 20-30%. Отказы в нелогированной зоне (публичный сайт) от пользователей, которые не являются клиентами банка, уже упали с 18% до 7%.

На сайте появились новые данные, интересные клиенту за пределами его продуктов. Теперь пользователь сможет получить персонализированные предложения. Причем, ненавязчиво — через его личный кабинет, с учетом того, что его на самом деле интересует.

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


Денис Краснолуцкий, Руководитель Управления электронных каналов Департамента информационных технологий АО «СМП Банк»

Новые клиенты уже говорят об удобстве сайта. У банка есть форма обратной связи, там пользователи пишут о своих впечатлениях о работе банка. Среди таких отзывов уже стали появляться позитивные оценки нового сайта, также опрошенные пользователи отмечают приятный дизайн. Кроме того, по словам руководителя Управления электронных каналов Департамента информационных технологий АО «СМП Банк» Дениса Краснолуцкого, многие новые сотрудники СМП, которые перешли из других банков, говорят об удобстве сайта и интернет-банка.

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

После проведенных работ называть этот проект сайтом не совсем корректно – нам удалось пройти основные этапы digital-трансформации банка и создать единую front-платформу. Больше не нужно дублировать процессы по обновлению данных о продуктах или изменениях. Сайт и интернет-банк теперь неотделимы друг от друга и интегрированы с внутренней банковской системой, а управление всеми продуктами компании автоматизировано.

Страница “Вклад” до
Страница “Вклад” после
Главная страница до
Главная страница после
Цветовое кодирование

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

15 августа 2018

Руководство по DesignOps: Введение

aic

2 июля 2018

Как искать и отбирать респондентов для юзабилити-тестирования

28 декабря 2016

Как цветовое решение сайтов и приложений влияет на конверсию

4 апреля 2019

Как помочь компании привыкнуть к постоянной диджитал-трансформации

aic

26 февраля 2018

Юзабилити для дизайнеров, фреймворк P-A-C-T

aic

8 апреля 2020

Уралсиб Страхование: секреты диджитализации иншуртеха

aic