Designing the User Experience: building an interactive Funnel Diagram

During the minor Interface and User Experience Design, we were asked to pick a method out of the HCI Toolkit at random, research the method and write a paper on the subject. The method I drew was the Funnel Diagram. A lot has been said about how to interpret funnel diagrams and what can be done to improve the conversion they depict. But during my research I discovered there really isn’t that much to say about why a funnel diagram should be used and how it should be designed. In Communicating the User Experience the authors Richard Caddick and Steve Cable give thorough and well substantiated instructions on how to design a funnel diagram.

Part of the assignment was to give a short workshop on the subject, including the demonstration of a worked example. Because there wasn’t that much to tell about how to make a funnel diagram, I decided to put some extra effort into the worked example by building a tool that would allow anyone to make a funnel diagram in a few minutes instead of the usual several hours. It offered a great opportunity to start exploring d3.js, a JavaScript library for manipulating documents based on data developed by Mike Bostock. The tool is now available at for anyone who would like to use it. If I find the time, I’d like to revise the code and make it available through github.

Funnel Diagram

Although this tool gave me something to demo during the workshop, I still really didn’t know what to write about. After showing the tool to my teacher Jasper Schelling, he showed me some of the work and ideas of Victor Bret. In particular, Jasper pointed out Bret’s ideas about what he calls explorable explanations and reactive documents. These offered extra ideas to implement in the tool, but also a direction I could take with the paper I was about to write. We came upon the idea of building more tools for the methods in the HCI Toolkit.

The Funnel Diagram is one of those methods where the finished artifact associated with the method offers insight into the design of a product. However the process of creating the artifact doesn’t add anything at all, even though the process takes up significant amounts of time and attention. Contrast this with the method Mind Mapping, where the process of creating the artifact (i.e. the mind map) provides the insight or ideas. By building tools that make light work of creating artifacts, the cost of implementing the associated methods would become significantly lower. This could lead to methods being applied more often, which should ultimately lead to better designed and developed solutions.

I’ve written the paper about these ideas and posted it on this site. If you’re interested, please read Let’s put the “Tool” into “HCI Toolkit”.

One thought on Designing the User Experience: building an interactive Funnel Diagram

  1. This is awesome, nice work. I would like to use this code to do a little d3 exploration. Is it on GitHub?