prostate symptom checker

I've recently started a new job in London at the BMJ (formerly known as the British Medical Journal). It's a new role they've created for an interactive data graphics designer. I'll be making graphics, mostly in Processing to begin with, which will be collected in a free archive on the BMJ site.

Since my first interactive has just gone online, I thought I'd put up a quick development post about it. Those of you familiar with the development posts on this blog will recognise the workflow I've been using - starting with pencil sketches and using these to discuss ideas with subject experts, then working up the graphic in Illustrator. However, as I'm doing more interactive graphics from now on, I've been learning to use Processing. This means that I've had to make changes to the workflow, adding in a quick and dirty functionality test so that I can iron out issues before committing myself to the design.

I started this project as I do with many of them - trying to get a sense of the data with a pencil and paper. In this case, my mission was to produce an interactive to accompany a BMJ "State of the Art" review of Lower Urinary Tract Symptoms (LUTS) in men. The paper details how to recognise LUTS (indications) and current knowledge on possible treatments (interventions). I initally started mapping out some of the points in the paper:

Initially, I thought it might be useful to focus on the different interventions, and give information about each:

However, the graphic was missing something about what kind of symptoms would be appropriate for which kind of intervention. I decided to base the interactive around a symptom score tool which was provided with the paper:

The idea was to have a slider for each kind of symptom according to severity, and to sum the results of these symptom severity scores to give an overall level of severity. The questions asked to get this score are from a validated tool called the International Prostate Symptom Score (IPSS), which was included in the paper.

At this point, I made a little functionality test, since I'm only a beginner with using Processing for interactive graphics. I wanted to make sure that I would be able to code up the interactive elements easily enough. It's not pretty, and the code is probably not as elegant as it could be, but after an hour or two I had something with the functionality I wanted (the sliders moved, and their combined values became blocks):

While the graphic would be technically feasible, the challenge was that the authors recommended lifestyle changes for people with mild symptom scores, but also recommended pharmacotherapy (drugs) or surgical interventions for people with moderate or high scores. However, lifestyle changes could also help more severe sufferers, and we also wanted to suggest that clinical judgement was highly important, and that it is more like a sliding scale than one with definite cut-offs. I tried various different ways of showing this more nuanced view with arrows:

However, the options all seemed rather clumsy. I came up with the idea of graduated lines that would show the overlap of the different treatments for different severities:

I found it hard to label - putting the titles at the left meant quite a large gap. I also wondered if the "check marks" scale was actually necessary, and whether it could be replaced by a vertical band that moved left and right over the scales:

Another problem was that it was harder to link this information with the treatments below. I would have used different coloured bars to suggest which treatment category was linked to which, but I never like to rely on colour alone, since colour-blind viewers can struggle with this.

I tried putting the scale vertically so that the bars could be linked across more easily:

This felt unnatural though, as the horizontal sliders linked to the vertical summary bar. There was no way of linking the question text to vertical sliders, so I abandoned this idea too, and went back to arrows:

At this point, I started working up the design in Illustrator:

I realised that there was no reason to have the arrows in place for all levels of severity, and that I could just change the arrows' source depending on the current score:

After working up the greyscale version, I added in some colours to differentiate the different questions and the severity / treatment options:

Lastly, we changed some information, and removed the "Bladder Outlet Obstruction" checkbox after consulting with the authors. We also added in an 'orange box' at the bottom-left, to reinforce the idea that quality of life should also affect the decision, instead of just relying on symptom scores.

The final published version is now freely available on the BMJ website, so feel free to head over and have a play with it:

http://www.bmj.com/content/349/bmj.g4474/infographic

It's been interesting to start to get my head around more interactive graphics. It's an added challenge, but also gives new possibilities, such as replacing elements of the page under different conditions. I'm looking forward to developing my skills further in this area.