Interactive Prototypes using Silverlight Sketchflow

A picture is worth thousand words AND a prototype is worth thousand pictures. I have recently read a book by Tom Kelley who works with a leading design firm called Ideo from silicon valley which has been instrumental in designing many great products which emphasizes on an early prototype that can be shared with the customer or end user to avoid an expensive last minute change or surprise.
In this blog I will touch upon Microsoft’s Silverlight Sketchflow Tool which offers an easy to build prototypes for Silverlight or WPF (Windows Presentation Foundation). This blog is for Silverlight prototyping.
1) Launch Expression Blend and create a new Silverlight or WPF sketchflow application. A default node is created for you which could be changed to home page after right clicking on the node and selecting the option from context menu. Hover on the node and there are four options available. Selected the first one to create a connected screen
2) In the example below, I have created several connected screens from Home Page such as About, Careers, Products etc… Also provided different color options using the option ‘change visual tag’

3) I also used ‘connect existing screen’ option whose purpose we shall watch after running the project. This is primarly for related nodes(screens)
4) By double clicking each node, I am able to add objects, images etc… for presenting the interactive nature of prototype
5) Used the Sketchflow animation feature to record a simple animation that rotates the image for a given period of time. The sample animation was recorded via transform/rotate option from properties while leveraging the transition time and base state option. More on this can be found in my earlier blogs on Expression Blend
6) Finally, for some of the objects placed on the design mode were componentized by right clicking the object and choosing the option ‘make into component screen’ and re-using the same as appropriate and applicable for a different node/screen instead of re-doing the same feature for a given screen. The reason shall be justified once I run the project and when the Sketchflow player is launched. (Note that you need to draw the connector from the component that needs to reuse )


7) Let’s look at the Sketchflow player that is launched once the project is compiled and ran. As seen from the below image, all the nodes are represented along with Home icon, Sketckflow Animation option and a Feedback option. The Feedback option can be interactively used and exported for a later review which is a real cool option to capture notes during the prototype demo
8) Click on the Sketchflow animation and one can see the animation that was recorded in step #5 above
9) Click on careers and click on the different location sub-menu items. Observe that by using the component feature from step #6, we could re-use the control. Click on the About and see how the contact menu persists which is a resultant of the step #3 above in that a connection to existing screen option was leveraged

With these simple steps one could express the design intent and obtain early feedback from the customer. Most importantly, some of the prototype elements could be re-used during the design/development of the actual application development . For instance, the animation part.