The Lab

What is the Lab?

Every once in a while, I have the urge to experiment with new technology. This practice started with a need, really.
At Carnegie Mellon, the Professional Writing department wanted to build a database of students. They were using Excel to manage a growing list of students.
But I wondered if we could try emerging Web technologies to do the same thing.
So I taught myself how construct a database in MySQL and coded the front-end using PHP, HTML, and CSS. That was my introduction to the exciting world of Web apps.
The Lab is a showcase of some of my experiments with emerging Web technologies and interaction patterns.

Visualizing workflows

The challenge

My primary training is in content development, and one challenge I often run into is authoring complex workflows that exercise multiple features of a product. For example, a workflow for fitting data gathered from the field into a mathematical model might look something like this:

  1. Collect data into a format like Excel.
  2. Convert data into a format that the modeling language can understand.
  3. Create or edit the model into which you’re looking to fit your data.
  4. Stream the data into the model.
  5. Observe the output and log results.
  6. Modify the model as needed and repeat steps 3 through4 until the results look satisfactory.

Looks straightforward enough, but here’s the challenge. Steps 2, 3, 4, 5 exercise different features, many of which are documented in different parts of the help system. First, we need to bring together all those disparate features into a single workflow. Next, and most importantly, if the reader lands on a page that describes one of these steps, we need to help them understand that this step is part of a larger workflow.

What are some options?

This content problem isn’t new. The most popular approach for solving this problem is using some sort of notification that says something like “This topic corresponds to step 3 in a larger workflow for data modeling.” But what if a step belonged to multiple workflows? Arguably, the notification could be updated to say something like “This topic corresponds to step 3 in the Data Modeling workflow and step 5 in the Data Analysis workflow.” Starting to get a little unwieldy there.

A visual approach

I have always been fascinated by subway maps. They take the work out of figuring out which direction you’re traveling in. All that matters is that you know the start and end points of your journey. This type of thinking is very similar to how customers mentally model their goals for using a product. On that journey, it would help if a customer knew the fastest route and any branches to anticipate.

I looked around for subway map generators and found one that Nik Kayani implemented using jQuery a while ago. Nik’s original post is here.

So I played around with the code and was quickly able to mock up what I like to call the Workflow Explorer. Here’s a short video showing this design in action.