Абсолют Банк. Сервис для продажи инвестиционных предложений за 2 месяца

• О Сервисе
• CMS
• Верстка
• Данные
• Анкетирование клиентов
• Распределения средств
• Сохранение и отправка предложения
• Диаграммы
• Итоги

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

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

О Сервисе

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

Задача менеджера: помочь клиенту сориентироваться в банковских услугах и стимулировать принятие решения о вложении средств.

Задача сервиса: помочь менеджеру сформировать оптимальное предложение для клиента.

Функционал сервиса:

• проведение опроса клиента, определение его риск-профиля;

• формирование стандартного предложения по размещению активов клиента, исходя из его риск-профиля;

• формирование индивидуального инвестиционного предложения клиенту, исходя из его риск-профиля, пожеланий клиента и информации об объеме денежных средств, которые клиент готов разместить в текущий момент;

• просмотр информации по актуальным банковским и партнерским инвестиционным продуктам.

CMS

Сервис реализован на 1С-Битрикс: Управление сайтом. Выбор не случаен, Битрикс достаточно гибок и при этом имеет вполне дружелюбный интерфейс для администратора сайта. В Битрикс много возможностей реализовано “из коробки”, достаточно их немного доработать и можно использовать. Например, из необходимых возможностей, уже реализовано:

• импорт данных из CSV-файлов;

• система авторизации и выдачи прав;

• удобное хранение данных и доступ к ним;

• интуитивно понятный интерфейс для администратора и контент-редактора;

• просмотр различных типов данных (изображения, видео, таблицы, PDF).

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

Верстка

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

Лишь одно ”но” — одна из ключевых страниц не соответствовала финальному ТЗ.

В итоге внесли правки, переписали часть js под новую логику, исправили ошибки, возникшие при заполнении реальных данных.

Данные

Исходя из задачи, данные делятся на 3 категории:

1. Заполняются контент-редактором сайта в административной части по информации банка.

2. Заполняются при работе менеджера в публичной части.

3. Настройки сайта, которые меняются редко и только главным администратором.

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

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

Как и при любой обработке пользовательских данных, была добавлена проверка “крайних случаев” — когда в таблице оказываются некорректные данные.

Например:

• лишние символы в числовых данных;

• некорректный разделитель целой и дробной части числа;

• некорректные заголовки таблицы;

• отсутствие данных в обязательных столбцах;

• некорректные данные из ограниченного набора вариантов (например, валюты);

• и другие.

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

Анкетирование клиентов

Клиент отвечает на несколько вопросов анкеты. На основании ответов внутри сервиса определяется портрет клиента и автоматически формируется стандартное предложение распределения денежных средств.

Распределения средств

В ходе работы над Техническим заданием, логика страницы с индивидуальным предложением изменилась практически на 90% от первоначальной версии, чтобы соответствовать реальной работе менеджера.

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

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

Сохранение и отправка предложения

Сформированное индивидуальное предложение менеджер может отправить на электронную почту клиента. Отправить письмо на почту несложно, Битрикс это умеет. Сложно сформировать файл, который должен быть к этому письму приложен.

Для этого была выбрана стандартная библиотека mPdf. В идеале всё, что нужно — передать верстку страницы в mpdf, и он сам сгенерирует готовый файл.

Конечно, всё могло бы быть так просто.

К чему нужно быть готовым при работе с pdf:

1. Кириллица. Библиотека соглашалась с ней работать только при определенных настройках php.

2. Сложная верстка и некорректное отображение стилей. В итоге приняли решение переверстать на как можно более примитивную таблицу.

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

4. Определенные шапка и подвал страницы. К счастью, в mdpf есть готовые функции для их заполнения, нужно только корректно прописать стили и рассчитать отступы сверху и снизу, чтобы контент страницы их не закрывал.

5. Картинки диаграмм. Об этом ниже.

Диаграммы

Для отрисовки диаграмм были использованы готовые библиотеки от Google.

Это работает следующим образом — сайт посылает данные, а получает готовую диаграмму. Казалось бы все просто, однако, проблема заключалась в 2 моментах:

1. Диаграмма на странице сайта рисовалась "на лету” с помощью js в браузере, поэтому использовать тот же метод при формировании pdf-файл на сервере было невозможно. К счастью, вопрос решился более старой библиотекой от google, которая отдавала диаграмму в виде картинки по входному массиву данных. Это как раз то, что нужно было для pdf.

2. Размер картинки с диаграммой должен быть строго определенным, при этом на ней должны помещаться произвольное количество подписей с произвольной информацией.

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

Итоги

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

Два месяца разработки.

Два менеджера в проекте.

Один разработчик, трудившийся за двоих.

Один сервис для продажи инвестиционных предложений.

Работа завершена в кратчайшие сроки, несмотря на все трудности, сервис запущен в соответствии с графиком Банка.