Командная работа и техническая экспертиза решений по редизайну сайта и единой формы заявки с Ренессанс Банком

• Задача

  Разработать новый сайт и дизайн для Ренессанс Банка с интеграцией банковских сервисов через API, DaData и Яндекс.Карты для автозаполнения. Внедрить форму единой заявки с поэтапной интеграцией кредитного конвейера, реализовать SPLITTER для плавного перехода, оптимизировать сервер, админпанель и миграцию контента, а также обеспечить защиту от DDoS и поддержку SME-раздела

• Клиент

  «Ренессанс Банк» — один из ведущих российских банков в сфере потребительского кредитования, обслуживающий более 18 миллионов клиентов в 29 регионах России. Банк предоставляет полный спектр продуктов для жизни: дебетовые и кредитные карты, вклады, инвестиции и кредиты наличными. Банк был основан в 2003 году и сейчас входит в топ-50 российских банков

• Что сделали

  Для Ренессанс Банка команда QSOFT реализовала переход к новой дизайн-концепции, настроила интеграции с банковскими сервисами по API, интегрировалась с DaData и API Яндекс.Карт для автоматического импорта данных, а также внедрила форму единой заявки, работая в тесной связи с командой Банка

Результаты

45 ^%

увеличение конверсии в отправку заявки

20 ^%

снижение времени обработки заявки

97.9 ^%

доступность сайта во время DDoS-атак

30 ^%

увеличение конверсии в оформление кредита

Реализация

Исследование

Сотрудники QSOFT и Банка работали в единой команде, уделяя большое внимание подходу к технической реализации сервисов. Важной вехой перехода от простого исполнения ТЗ, «работы руками» к анализу, погружению в цели Банка и конечного клиента сервиса, стала большая задача по трансформации анкеты-заявки. Команде проекта надо было решать ее в крайне сжатые сроки. Для оптимизации работы и соблюдения дедлайнов задачу дробили на более мелкие шаги и подбирали лучшее техническое решение для максимально быстрого получения желаемого бизнес-результата. В тандеме Банка и технической команды QSOFT укрепился формат работы, при котором разработчики детально погружаются в каждую поставленную задачу и развивают свои компетенции. В результате накопился достаточный пласт знаний и опыта, к которому стала доверительно относиться сторона Заказчика

Перенос на новый сайт

Перед началом работ был проведен аудит сайта клиента, проверено соблюдение требований безопасности, измерена его скорость и другие технические параметры. Результаты легли в основу ТЗ Заказчика, которое применялось командой QSOFT при разработке новой версии ресурса. Разработчики QSOFT провели ряд консультаций с Заказчиком по настройке Nginx-сервера с целью снизить нагрузку на боевые сервера, что позволило увеличить пропускную способность нового сайта. Надо отметить, что переход в моменте со старого, тяжелого и разросшегося сайта на новый - невозможен, поэтому, погрузившись в разные варианты реализации, команда проекта нашла оптимальное решение - SPLITTER - функционал уровня сервера. Он решает проблему миграции элегантно и с наименьшими затратами. Благодаря ему браузер клиента понимает, какую версию страницы отображать — новую переработанную или привычную старую

Интеграция анкеты банковских продуктов

Изначально анкета для оформления продуктов банка была встроена в старый сайт. В рамках проекта ее вынесли на отдельный домен - anketa.rencredit.ru. Командой со стороны банка была предложена идея выноса части функционала на новый домен для распределения нагрузки и усиления защиты клиентских данных. После проведения технического анализа, совместно с командой заказчика были определены и проработаны принципы и риски реализации, возможности переноса/доработки/переработки логики. Командой QSOFT была реализована форма анкеты, и интеграция с кредитным конвейером банка. Также команда QSOFT оказала консультации по настройке сложной системная архитектуры по разделению трафика со старого сайта на новый, после чего был осуществлен постепенный переход процесса заведения заявок на все продукты банка через новую реализацию

Шаги отправки анкеты

• На 1 шаге мы собираем контактные данные клиента и данные, необходимые для идентификации пользователя и отправляем в Конвейер
• Конвейер присылает уведомление о том, что данные обработаны и ждет новые данные. В зависимости от «статуса» клиента (новый или существующий), заполнение заявки может идти по разным сценариям. Это позволяет улучшить опыт заполнения анкеты для клиентов
• Следующим шагом является сбор дополнительных данных, необходимых для первичной оценки клиента, после чего сайт передает данные в Конвейер, который в свою очередь сообщает о том, что принял данные и направляет запрос на 3 порцию данных
• В качестве последней итерации обмена сайт комбинирует полный пул данных, отправляет в Конвейер, который обрабатывает и отправляет сайту статус по заявке в различных вариациях. Пока сайт ожидает результат от конвейера, отображается заглушка-таймер

Примеры целей, решенных с помощью разработки

Все взаимодействие с конвейером реализуется по двум сценариям - когда пользователь обращается к Конвейеру, и когда Конвейер к сайту. Для того чтобы Конвейер мог обращаться, требовалось разработать API которое «слушает» Конвейер, и предпринимает определенные действия в зависимости от обращения. Примеры целей, решенных с помощью разработки сущностей для общения с кредитным конвейером:

