Сервис онлайн-оформления банковских карт

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

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

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

Перед командой стояло несколько ключевых задач:

• Запустить процесс заказа карт, включая возможность оформления на ребёнка или другого человека
• Обновить систему хранения изображений карт и перенести её на более удобную и надёжную платформу
• Внедрить разграничение прав, чтобы разные пользователи видели только нужный им функционал
• Обеспечить быстрое и комфортное масштабирование продукта в дальнейшем.
• Разработка сервиса стажировок (страница направлений, фильтрация по городам и условиям, форма заявки)
• Запуск образовательного сервиса (модуль для уроков в админке, сборка из видео, тестов, статей, документов, рекомендации по интересам, отслеживание прогресса)
• Доработка и создание виджетов

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

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

При работе применялись современные практики проектирования и разработки: SOLID, KISS, DRY, а также шаблон Factory. В качестве основных инструментов использовались:

• Многошаговый flow заказа карты: реализован процесс оформления карты на третье лицо/ребёнка с динамическими формами (BDUI-компоненты). В рамках итогового демо через эту фичу было оформлено более 150 000 детских карт
• Удобная навигация: кнопка «назад» теперь не сбрасывала данные, а сохраняла их. После завершения процесса пользователь возвращался не в пошаговую анкету, а сразу на главную страницу с картами
• Перенос внутрибанковской системы в Kubernetes: автоматизировано хранение изображений карт и информации о них, добавлено подключение к Keycloak для авторизации и реализована ролевую модель
• JSON-схемы для SDUI: разработан figma-плагин и написаны схемы для реализации новых сценариев
• Сервис стажировок: реализован поиск стажировок по направлениям, городам и формату работы (офис, гибрид, удаленка), а также форма заявки
• Сервис образования: модуль уроков в админке позволял контент менеджерам собирать курсы из разных типов контента. Пользователи логинились, указывали интересы, получали рекомендации, проходили курсы и отслеживали прогресс. Для MVP планировался простой индикатор завершения курса
• UI kit: создана обширная библиотека компонентов для сборки страниц

Нам удалось запустить новый функционал заказа карт, в том числе на третье лицо. И этой возможностью уже воспользовались более 150 000 клиентов. Мы перенесли систему изображений карт в Kubernetes, подключили авторизацию через Keycloak и настроили ролевую модель доступа. Благодаря этому продукт стал удобнее в поддержке и гибче для развития

Для молодёжного направления были запущены сервис стажировок и первая версия образовательного сервиса, которые позволили вовлечь студентов и молодых специалистов в активность банка. Команда реализовала гибкую систему сборки страниц через админку, что дало бизнесу возможность быстро запускать новые инициативы без участия разработчиков.