“A Prototype is worth a thousand meetings.” – Mike Davindson
Beyond requirements documents and wireframes, a well designed prototype is the closest experience to the actual product that can be built and shown to a user in a short time frame.
Depending on the complexity of the feature, I either build my prototypes in InvisionApp or Axure or with HTML+CSS+JS.
InvisionApp Prototypes
InvisionApp is useful for using existing wire-frames built in Sketch or Illustrator, and giving them enough functionality to use them in a scripted demonstration of the functionality of the feature.
It is useful for preparing quick and dirty demonstrations of features to internal stakeholders and developers. In an agile environment, the focus is not on the artifacts of the design process, rather on the delivery of the product itself.
The quick turnaround time for creating InVision prototypes make them ideal for use in the agile development environment.
Check out an Invision prototype I’ve built for a mobile App for Self-Service at RightScale. http://bit.ly/1StiAbq
Axure Prototypes
Axure Prototypes are suited for programming the maximum fidelity in a prototype without having to actually build it out.
Axure prototypes take longer to construct, but are more robust, have reusable components that make building newer prototypes easier, and are better suited to giving in the hands of users for usability studies.
You can try one of my prototypes out here http://bit.ly/1Naf4S8
This is a prototype used to demonstrate upload functionality in Self-Service.
This axure prototype was built for use with the fonts and custom CSS that RightScale uses in it’s own products. It may not render correctly on your machine.
HTML+CSS+JS prototypes
HTML+CSS+JS prototyps are by far the closest to the real product that we can build. At RightScale, I worked on existing prototypes and modified them for use in usability studies.
You can take a look at the prototype for the new projects selector for RightScale here http://blue-eyed-vest.surge.sh/build/index.html
This prototype was developed in collaboration with the Sr UI Designer at RightScale.