Use Balsamiq Mockups to Protocast

Balsamiq Mockups new export to PDF feature opens up a whole range of possibilities for prototyping. Not only can you use the PDF with click through links for usability testing, you can also create a protocast of your designs for your clients, end users or the development team. A protocast is a prototype delivered as a screencast.

What I like to do is create a storyboard for each of the major workflows, then wireframe the screens. Link them together and then create a screencast of the happy path, narrating while clicking through the screens. My protocasts are different depending on the audience. If the audience is developers I walk through the application and discuss the flow and features, if the audience is the client or their end users, I stick to the story in the storyboard. Thanks to Todd Warfel for describing this technique in his new book Prototyping: A Practitioners Guide to Prototyping, Rosenfeld Media.

I used to do this in OmniGraffle- see example below for a reference application we designed for PayPal X. But now I can do the same thing quicker with Balsamiq!

Storyboard

The storyboard helped us nail down the two primary workflows we wanted to design for.

Protocast

This protocast was created for the developers who were coding the simulation.

Finished Product

The finished product is on PayPal X.com, although you have to login to PayPal to try the reference applications.