Annika Kaltenhauser

Annika Kaltenhauser
UX Designer

05.12.2016 • 7 minutes

From Wireframe to HiFI prototype

Possibilities and limitations for interactive big data visualizations

We all know that interactive data visualization is an effective communication tool for easily conveying even complex contexts: if applied correctly, users can use them to discover hidden patterns, change perspectives and develop new ideas.
But how can we create data visualizations which best assist users in their tasks? And how can we test interactive visualizations where they are actually needed?

Generating insights and findings from seemingly abstract pain data?

For the treatment of chronic pain, data about the changes of the patient’s condition, movement profiles, sleeping habits, the weather or the timing of therapy measures are observed over a long period of time, analyzed and investigated for patterns and correlations. To do this, pain therapists require an effective and efficient tool. In this context, (interactive) data visualization assists human cognition in the rapid recognition of patterns, gaps and outliers – even for large amounts of data. Therefore, the basis of my work was the search for such an interactive data visualization:
“Quiri Analyzer” was created in the third phase of the overall “Quiri” project and complements this with a user interface for medical staff for the evaluation of the data collected from individual pain patients.

How does one visualize data for pain therapy?

In this blog entry I would first like to exclude the technical requirements (what type of data is collected in what cycle for what diagnosis). A special challenge from the UX perspective, was finding a suitable prototyping tool with which the visualization of and interaction with complex amounts could be appropriately evaluated with users, also in the run-up.

I found a few approaches in my research on the topic of prototyping. From intensive paper prototyping to exclusive digital mock-ups: Unfortunately, many of these methods were only suitable for very few interactive visualizations or for very small amounts of data. From the varied repertoire of prototyping methods, I had to choose those which met my requirements:

Another particularity in this project was a small target group which is difficult to access: Pain therapists are usually very busy people with heavy schedules. Consequently, within the evaluation session, as little as possible abstraction, but rather concrete “exploring” by means of realistic patient data was to be evaluated in order to receive valuable feedback for my case, i.e. meaningful data had to flow into a highly functional prototype in order to test my aspired filter concept.

The tools of my choice

For the visualization of the individual parameters that are relevant for the pain therapy, I first scribbled notes onto paper. Written notes on paper are a good basis for making rudimentary decisions and discussing first approaches with colleagues. I also presented the rough layout as well as the idea of the filter concept and the temporal representation of the data in this way.

Quick changes or new ideas were no problem!

UI Scribbles des Quiri-Projekts von Ergosign
Scribbles des Quiri-Projekts

Evaluation im Verlauf des Quiri-Projeks

With this approach, in a second prototyping phase, I was able to first test the layout and the UI in digital wireframes in the prototyping tool Antetype. In this phase I mainly worked with static contents and concentrated on the fundamental UI. With the jump to a digital prototype I for example had the option of using recurring elements via “copy-paste” or hiding and showing information. Together with my colleague I performed a few expert reviews by means of this prototype, in order to include improvements in the further iteration.
In this project phase, Antetype made it possible to develop and adjust the options, layout, interactions with the UI and a responsive behavior.

Evaluation im Verlauf des Quiri-Projeks
Gespräch mit Dr. Jansen

However, as user experience in the evaluation of such great amounts of data ultimately depends on the possible interactions with the data, and these must feel as real and correct as possible, I had to opt for a functional prototype. As I had already had first experiences with the Framework D3.js, and because I required a high level of flexibility of the visualizations for “Quiri Analyzer”, I decided on the D3 and the implementation as a HiFi prototype with web technologies.
After a short phase of getting familiar with the possibilities of D3, I was able to gradually implement the concept from Antetype and design the interactions realistically. In this phase of prototyping, I made decisions on what behavior feels natural and can optimally support users.

With the developed prototype I asked for qualitative feedback on the use from two users. The approach of letting users “explore” by means of realistic patient data exceeded my expectations and turned out to be exactly right.

"It's particularly great to view the graph together with the patient. [...] People love pictures. Yes? Most people are visually triggered, and when one shows it to them and holds up a mirror: 'They have a look for themselves. That’s them. Nobody else'. This provides a great sense of momentum. Cool."
Dr. Bialas

In a second loop, a visual design was added to the prototype and improvements from the validation were integrated. Created in Antetype and implemented in CSS styles, the final version of my prototype was created.


By means of the “Quiri Analyzer” practical example I have shown you my (an) approach of prototyping for interactive big data visualizations. The effort of an expansive prototyping phase is worth it, try it for yourselves!

Further News

UX Strategy Zurich 2019

UX Strategy Zurich 2019

DMEA 2019, Berlin

DMEA 2019, Berlin

Career Fair 2019, Stuttgart

Career Fair 2019, Stuttgart