Turning legal requirements into interactive website features: Part 2
This is a continuation of our previous post and introduction by Gabriel Diaz, the Product Manager for this project. Read the introduction here.
My name is Srishti, I’m a software developer at Haven Life, and in part 2 I describe how we engineered our Visual Sales Tool for Whole Life Insurance -an online interactive webpage that is easy to understand, and even fun to use:
The image above shows our final product, where our life insurance customer can interact with this illustration. They can adjust their age along the graph to see their future whole life details at a certain age, all the while being provided with the information that’s legally mandated. And you can see at the bottom of the screen, the customer still can view the original, basic illustration.
How we built the chart
Instead of “reinventing the wheel”, or trying to build a good looking chart from the ground up, we decided to use a third party application to generate these charts. We first considered the charting library (D3.js) to pull from. But we ultimately decided to use the HighCharts library. With HighCharts we had the skills on our team to use it, and it gave us everything we needed to build it. For example, the main interactive feature we built into our illustration chart was the moving pointer that shows the customer details at each year of their lives, with different dividend options, tax rates, product types, and loan types.
A 30 second load-time wouldn’t cut it
After we determined our design, we moved into engineering. For the best performance, the visual illustration must load all possible data the user could potentially see (as they change their age, for example) at page load. This does cause a slower initial loading time for the whole page, but the advantage is that, once the page does load, the user will experience no lag time as they adjust the tool. That being said, we wanted to make sure that initial load time was as fast as possible.
To do so, we started by looking at what backend systems existed in our legacy systems for illustration creation, to see if we could leverage that technology. Unfortunately our legacy system took about 30 seconds to build the basic illustration, and that didn’t meet our requirements and expectations for our platform, where we pride ourselves on having a fast system. We didn’t want our customers to wait 30 seconds on a webpage to view their information.
So for this problem we decided to start from scratch, and rebuild the system using GraphQL, a query language for APIs that allows you to call only the data that you need for a particular application.
From 30 seconds to 1.4 second load time!
GraphQL allows our application to call our product endpoint to get information such as:
- Guaranteed Death Value
- Guaranteed Death Benefit
- Annual Dividend
- Cash Value
- Cash Value of Additions
- Paid-Up Additions
- Total Death Benefit
- Total Paid-Up Insurance at the end of every year starting with your age at the time of policy issuance.
We then process the data and calculate aggregates, midpoint assumption numbers, and current assumption numbers.
Our new tool was orders of magnitude faster; where our legacy software took 30 seconds to build the documents, our new documents are made in 1.4 seconds!
And don’t forget, we still had to provide the original basic illustration (as legally mandated). So we decided to use our new architecture to build that too; it creates a huge HTML blob with the right styles to match the legal requirements. This HTML blob is then sent to a microservice which converts it to base64 which can be rendered as a PDF for the client to view. The user can download the PDF, and later sign it using DocuSign.
This HTML creation also resulted in some positive unintended consequences: The HTML content generation module is very decoupled, and can be reused. And we now use it in 3 other apps across all our sites. The modularity also makes it easier to debug and understand.
Sneak Peak: We’re planning to make it even better!
We’re currently improving the visualization and functionality of Visual Sales Tool even more; here’s a sneak peak!
