Developing A New Visual Language For Clinical Trials

Necessity is the mother of all inventions and so is this one. Clinical trial information for patients is meant to be written at an 8th grade level but it’s not. It’s too technical and challenging for a lay person to understand and our goal is to change that by using our expertise in design, UX/UI and data science to raise the world’s Trial IQ by improving information comprehension. One of several different projects undertaken by us toward achieving this goal is called “Infoimagery”.

Clinical Trials and Stock Images

The current state of imagery around clinical trials needs attention. We either see clinical trials information provided to patients with no images, just long text with medical jargons or with boring boilerplate stock images – The forever smiling doctors in lab coats with stethoscopes and patients, taking blood pressure or checking heart rate is all too familiar. In a nutshell, this is the entire makeup of the clinical trials search information landscape today.

Stock imagery we currently see in clinical trial searches.

When we talked about imagery for clinical trials, there are two conundrums that we faced: 

Conundrum 1
On the one hand we all know that there is nothing meaningful or informative about stock images we discussed above, and on the other, research also tells us that trials with images have a much higher user interest and views than the ones without. As a matter of fact, according to our most recent statistics across COVID trials on our database, the discrepancy is staggering where only 7% of studies have images but account for 91% of views.

COVID clinical trial study page views in relation to use of images for the trial content. 

Conundrum 2

This is a logistical one. If you are an art director, designer, blogger, content creator and/or curator, you are familiar with all the issues around image sourcing – Copyrights and licenses, parsing through multiple stock libraries, widespread fluctuations in the quality of images and their curation, and the list goes on. To top all this is the challenge of sourcing 50k+ images for all trials that are there in the database and getting IRB approval for each one. This makes for a logistical nightmare. 

Nonetheless, we were determined to find a solution to all our conundrums. And thus began our Informagery project.

Imagery That Informs 

Infoimagery is our portmanteau word for imagery that informs. Just like infographic does using graphs, charts and numbers. Our infoimagery informs about a trial through a set of symbols, shapes and icons. At the start of the project, data, design and technology brains came together and arrived at a couple key questions:
Could we leverage the clinical trials data that we already have?
Could that data inspire some visualization and design to replace the current stock imagery?

Our attempt to answer these questions made us hopeful of what we could achieve and we quickly got down to work. We first made a list of the key data points that identify each clinical trial:
All therapeutic Areas
Study Type
Global or not
Age group (Pediatric, Adult or Senior).
Recruitment Goal
Study status

Against this list we began designing iconography and ended up creating approximately 65 icons

 Iconography design based on clinical trial data points.

We then composed this iconography in a thumbnail format to go with individual clinical trial content.

Example of manually designed infoimagery thumbnails for each trial on a trials search results page. A hover state provides the study details.
Example of a wide variant of a manually designed infoimagery thumbnail.

Now the tricky part was to figure out a way to automate the creation of these thumbnail designs so we aren’t custom designing a thumbnail for every trial in the database.

Automation and the Generation of Infoimagery

To automate the process of generating infoimagery, we first get the SVG path of each icon. We then map the clinical trial data point to the corresponding icons along with the metadata associated with each of the icons (e.g priority and placement of the data points within the defined field). Once this information has been gathered, the system determines the exact position of each icon. In order for the icons to not overlap, collide or bleed out of the defined bounds of the image we use d3’s force simulation along with the quadtree algorithm.
There are mainly two types of forces that are responsible for the positioning of the icons: box force and collision force. Box force is due to the bounds of the image and collision force is due to the force between the individual icons. On an average it takes 300 iterations to determine the right placement of icons with both forces being minimum and no overlapping of icons. With the icon positions determined, the entire set is grouped as a single SVG giving us our final infoimagery for that trial. The system can generate both portraits as well as landscape formats with randomized color variations.

Diagram demonstrating icon placement for automated image generation using D3’s force simulation with quadtree algorithm
System generated infoimagery.

Future of Infoimagery in Clinical Trials

Granted, we have some ways to go before we can bring the above system generated designs close to the ones we have manually created, but it’s a start and over time we’ll only get closer to our goal of automating the process of generating well designed thumbnails and mastheads by using clinical trial data.

The importance of doing this exercise is multifold. First, it gives the industry an option besides using boilerplate, meaningless stock imagery. Second, the system generated infoimagery using the iconography we created not only provides a designed image to every trial but it also informs the viewer of the specifics of the trial in a quick and easy visual way – something a stock image would never do. And finally, by providing the healthcare industry with a visual language, an alphabet of sorts, it helps us get closer to our goal of raising the world’s Trial IQ by improving the comprehension of clinical trial information.