marionette: enabling dynamic exploratory user studies with higher fidelity prototypes

High-fidelity prototypes/sketches are not great for testing interactions that depend on user inputs, while coded prototypes require a backend, which may be premature in the design and development cycle. We pose the following question to create a new middle ground: What if it was easy for “non-developers” to manipulate a purely front-end prototype in real time? To explore this question, we built a framework called Marionette (“puppet worked by strings”) that allows any web site/app to be dynamically adapted by a facilitator in a user study — even a simple collection of static web pages can be made to appear as a fluid workflow for a more realistic experience. To make it possible for the facilitator to make changes effectively, we created a UI supporting drag-and-drop addition of both predefined and generic widgets. In addition, we also leverage the developer tools to allow low-level modifications. An exploratory study with 10 design teams will inform us about the benefits of keeping the illusion alive in this novel stage of design/development.

(work in progress)