Balsamiq And A Sneak Preview Of My ‘Decoupling Workflow’ Presentation

I know I’m late jumping on this bandwagon, but it’s better late than never, right? :)

I decided to try out the Balsamiq Mockups tool while working on my sample application for the ‘Decoupling Workflow from Forms’ presentation that I’m planning (hoping! Go vote for my session!) to give at this year’s Austin Code Camp. The code for the presentation will revolve around a very simple “Org Chart” set of features, illustrating the principles and patterns of Application Controller, IoC containers, and others.

The Org Chart Screens

I’ve played with Balsamiq in the past, but never for an actual project. In less than 30 minutes, I was able to come up with the following screen layouts for my presentation.

The “Org Chart” Main Form

Org Chart View

The “Add New Employee – Info” Form

New Employee - Info

The “Add New Employee – Manager” Form

New Employee - Manager

The general workflow between these screens should be fairly intuitive. You can select an employee from the treeview, in the main form, and see their details. You can also click the “Add New Employee” button to go through the wizard-style process of adding a new employee’s information and selecting their manager.

It’s a very simple system, but it contains just enough elements to illustrate all of the concepts in my presentation. I’ll be using an Event Aggregator to know what user information to display, after selecting someone in the treeview. I’ll use a command object to start up the Add New Employee wizard, facilitated with a workflow service. And, it will all be wired together at runtime, with the StructureMap IoC container, illustrating the very low coupling that I am going for.

Balsamiq – It’s Not Just A Great Condiment With Chicken!

Overall, I’m very happy with the ease and usability of Balsamiq. The UI toolset that Balsamiq comes with is quite large, and is composed of the most often used, most fundamental UI elements. And with the data editing capabilities (titles, captions, lists, etc) that are available on each of the controls, it takes almost no time to string together to create compelling design. Even for the UI that aren’t covered by the default tools, there are user contributed controls that you can download and add from!

One Minor Critique

Honestly, the only glaring issue that I have with Balsamiq is the name itself. Technically, the product name is “Balsamiq Mockups”. My problem with this name comes from being heavily influenced by the user experience realm of software development. The products of Balsamiq are not “mockups”, they are wireframes. Mockups are usually full color, highly detailed, almost-production-ready renderings.

Seriously… that’s the only problem I have with this product, at this point.

The Verdict

Balsamiq Mockups is a tremendous tool that all software developers and designers should have in their toolbox. It may not “wow” your socks off with all the “cool” of an iPod or iPhone, but it doesn’t need to. It’s simple. It sticks to what it does well. And it does what it does, exceptionally well. Most importantly, though – it doesn’t get in your way when you’re trying to let the creative design juices flow! The only thing that is less intrusive is a whiteboard and markers, but that solution doesn’t let you drag, drop and resize without erasing and starting over. :)

Go spend 10 minutes trying out the online version and then spend the $79 to buy the desktop version.

There are also versions that integrate with Atlassian’s Confluence and Jira, and the XWiki system, making it that much more attractive.

The Disclaimer / Full Disclosure

To keep myself and my blog honest, I do want to note that I was given a free $79 license for the desktop edition of Balsamiq Mockups. This review is essentially my “payment” for the free license. I do want to note, however, that I am not endorsing this product simply for the sake of a license. If I felt the product was not worth my time, I would say so. The truth is, I have been prompting the user experience team at my office to look into Balsamiq and do demos to the rest of the development department. I’ve recommended it to friends and other bloggers. And most importantly – I would have paid the $79 for the license if my request for a “blogger” license was denied. It really is worth the money.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs - the amazingly awesome podcast audio hosting service that everyone should be using, and where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Product Reviews, User Experience. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Is the add new employee split into two prompts for a purpose? From the UX perspective there is no need to split it in two. In fact it’s bad as someone might fill in the first screen for an employee, then find out on the next screen they should have added their manager first.

    I would say the first field of the first form should be select manager so that this operational requirement is highlighted to the user straight away.

    If the prompt needs to be split to demonstrate a concept I would flip them round so the first step is to select their manager and then fill in their details.

    Sorry for being pedantic about demoware but I can’t turn my requirement for good UX off!

  • @Garry,

    I agree that it should be one screen to add the new employee, normally. In this case, I’m splitting it apart to illustrate a few of the key points in my presentation: workflow services, IoC container usage, etc.

    No apologies needed. I appreciate and need all the feedback I can get! :)

    I’m not sure i understand why the manager selection should come first, though. My thought was that I would want to know who I am adding to the system so that the person’s manager would be more intuitive. “I’m adding Eddie, and he works for Bob”.

    Can you expand on your thoughts?


  • Large delay on my response, sorry about that.

    The problem I see is “I’m adding Eddie, and he works for… ah crap I have to add Bob first… go back and start again”.

  • @Garry,

    ah – i see what you’re saying now. I’ll see about putting that change in place once I get the core of the presentation finished… or perhaps I’ll make that change part of the presentation, to illustrate how easy it is to change the workflow, once we get the system decoupled properly!

  • asma

    using it. loving it. i just don’t like the mapping between the different pages, it’s not as straight forward as it should be.