My first step was to explore the interfaces of various devices and softwares that doctors currently use to monitor blood pressure and other related vital signs. I wanted to design a visualization that the medical professionals can relate to, somthing similar to the interfaces they are already acquainted with. Another crucial aspect of the research was to ensure that I am not designing on a flawed technical paradigm. The domain of healthcare deals with accuracy, specifics, standards and norms. I wanted to adhere to any visual guidelines/standards pre-established in this domain, iconography that may carry special meaning, units/measurements that need to be placed in the correct order etc.

Based on my explorations, there were a few takeaways :

• Information of Blood Pressure is typically analyzed as a pattern, rather than individual instances of datum
• Outliers, anomalies and their magnitude are important,
• Horizontally scrolling streaming data visualization is a lot more popular than vertically scrolling
• Users frequently switch between time frames to see the trend

A unit of data is a set of Diastolic and Systolic blood pressures taken at a particular instance. While the frequency of measurement can widely vary from patient to patient, it was identified that the number of measurements will typically be within 3 to 12 for a day. Aggregation of this data was not a requirement, as healthcare providers look at individual instances and patterns of instances than aggregated BP data. So I decided to create a horizontal streaming chart, with a bar for each instance of data, spanning from a scaled position of diastolic blood pressure to systolic blood pressure. Furthermore, I wanted to highlight the anomalies in the BP measurement if it existed. For a health human being, diastolic BP should be more than 80 mmHG and systolic BP should be less than 120 mmHG. With those as limits, I designed a color scale, with red and blue as extremeties and the saturation based on the deviation from the limits. For example a Systolic BP of 160 is more saturated red than a Systolic BP of 130. With the color gradient and size of the vertical bars for each measurement, it was very easy to identify patterns of BP with streaming data.

The BP monitor device connects to the internet and pushes blood pressure data in to a Azure FHIR server. FHIR is a specification for interoperability of health care records. Health care data is stored in a well defined schema designed for healthcare. The FHIR API provides access to the entities in a secure way, and since it is on Azure, it was tied to the Azure authentication. After the dev team helped me set up the authentication and authorization on a boilerplate React app, it was my responsibility to develop the dashboard.

Right off the bat, I decided to use D3 js for the visualization component, and not choose one of the gazillion charting libraries available on React. I wanted to have complete freedom of layout / vissualizations and not be limited to a fixed set provided by libraries. It took me a while to set up D3 to play nice with React, I took help of a few online resources (mentioned below) to get it right.

I did not use any UI component library for the rest of the interface, primarily because the UI was simple and using a component library for that would have been an overkill.

The Medical Devices team for whom I was building the dashboard had daily scrum meetings. I used to do a quick walk through of the progress as often as possible, that helped in getting quick feedbacks and shaping the dashboard incrementally. A perk of doing early and frequent walkghrough of the prototype in development is that it can spark new and exciting ideas in the team while the prototype is taking shape. We were able to envision and accommodate a few useful functionalities in that process.