Users: Our target users were the system administrators in and IT operations organization where systems were managed with Puppet, and open source and enterprise configuration management tool set.

Puppet allows a user to describe their desired configuration in code, then Puppet configures the system as it's described in the the code. The system has to be configured in a sequence of events, many of which must take place in a specific order. Puppet generates a mathematical graph that shows the relationships between system attributes, and uses this graph as its guide during configuration. If the configuration fails, and that failure is due to errors in the code, the user should be able to locate both the failure event and gain insight into what relationship among the system attributes caused the failure, just by viewing this graph.

Challenge: A visualization of the graph, in the form of a PNG file, was available to users, but it was both difficult to parse (see figure 1), and contained no useful metadata on any of the attributes. Our challenge was to design and build a rich, interactive, easy-to-use version of this graph, that would help users quickly locate and dive into any event or attribute to understand failure events.

Process: Few of us had had any experience with mathematical graphs, so my first step was to understand how they work, so my team and I would better understand available visualizations, and be able to choose one with confidence. I also knew that I'd want plenty of input from other UX designers, so we organized a mini-course on graph theory as step one.

At the same time, I worked with folks in Customer Service and Support, to better understand the history of the graph, how they'd used it, and what data they believed should be surfaced. 

Then, I organized and ran a 4-day, cross-team workshop. We reviewed user stories I had gathered, the data available, visualization tools,

communicating_comic-1.png

Users: Our target users were the system administrators in and IT operations organization where systems were managed with Puppet, and open source and enterprise configuration management tool set.

Puppet allows a user to describe their desired configuration in code, then Puppet configures the system as it's described in the the code. The system has to be configured in a sequence of events, many of which must take place in a specific order. Puppet generates a mathematical graph that shows the relationships between system attributes, and uses this graph as its guide during configuration. If the configuration fails, and that failure is due to errors in the code, the user should be able to locate both the failure event and gain insight into what relationship among the system attributes caused the failure, just by viewing this graph.

Challenge: A visualization of the graph, in the form of a PNG file, was available to users, but it was both difficult to parse (see figure 1), and contained no useful metadata on any of the attributes. Our challenge was to design and build a rich, interactive, easy-to-use version of this graph, that would help users quickly locate and dive into any event or attribute to understand failure events.

Process: Few of us had had any experience with mathematical graphs, so my first step was to understand how they work, so my team and I would better understand available visualizations, and be able to choose one with confidence. I also knew that I'd want plenty of input from other UX designers, so we organized a mini-course on graph theory as step one.

At the same time, I worked with folks in Customer Service and Support, to better understand the history of the graph, how they'd used it, and what data they believed should be surfaced. 

Then, I organized and ran a 4-day, cross-team workshop. We reviewed user stories I had gathered, the data available, visualization tools,