UI Sketches for Distributed Teams

In the same way that user stories help focus a software team’s work around business value, starting construction of a user story with the UI keeps focus on the core user experience through which that business value is received. Early in my career I’d make the most beautiful Photoshop UI mockups I could. I thought that the more the mockup looked like the final design, the better the conversation with the customer would be. Over time, I’ve learned that the opposite is true. The more the mockup looks like a sketch or a draft—something changeable—the more collaboration and early feedback I get from the customer. For collocated teams, this is easy: simply sketch the UIs on paper. Use a big marker so it’s not possible to put in too much detail. Hand over the sketch and let the customer mark it up.

What I’ve been missing, however, is a good tool to recommend for distributed teams (or teams with a remote Product Owner). Until now.

All the tools I’d tried (Photoshop, Visio, Power Point, etc.) took longer than paper or produced results that looked too polished or weren’t easy to collaborate around. Faxing or scanning the paper sketch worked pretty well, but somehow scanning always seemed to be more trouble than it ought to be.

The solution I’ve found is Balsamiq Mockups. [Disclosure: I got a free review copy, but I was prepared to buy it and write about it here within minutes of trying the evaluation version.] Mockups is an Adobe AIR program (think stand-alone Flash application), so it runs equally well on Windows or OS X. It features a library of sketches of common UI elements that can be positioned, resized, and annotated. I can build sketches here faster than I can draw them on paper, but they don’t look too polished.

There are versions of the program for wikis that specifically support collaboration around UI sketches, but I haven’t tried those.

If you’re in a situation where you can’t use paper for UI mockups, I recommend that you consider Balsamiq Mockups as an alternative. The website has more information, a trial version, and screencasts of the desktop and wiki versions of the program.