Modernizing a Visualization Tool
In 2014, Biosearch Technologies approached me to redesign and develop their interactive selection tool called spectral overlay tool. This application helped scientists select the right parameters needed to design an assay for a common molecular biology method known as quantitative Polymerase Chain Reaction (qPCR). For the company, this was a critical buyer enablement tool used to streamline conversions into sales.
The original tool needed a user experience overhaul and used Flash, so to improve its usability and longevity, Biosearch Technologies recognized that they would need the tool updated and ported to work natively in the browser.
They also had plans to launch the qPCR Design Lab, a microsite that offered various resources and tools about qPCR targeted to both new and experienced users. The spectral overlay tool would be one of the primary tools to be featured on the site.
The tool has received periodic updates after its initial release. Unfortunately, the microsite it was originally found on is no longer online, but the tool can still be found on the LGC Biosearch Technologies website.
Initial 2014 Version
Early Design Progression
Biosearch Technology’s marketing team and I designed the initial wireframes and wireflows together. This design supported both desktop and mobile devices. We then quickly iterated through several prototypes of the application until we settled on the finalized layout.
In 2015, Biosearch Technologies was acquired by LGC. Because of this, they reapproached me to perform some visual design updates that incorporated their new branding guidelines.
Settling on a Technology Stack
I chose to use Bootstrap for its excellent cross-browser compatibility, modal component, and great reliability. Because the framework was already dependent on jQuery, I decided to use that for the rest of the application too. I also used Sass to utilize its powerful features to improve the maintainability of the style codebase. For the charts, I ended up choosing Google Charts because it supported area charts and had clear documentation.
Custom Layout vs. Bootstrap Grid
At first, I built the layout with Bootstrap’s grid system to quickly iterate through the first few prototypes, but we realized that it was important to maximize the amount of space the data visualizations took, especially on mobile devices. This wouldn’t work well with the default dimensions defined by Bootstrap’s grids, so I implemented a custom float layout built with custom media queries to have complete control.
Because I received all of the visualizations’ data points in an Excel spreadsheet, I wrote a custom command-line interface (CLI) tool in Python to convert them into a JSON format that could be imported into the application.
Performance improvements in chart drawing and data handling were also implemented during this time. The most significant one improved the load times for the charts. While the previous versions utilized JSON that was converted with my custom spreadsheet conversion tool, the format of the JSON still required additional transformations before it could be used to render data points with Google Charts. This meant that every time the application started up, it would perform identical transformations to get the data into a readable state. To remove this unnecessary work, the data conversion tool was updated to perform these transformations ahead of time, and this properly formatted data is now statically included within the bundle. That way, whenever the application starts up, it no longer needs to perform any transformations during runtime and it simply feeds the data directly into the Google Charts API.
The styles were also completely rewritten to adopt the Block Element Modifier (BEM) methodology to improve the readability and maintainability of the Sass codebase. Due to a requirement to continue support for Internet Explorer 11, a float-based layout solution was still used over a grid-based one.
Project Tooling Updates
The 2020 version of the tool went live on the LGC Biosearch Technologies website on September 1, 2020.