Colors, shapes, and blood sugars

I'm an interaction designer, artist, maker, mover, and shaker. I’m living in Copenhagen running a health care design studio that has dedicated all efforts to making Tidepool the place to go for T1D data. Since I can remember I’ve used art and design as a way to understand my experience living with T1D (for 21 years). I am grateful to be alive because of the advances in technology and medicine. However I am, along with many others, angry at the lack of progress with the experience of dealing with diabetes. I have been working with Tidepool for 6 months now, with the first task of designing blip, our first app for T1D data. This post is about the journey through designing icons for blood glucose data.

We have 80+ iterations on icons for blood sugar data testing how we can use shape, color, size, and opacity to create a glance-able, non-judgmental representation of blood glucose (bg) values. We've sought feedback from all kinds of people dealing with T1D along the way (30+ interviews), looked to Edward Tufte and analyzed countless diabetes apps and software to see what others have done.

What's out there?

Early on we decided on having 5 visible categories of BG data : Very low, Low, In Range, High and Very high*. We set out to not depend on the Y-Axis (so that we could use our two week graph) or purely color (with color blind and B&W printers in mind). We are striving for a balance between information and usability, to show the information in a non-emotional way.

​

A few things we have learned along the way...

Shapes

Triangles are special in that they say immediately “up” and “down” however, everyone we showed it to thought it was “going up” or “going down.” With CGM data, that could work, but not with static bg readings. We tried variations of morphing shapes - circle to squares etc, but the smaller the difference in the shape, the harder for the eye to tell the difference. We stayed away from squares - they feel sharp to the eye, not fluid, or organic in any way. We tried different shapes to mean different values, in testing we got feedback saying that each shape felt like a different kind of data. So, at the end of this part of the shape exploration - we settled for all circles, with different fills, strokes and color.

Color

Color is powerful, it is filled with emotion and is incredibly fast at showing trends in data. Our brains can group colored dots extremely quickly, but we cannot tell the difference between shades of color when they aren’t adjacent to each other. Color is also extremely metaphorical - red to green : bad to good, or stop to go, blue to red : cold to hot. Metaphors are tricky - they can be extremely useful to translate something we don't understand into something we get, but they can also overpower or confuse any new kind of information visualization. To name a few; the stop light, thermometer, rainbow spectrum… Color is also extremely powerful in culture and communication. We steered clear of red and green for a few reasons; we got significant feedback that red and green were judgmental and alarming. Over 10% of men are color blind, which affects the ability to see the difference between red and green.

We all have different opinions about how we want to talk about and respond to blood sugar data. My goal is to design the visualization as non-emotional information. A 200 after I’ve eaten a delicious cookie at my favorite cafe on a Sunday isn’t so bad, a 200 for no reason when I wake up in the morning is worse than my post-cookie 200. Although it is a static quantified number, it means different things, for different people, in different contexts. And so, I want to design without judging the number or the action, I want to show the information in a way that is easy to understand and that helps me learn from what happens. If we are sparked with emotion from seeing our data, we react and cannot learn or understand what happened. There is enough pressure and guilt piled on to life with diabetes that I want nothing to do with sparking any additional feelings of judgment.

​

Our data is personal, the standardization of it is useful but also to be taken with a grain of salt. We want to pick and choose the pieces of our own data that are useful to see and can be learned from. Tidepool is transparent partly because different people want different things, and opening the data and our process we hope will catalyze the development of an ecosystem of tools that reduce the burden of living with T1D. Its a really hard problem we are trying to solve, thats why most medical applications have terrible UI. Its hard because it combines such contrasting aspects of our lives - precise medical data and the roller coaster of our daily lives. We will continue to iterate and see how it works, consider this an invitation to do the same and give us feedback on what we’ve made.