| Creating a Hospital Comparison Service

Design Jul 28, 2020

I do healthcare consulting occasionally under the brand Intelligent Healthcare. The core team of Intelligent Healthcare is me and Sami, a PhD student and M.D. We recently created a service for comparing public hospitals in Finland, (Finnish for Hospital Comparison).

The need

The Finnish healthcare reform gave patients the right to choose their hospital. However, there are a few unfortunate .

  1. Most people don't know about the right to select a different hospital.
  2. Although Finnish hospitals are very high quality, they still have big differences in performance (such as patient safety and hygiene)
  3. Choosing a hospital based on publicly available data is very time-consuming and requires expertise in medicine and data analysis

This is why we set out to build a service that would make it easier to see what's happening in the hospitals.

Getting the data

Public hospitals are required to report certain operating metrics and KPI's. This is collected by Finnish Institute of Health and Welfare, who publishes the data semiannually.

The data is hard to find, and requires interpretation. Luckily, we found enough open data to make a convincing comparison across five categories:

  1. Waiting time
  2. Quality of care
  3. Hygiene
  4. Patient satisfaction
  5. Productivity

In total, we used 18 metrics to calculate a score for each of the five categories for each hospital, and an overall score based on the compound metrics. Different metrics were given weights that we considered fair.

Sami started processing the data, while I went on building the app. In most cases, he compared a hospital's performance to the mean, and used the difference from the mean (in terms of SD) to decide the score.

Designing the App

I drew some sketches on a notebook and then opened Figma. For most views, I needed only the sketches to start coding, but in the end I did some high-fidelity designs as well.

I started with rough wireframes. These served as a reference when I started coding the views.

Then, I decided on a simple color palette. Call me boring, but this combo of teal and indigo screams healthcare to me. My only criterion for colors was really to achieve a trustworthy look.

Colors used in the app

With the colors decided, it was time to explore some more complex views with high fidelity designs.

My font choice was system-ui. I didn't think the app needed to look interesting, so any simple sans-serif would do. Using the system font saves a bit of load time, which is always nice.

Coding the app

I don't consider myself a programming guru. I have done mostly front-end stuff in my career. Luckily this site doesn't need to update in real-time (remember, new data are published twice a year) so I went for a static site. Here's my stack

  • Front-end: React + Gatsby
  • Database: Google Sheets (!)
  • Deployment & hosting: Netlify

Very simple but effective. This setup turned out to be advantageous for many reasons:

  • Coding the app was very straightforward, it was ready in under 2 days.
  • My non-technical colleague can easily update the data in Google Sheets. At the same time, he can't really break anything. If I want to update the site, I just need to rebuild the app. During the build, the app pulls data from Google Sheets and creates the pages accordingly.
  • We don't need to worry about uptime or server resources. The hosting is free.
  • The app is blazing fast, see a LightHouse report below:

Closing thoughts

This project was a fun little hackathon that can actually be useful in many ways. You don't need to be a guru to create software, in fact, I'll be soon writing about some no-code projects I have done.

Stay healthy and if you get sick in Finland, go to Tampere University Hospital!

Kerkko Visuri

Product guy from Finland. Previously @ Wolt and BCG. I like distance running, good books and cooking.