Адаптивный интернет-банк ВТБ Онлайн: трансформация сайта с услугами и продуктами банка до уровня мобильного приложения

Заказчик:

ПАО Банк ВТБ

Руководитель проекта со стороны заказчика

Юрий Герасименко

Заместитель руководителя Департамента цифрового бизнеса, начальник Управления «ВТБ Онлайн»

Год завершения проекта

2022

Сроки выполнения проекта

Февраль, 2022 - Сентябрь, 2022

Масштаб проекта

3000000 абонентов

Цели

Доработка интернет-банка (сайта) до уровня мобильного приложения в максимально сжатые сроки на фоне удаления мобильного приложения из магазинов приложений:

1. Внедрить и масштабировать технологию PWA – Progressive Web Application – для предотвращения оттока аудитории и нейтрализации негатива, связанного с потерей привычного канала решения ежедневных финансовых задач клиентов – приложения в магазине.

2. Использовать навигацию и мобильные паттерны.

3. Внедрить на web-сайте вход по биометрии (распознавание лица или отпечатка пальца).

4. Реализовать в мобильной версии интернет-банка платежи по QR-коду.

5. Повысить скорость исполнения онлайн-операций и для этого перевести все сервисы и системы интернет-банка на микросервисную архитектуру.

6. Повысить доступность сервисов дистанционного банковского обслуживания для клиента вне зависимости от санкционной политики.

7. Импортозамещение: перевести банковский сервис на российское ПО, снизить зависимость от зарубежных ПО.

Уникальность проекта

Создали в интернет-банке клиентский опыт, привычный при использовании продуктов и услуг через мобильное приложение (PWA).

Вход по биометрии: первыми на российском финансовом рынке внедрили принципиально новый способ входа в интернет-банк – web-аутентификацию по биометрии.

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

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

Проект решает задачи импортозамещения

Да

Использованное ПО

Технологический стек: TypeScript, React, Redux, открытый стандарт API-браузера, JavaScript, Java, PostgreSQL, WASM

Сложность реализации

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

1. Организационная: действие в сжатых сроках в связи с наступлением санкций и соответствие требованиям регуляторов;
2. Необходимость учитывать особенности разных платформ и девайсов, под которые нужна адаптация: в спецификациях данные особенности не указаны;
3. Отсутствие референсов на рынке, так как ВТБ первым внедрил данное решение;
4. Ограниченность в выборе ПО: не могли добавлять новое иностранное ПО, а наоборот должны были сокращать его использование и переводить на российское ПО.
5. Обеспечение выполнения высоких требований к информационной безопасности в финансовом секторе на фоне роста мошеннической активности и атак, направленных на выведение социально значимых банковских систем из строя.

Описание проекта

Ранее при растущей популярности мобильных приложений web-каналам уделялось второстепенное внимание. С февраля 2022 года мобильные приложения оказались санкционно уязвимыми, а у web-канала нашлись преимущества, и аудитория резко увеличилась на 300%. В связи с этим перед командой встала амбициозная задача в сжатые сроки трансформировать интернет-банк ВТБ Онлайн до уровня комфорта мобильного приложения.

Для этого в сервисе были реализованы актуальные и удобные настройки:

1. Возможность установить иконку PWA на экран мобильного устройства для быстрого входа без поиска через браузер.

2. Возможность авторизации с помощью биометрии.

Клиент может войти в интернет-банк в 1 клик, как в мобильном приложении, без ввода пароля, ожидания и ввода кода в СМС.

Вход по биометрии для веб-сайта – это один из видов аутентификации WebAuthn – международный веб-стандарт аутентификации от консорциума World Wide Web (W3C), частный случай нативного приоритетного метода аутентификации, используемого для разблокировки устройства пользователя, в качестве которого может использоваться как биометрия, так и код доступа и графический ключ. Одно из основных преимуществ алгоритма WebAuthn – биометрические данные клиента хранятся в защищённой области в памяти устройства. Работу с биометрией выполняет само устройство.

3. Главная страница интернет-банка адаптирована под актуальные потребности клиентов, привыкших к комфорту и удобству использования продуктов в мобильных приложениях.

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

4. Возможность совершения платежей с помощью сканирования QR-кодов, к которым клиенты успели привыкнуть в мобильном приложении.

При работе над задачей определили технические требования к выбору решения: только OpenSource-решение, максимально быстрая скорость распознавания QR, высокое качество распознавания QR. Рассматривали разные библиотеки распознавания, способные работать в браузере и остановились на технологии WASM.

Достигли результатов и показателей:

Каждый третий вход в ВТБ Онлайн совершается через PWA; количество входов через мобильную версию интернет-банка увеличилось с 17 до 80% по сравнению с 21 годом.
Аудитория ВТБ Онлайн осталась с нами. После возврата приложения на iOS аудитория web-версии сократилась, но затем благодаря доработкам в интернет-банке продолжила расти, и на текущий момент MAU в 3,5 раза выше февральских значений.
Сделали вход интернет-банк идентичным входу в приложение ВТБ Онлайн за счет подключения биометрии. Сократили время входа в интернет-банк в 3 раза, биометрией воспользовались более 10 млн раз более 1 млн клиентов и сэкономили уже 15 млн руб.
Сейчас в интернет-банке совершаются более 100 тысяч распознаваний QR-кодов ежемесячно.
Использование Open API-решений и их доработка позволили снизить уровень зависимости от санкционной политики иностранного ПО.

География проекта

Интернет-банк ВТБ Онлайн доступен клиентам по всей России и за пределами страны.