Reframer strikes a chord ... diagram


Reframer enables you to capture all your observations from user testing sessions, and to draw out key project themes from across multiple sessions with ease and insight. How does it do this? By your use of tags.

Adding meaningful tags to your observations, both during and after sessions, gives you the ability to explore relationships between tagged observations, spot connections you may otherwise have missed, and quickly see the most significant results. You'll create tags unique to your projects and teams, make use of the automatic quote tag option , and even 'star' the stand out observations you have a hunch will be particularly important.

So what’s the most beautiful, informative way for us to represent the complex, interwoven relationships between observation tags (especially those with stars)? To surface only the truly insightful connections and fade out the mundane and irrelevant?

I was challenged to answer this question, and to create visualizations that will give researchers quick insights and make exploring the data even more fun. The best bit about this challenge? Reframer's in beta, so now's the time for trying cool things out and seeing what's useful.

To start with, I knew a traditional tag cloud wasn't an option. While it’s useful that tag clouds can quickly show us the most popular tags, they tend to be cluttered and clunky due to the varying fonts and alignment of tag labels. Furthermore, tag clouds tell us zero about the connections between tags, and nor do they surface any #thisisreallyserious tags that only appear once or twice and are blocked from view as a result.

Instead, you’re now able to get insights into your tags from two new visualizations in the Reframer results (both created using the amazing d3.js library): a chord diagram and a bubble chart.

The Reframer Chord Diagram

Along with the theme builder, the chord diagram enables you to easily explore the relationships between your tagged observations, and to make it easier for you to spot key project themes. The visualization becomes richer, and the patterns in your data more obvious, the further you go along in your project (so more tags and observations equals more fun!):

reframer chord diagram

Every tag you've attached to observations throughout the project is represented by a node on outer circle. The larger the node, the more observations you have with that tag.

The chord lines that connect the tag nodes represent observations that contain both tags. Again, the thicker the chord, the more times the two tags appear together on the same observation.

By hovering your mouse over a tag node, the visualization highlights the tags and chords that your selected tag is connected to (and if a tag is never used in combinations with others, its chord is only connected to itself).

chord diagram reframer qualitative research

The Reframer Bubble Chart

The bubble chart simply shows the frequency of your tags as circles with the tag labels. I've played a lot with different colors, sizes, and positions of the bubble to visually represent the popularity of a tag, and I consider the design to be a lot cleaner and clearer than a tag cloud.

reframer bubble diagram

Like Reframer, these visualizations are still in beta as there is a lot of fancy additional functionality we could add. In particular, we think it would be useful to be able to select tags from the chord diagram and quickly create themes. Or perhaps visualize how different themes cover different parts of your tags. While the chord diagram can give you a big-picture perspective, the bubble chart could allow you to dive deep into your observations as we could also visualize the intersections of  tags with a selected tag or visualise what tags were used in the most significant observations...I could go on. But I'll leave it there for now.

There are endless possibilities for what we could do next. If you've got a Reframer project on the go, or you're planning to do some observational user research soon and want to try it out, let us know what you think of the new visualizations! And, of course, we're keen to hear your ideas for visualizations as well.

Published on Aug 07, 2015
Mila Dymnikova
  • Mila Dymnikova
  • Mila is a developer at Optimal Workshop. She's also exploring the world of data science and loving it. She's on Twitter at @milameow1

Blogs you might also enjoy