Over the time, I have established rapid prototyping as a central and ongoing activity of my design process. With all the assets that I am creating, I am able to communicate the intent and validate the design assumptions.

However, I am aware of limitations of my current approach and prototyping tools. With respect to that, I designed a new prototyping process that I would like to adopt in near future.

Current limitations

I am carefully watching all the new prototyping tools. I am signing up for betas and trying them out…but they all seems to share a few key limitations.

They all produce throw-away outputs, and they mostly work with pages, not single-page states.

In the world of agile software development, it is simply not possible for me to spend weeks creating an interactive Axure Software or UXPin prototype upfront and validate it…So that I can then just throw it away and re-create the same UI in Illustrator to deliver final and locked design specifications. And only when the actual product increment will be implemented, I can finally experience the product UI in the browser with all its aspects — from informational architecture to data visualisation and edge cases.

With my new prototyping process, I wanted to improve this in four major areas:

• Reduce throw-away work. I am using a number of design techniques to communicate the design intent — Scenarios, Diagrams, Use Cases and Wireframes. I want to make sure they all have a specific purpose. Either that purpose is design exploration, validation or specification. I want to reduce outputs that I create just to "show something to someone". Showing anything does not help in shipping products, it introduces a lot of waste and easily slips into Parallel reality design.
• Work with the data. I need to have a better way how to validate data visualisation patterns, such as lists. For the app I am working on, scrolling, paginating and sorting through a simple list can become crucial interaction pattern.
• Design in Browser. It simply takes me too long until I can validate the UI running in the browser.
• Design validation. Without a real HTML prototype, any usability testing gets tricky. I am not really validating the product, but a mockup of the product UI.

Rapid prototyping

I have quite some history with various prototyping tools, but over the time, I settled down to:

• Pen and Paper
• Gliffy diagrams embedded in Internal Wiki
• Adobe Illustrator
• InVision

By using this toolset, I can quickly capture, demonstrate and validate the design intention. InVision is allowing me to keep all the assets always up-to-date, and create simple linear click-through prototypes.

Design System

Design System (Do not call it Style Guide) is the key tool in transiting the UI design from the annotated wireframes and diagrams into code and thus into the browser. I am already maintaining the Atomic Design System. But I am still missing the right framework to maintain components in code and the design system remains to be set of annotated pages.

Design Validation

In near future, I would like to start building HTML prototypes to validate the design with real users. My goal is to find a framework, that will allow me to stitch a single purpose prototype by referencing real design system components and use static mock data for the content.

This workflow would allow me to reduce throw-away work and validate the product UI in a browser. I would be able to validate product's form and function as one coherent entity, and capture user feedback targeting real UI components.

Conclusions

It might take me a while until I fully adopt this process. The hardest part would be to build the actual Atomic Design System and find a simple and easy HTML prototyping framework that would fit my workflow. I am very lame when it comes to coding skills.