Use Balsamiq Mockups to Protocast

December 6, 2009 — 6 Comments

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 Robert Hoekman, Jr for this contribution in Todd Warfel’s 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.

6 responses to Use Balsamiq Mockups to Protocast

  1. 

    This is a fantastic idea. I was looking for something like this. I have used click through’s with Fireworks, but currently do not have it at my new gig. We do have Balsamiq. Thanks!

  2. 

    Actually, the blurb about protocasting in Todd’s book was my contribution, but it was indeed Todd’s genius on prototyping that brought it to your attention. I’m really glad you’re finding it valuable, and thanks for spreading the word!

  3. 

    Great stuff! I like the way you work.
    Personally I like to draft the UI on a whiteboard before I start, using http://www.MockupMagnets.com.
    Have you used these before?

Trackbacks and Pingbacks:

  1. Wireframes Magazine - December 8, 2009

    [...] is an interesting description of a protocasting technique brought to you by Theresa Neil (which she credits to Todd Zaki Warfel’s book on Prototyping). [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s