Building A Better Diagram

We frequently get asked about the design process here at Lombardi. First off, it’s helpful to understand a little bit about our team, which consists of folks with very diverse backgrounds in user interface and visual design, human factors and engineering. Having such a broad mix of skills enables us to come at a design problem from many different angles and explore a variety of options very quickly. We practice an iterative approach that includes rapid prototyping and end user testing. Sometimes our solutions may seem obvious – but they are usually the result of multiple iterations and variations. A perfect example of this is the new insert or “+” sign that was recently added to Blueprint.

For those of you who have been using the product for a while, you’ll remember that our first design for adding items to the process diagram was very Visio-like, with drag and drop capabilities from an application menu:

Technically the solution worked, but we found a few key problems:

• The drag and drop design was influenced by more traditional thick clients, leaving the experience feeling a bit out of place inside a modern Web application such as Blueprint
• The control menus were hard to find – they sort of blended in with the rest of the UI
• Several of the more advanced modeling shapes were being overlooked since many users didn’t think to expand the menus, or completely missed the grayed-out chevron
• Users found it confusing to drag from a menu, it required several clicks to get this just right
• Dragging in milestones and swimlanes seemed unintuitive and hard to align
• The drop zone target was too small, you had to drop EXACTLY on an existing line for it to work properly

Our initial thought was to create a better drag and drop interface, making the menus more obvious and the drop zones bigger, and to use color to reinforce the interaction. We created a quick prototype and tested it.

The new design helped a bit, but we still found users were having the same general issues. The user had to click to expand the menu, but select and drag was still too difficult. Also, because the interaction model was so similar to other thick client modeling tools, we were constantly being compared against these (and their features). We knew it was time to find a better way, so we decided to scrap the entire approach and go back to the drawing board. The first step was to do some usability testing with current users to really understand the problem and what they were trying to accomplish. For me, the “a-ha” moment came when one user told me “I just want to put my new activity here”, pointing at a line on the diagram. If we could find a better way to interact directly with the model, we could avoid the cumbersome drag and drop interaction all together.

We quickly stepped through a series of low-fidelity mockups which were tested and refined:

Taking some to higher-fidelity to iron out the kinks and test out potential visual styling:

The final design incorporated pieces from several of the early protoytpes – resulting in the “+” insert menu that we’ve all come to love! Click below to see a brief clip of it in action.