Это продолжение нашего предыдущего поста и введение Габриэля Диаса, менеджера по продукту этого проекта. Читать введение здесь.

Меня зовут Сришти, я разработчик программного обеспечения в Haven Life, и во второй части я описываю, как мы разработали наш визуальный инструмент продаж для страхования жизни на всю жизнь — интерактивную онлайн-страницу, которую легко понять. и даже интересно использовать:

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

Как мы построили график

Вместо того, чтобы изобретать велосипед или пытаться построить красивую диаграмму с нуля, мы решили использовать стороннее приложение для создания этих диаграмм. Сначала мы рассмотрели библиотеку диаграмм (D3.js), из которой можно извлечь данные. Но в итоге мы решили использовать библиотеку HighCharts. С HighCharts наша команда обладала навыками его использования, и это дало нам все необходимое для его создания. Например, основной интерактивной функцией, которую мы встроили в нашу иллюстративную диаграмму, был движущийся указатель, который показывает сведения о клиенте в каждый год его жизни с различными вариантами дивидендов, налоговыми ставками, типами продуктов и типами кредитов.

30-секундное время загрузки не сократит это

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

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

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

Время загрузки с 30 секунд до 1,4 секунды!

GraphQL позволяет нашему приложению вызывать конечную точку нашего продукта для получения такой информации, как:

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

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

Наш новый инструмент был на несколько порядков быстрее; там, где наше устаревшее программное обеспечение создавало документы за 30 секунд, наши новые документы создаются за 1,4 секунды!

И не забывайте, что нам все еще нужно было предоставить оригинальную базовую иллюстрацию (согласно закону). Поэтому мы решили использовать нашу новую архитектуру и для этого; он создает огромный HTML-блоб с правильными стилями, соответствующими юридическим требованиям. Затем этот HTML-блоб отправляется в микрослужбу, которая преобразует его в base64, который может быть представлен в виде PDF-файла для просмотра клиентом. Пользователь может загрузить PDF-файл, а затем подписать его с помощью DocuSign.

Это создание HTML также привело к некоторым положительным непредвиденным последствиям: модуль генерации содержимого HTML очень несвязан и может использоваться повторно. И теперь мы используем его в 3 других приложениях на всех наших сайтах. Модульность также облегчает отладку и понимание.

Sneak Peak: мы планируем сделать его еще лучше!

В настоящее время мы еще больше улучшаем визуализацию и функциональность Visual Sales Tool; вот это навскидку!