Intech's challenge
Following the launch of their new Sales-Ready Website, Intech® worked with New Breed to create an interactive web tool on the HubSpot CMS — a tool that could be used to visualize and compare daily and time-series data showing the level of stress in over 20 equity markets around the world. Intech® would be able to use the tool for both lead generation and sales enablement. Visitors to their site could monitor the tool to gain insight into equity market risk and could subscribe to receive a quarterly report on the monitor. Their relationship managers could help clients understand portfolio performance in the context of prevailing market risks as the tool would be designed to easily visualize in-house market stress algorithms.
Prior to launch, Intech® was releasing a static quarterly summary of (what would become) the Intech Market Equity Stress Monitor™ — the firm’s proprietary view of equity market stress. But what they really wanted was an interactive version of the monitor on their website. In order to accomplish the significant level of development and integration needed to achieve such a project, the Intech® team decided to leverage New Breed to bring this project to life.
New Breed's Solution
1. Import and Integrate
The first step in our process was to work with Intech’s trading team to route 21 stock market indexes (contained in 105 CSV files) from Intech's internal systems into their HubSpot File Manager each morning to update the tool based on the previous day’s data.
With the help of the trading team, we established a workflow using HubSpot's FTP (file transfer protocol) service to initiate the transfer each morning. At a high level, HubSpot’s FTP allows users to transfer files between their local system and HubSpot’s server, which allowed the team to route the CSV files containing stock market index data into the file manager each morning.
Once uploaded, the files became usable data for the Intech Market Equity Stress Monitor™ to display. Without the HubSpot FTP, we wouldn’t have been able to integrate Intech®’s trading system and HubSpot portal and initiate a daily file transfer of their stock market index data. This would have left the monitor constantly out of date.
2. Code and Develop
Once all of the necessary data was living in the Intech® HubSpot portal and getting updated each day, we were ready to start developing the monitor itself. File transfers were only the beginning of the challenges the team faced while designing and developing this market monitor. At a high level, here’s what we were up against:
- Each on-page element needed to update instantly after a user interacted with it. Most importantly, it needed to display the correct data points.
- Equity market stress data for each index had different start dates and frequencies, which needed to be scaled, integrated into the single tool and clearly presented.
- The monitor had to work across all modern web browsers.
On top of this, for the best user experience, the tool needed to be displayed as close to a single page as possible — meaning a lot of information had to be compiled in a small space while still being understandable and aesthetically pleasing.
To best accomplish this, our team worked with the JavaScript library, D3.js (Data-Driven Documents), which enabled them to tap into the full capabilities of modern web browsers and breakthrough limitations that dynamic visualizations often face. A JavaScript library is a set of pre-written JavaScript functions which can be integrated and customized to extend the native functionality of a CMS. The D3.js library is best in class and specifically helped build the interactive features seen when using the tool:
Arrows and data that only appear when hovering on index circles:
Ability to select up to 3 indexes at a time.
Ability to change the date selected with the date picker or by dragging the trend line to a new date.
We picked the D3.js library because it was well documented and works across all web browsers — meaning the Market Equity Stress Monitor™ and its interactive features would display and update correctly for all users. It also allowed:
- The ability to map to the CSV files containing market index data to the visualizations
- The interactive animation of our trend lines, arrows and dots
- The responsive updates based on a user selecting different market indexes and dates.
There are very few libraries that could have achieved all of this dynamic data visualization — and even fewer that work well across all web browsers. Without both the HubSpot FTP and the D3.js JavaScript library, this project wouldn’t have been able to meet Intech’s requirements.
The last hurdle we had to overcome was standardizing the type of data we were pulling from all of the market indexes. Each of the stock market indexes has a different initial start date and update frequency (some are updated daily while others are updated weekly) and none of them are updated on weekends.
This added a third layer of difficulty of taking the mismatched data and establishing a standard scale to visually represent the indexes in the market monitor without it appearing skewed. Both teams went through a long process to ensure the monitor would display all of the data correctly every single time. This was a high priority for Intech® as they needed to ensure the monitor did not confuse or mislead users about what data they were viewing.
3. Design
The design of the monitor was kept as minimal as possible as the data it presents is the main focus. The single-page limitation enhanced the need for a compact design, so we had to ensure we capitalized on the limited space.
Most important here was that our design clearly conveyed the various options available to a user and how each worked together to best visualize the data. We made use of numbered icons to show the steps a user should take and included instructive labels wherever possible to guide the user as they interacted with the tool.
Results
At the end of an intensive development sprint, the Intech Equity Market Stress Monitor™ successfully launched on January 16, 2018. Viewed on a single webpage, the monitor presents a collection of five metrics that Intech® utilizes to measure equity market stress. Visitors used the monitor to gain insight to market risk and how to complement the standard investment industry measure of risk. Last, but not least, the Intech Equity Market Stress Monitor™ also incorporated their in-house algorithms, which provide true value-add to the product and moves it away from just being a replication of the ticker tape.
Specifically, the Equity Market Stress Monitor™ is a custom integration that leveraged the HubSpot CMS, HubSpot FTP, and the D3.js API. It’s a testament to how far you can push the HubSpot CMS, as our team essentially developed a small web application into Intech®’s website.
In addition:
- 245 contacts' first touch was the Equity Market Stress Monitor™ or its quarterly report.
- Some contact interaction with the monitor has led to valuable conversations, resulting in SQLs for Intech’s pipeline.
- The average time on page is 3 minutes in comparison to a financial services industry average of 2 minutes and 18 seconds the year the website launched — almost 45 seconds above average.
- The Equity Market Stress Monitor™ saves relationship managers time when working with clients and is an effective piece of sales enablement when working with prospects.
Impact
Building this monitor pushed our team to expand its capabilities as they developed a small scale app on the Intech® website. However, all of the challenges and technical difficulties are well worth the end result of a happy customer.
Soon after the release of the tool, Bloomberg Markets hosted Dr. Adrian Banner, Intech's CEO and chief investment officer, to discuss the benefits of using the Intech Equity Market Stress Monitor™. As Dr. Banner explained to Bloomberg Markets' hosts, "This is a monitor that allows us to compare current levels of market volatility, as we interpret them at Intech®, with historical periods in the past.”