API для партнеров банка

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

Архитектура административной панели

Совместными усилиями команд была обновлена и актуализирована архитектура административной панели. Раскрытие информации - раздел на сайте Банка, предназначенный для раскрытия информации о депозитарной деятельности клиентам. Команда проекта реализовала единую структуру хранения данных с 5 уровнями вложенности, т.к документов много, а банку необходимо чтобы все они лежали на своих местах. Промежуточные подразделы потребовались для структуризации информации. В разделе была также реализована сложная сквозная пагинация по подразделам. Пагинация должна быть сквозной по задумке заказчика, чтобы в рамках одного раздела можно было легко просматривать материалы, относящиеся к подразделам. В рамках оптимизации административной панели из раздела «Инвестиции» был выделен еще один большой подраздел «Готовые решения». Из раздела «О банке» вынесли подраздел «Карьера». Это визуально облегчило навигацию по админке, помогло облегчить управление а также разделить доступ к редактированию целевых элементов конкретному подразделению - HR-департаменту

Автоматизация переноса со старого сайта на новый

Перенос контента требовался для всех разделов старого сайта, наиболее объемными из которых были «Тендеры», «Финансовые отчеты», «Раскрытие информации». Для этого взяли выгрузку со старого сайта, перенесли на новый сайт-тест, оптимизировали, протестировали и написали миграцию для переноса на боевую среду. В противном случае администраторам сайта со стороны заказчика пришлось бы переносить все материалы вручную, а счет шел на тысячи элементов, но с помощью найденного решения удалось безболезненно мигрировать огромные объемы данных

Оптимизация кредитного калькулятора

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

Валидация СНИЛС

Номер СНИЛС проверяется системой на одном из шагов заполнения заявки на продукты Банка. Если номер не соответствует хотя бы одному из перечисленных требований - система не пропустит такой СНИЛС и пользователь не перейдет на следующий шаг заполнения заявки. Проверка осуществляется как по формату заполнения поля СНИЛС в виде «ХХХ-ХХХ-ХХХ YY», так и в формате валидации контрольного числа Страхового номера. Каждая цифра СНИЛС умножается на номер своей позиции, получая нужную контрольную сумму, благодаря чему система всегда может валидировать номер СНИЛС

Автоматизация прогрузки биржевой ленты

Изначально документы в части раскрытия информации о корпоративных действиях загружались менеджером в ручном режиме. Каждый раз при выходе обновлений менеджер копировал текст с сайта национального расчетного депозитария и прикреплял PDF-файл. Команда Ренессанс банка и QSOFT организовали автоматическую синхронизацию с НРД. Теперь новые публикации появляются в разделе автоматически. На стороне банка есть микросервис, который отслеживает новые публикации, а сайт обращается с настраиваемым интервалом к сервису и забирает необходимые данные. Интервал настраивается из административной части. Сервис отправляет по факту успешной публикации на сайте уведомление, обозначая для НРД, что документ успешно опубликован на сайте

Консультации по обновлению Битрикс

Когда проект стартовал, сайт работал на актуальной версии Битрикс, однако она со временем устарела. Команда QSOFT провела ряд тестовых обновлений на собственных хостах и подготовила ряд выводов и рекомендаций о том, как Банку следует проводить перенос на продуктивную среду, обновить систему оптимальным образом

A/B тесты

Также мы провели анализ на предмет возможности размещения A/B тестов на сайте Заказчика, предоставили рекомендации по их реализации, в ходе исследования выяснили что все тесты должны быть специфичными для каждой отдельной задачи-гипотезы: настройки теста для конкретной задачи будут зависеть всецело от ее сути

Защита от DDoS атак

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

Разделы для МСБ

Раздел для малого и среднего бизнеса - это новый раздел на сайте, который создавался для нового направления бизнеса Банка по обслуживанию предпринимателей. Команда проекта проработала оптимальное решение, отвечающее бизнес-задачам Заказчика, провела системную аналитику и реализовала основные разделы. Раздел для МСБ был сделан в рамках единой Админ-панели, которая уже имелась у Заказчика, что сократило потенциальные риски и проблемы. Он запустился в январе 2023 года и предоставляет данные о продуктах Банка для МСБ в удобном и понятном виде

Интеграции кредитного конвейера

• Интеграции с банковскими сервисами в целях получения и отправки SMS без использования мобильного телефона, получения статуса и информации по единой заявке перед оформлением банковских продуктов, получения справочников (тип улицы, города, коды регионов, типы занятости, наличие иждивенцев), передачи задач от сайта в конвейер, идентификации клиентов по персональным данным, получения информации о наличии у конкретного клиента незавершенных заявок на продукты банка
• Интеграция с DaData — автозаполнение полей единой заявки. Данные с сервиса используются в множестве полей анкеты: ФИО, адресные данные, данные о работодателе: инн организации (скрытое поле, заполняется но не выводится на фронте), сфера и тип деятельности организации, рабочий телефон

Интеграции нового сайта

Интеграции с внешними и банковскими сервисами в целях:

Функционал

Заказчик

Ренессанс Банк

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

Благодарность клиента