Prototyping Technique and Tool

While speaking at the USI 2009 conference in Paris, I attended Todd Zaki Warfel’ paper prototyping session.  The purpose of paper prototyping is for a team to create screen mock-ups with simple tools like paper, scissors and Post-Its.  Team members would consist of graphic designers, engineers, marketing people and stakeholders.  The goal is to produce the mock-ups without relying on software tools because clients often focus on non important stuff instead of functionalities at that stage. 

I must say that I was very impressed at how effective the process is.  The workshop style session had 3 teams of 6 people each and Todd asked us to produce mock-ups of some fictional software in mere minutes.  Each team produced great designs complete with paper animations to represent on-screen objects, AJAX interaction and screen transitions.  This is a great technique to get the functionalities out of the clients’ head.

Todd is currently writing a book about prototyping called Prototyping: A Practitioner’s Guide To Prototyping that should be published later this year.

With the release of Expression Blend 3 comes a fantastic tool called ShetchFlow that let you build fully functional mock-ups with controls skinned with a sketched look.

ShetchFlow benefits are:

• Prototyping - quickly and efficiently experiment with the flow of an application UI, the layout of the individual screens and how the application will transition from one state of the application to another.
• Interactive Review - the SketchFlow player engages clients with working prototypes, collects annotations and feedback which get displayed directly on the design surface within Expression Blend.
• Documentation - Quickly create detailed project documentation for your prototypes.

The first part of this video shows how ShetchFlow works:

There you go: One great technique to gather information from the client and one great tool to test the concepts and get clients’ feedback.