Prototyping interactions with Quartz Composer

On a recent project we felt the need to prototype a few of the specific interactions we were designing. Instead of diving in to a code editor, I thought I’d use something slightly more focused.

Enter Quartz Composer, a ~10 year old visual coding tool. It abstracts coding principles to a visual layer that is easier to manipulate than writing code. When used with Facebook’s Origami toolkit it’s easy to put together a working prototype.

Within a couple of hours I’d taken the visuals and put together a set of prototypes. I was then able to tweak them until they felt right and ensure the transitions matched the company’s brand.

This was only the third time I’d opened Quartz Composer and the results were great. It allowed me to create what I wanted without compromising the end result. The project team found them useful to ensure we were all on the same page when talking about interactions.

Delivering the prototypes requires a bit of thought. Quartz Composer is a Mac-only app required to interact with the prototypes. As an alternative, a quick recording of me interacting with the prototype felt perfect.

A short video made with Quickcast allows stakeholders and the project team to give their views and any feedback they may have. Project Testers can also use them to check the final implementation matches the design vision.

I’ve found Quartz Composer to be a great facilitator for playing with interactions. It enables finessing them and ensuring that they are on brand (something I find a code editor isn’t always as good at). It’s also worth noting that it’s free and quick to load—both of which are great incentives to just trying it out!

I’ve written this article to share a bit of our process and thinking so far. We haven’t shared the prototypes with the client yet, but we will try to share the results and how effective they have been soon.