My quick demo created using Origami + QC

This article is not about comparing different prototyping tools. There are already a bunch of articles for that. Here I want to share my reflections after tried Origami shortly.

Brief intro

Origami is a library created by the Facebook Design team for Quartz Composer (QC), a node-based visual programming application from Apple. Origami provide sets of pre-made interactions, animations, and iOS elements.

Why bother it?

I have been looking for a prototyping tool to try more realistic animation. Several requirements:

  1. The tool should not by page-based, but layer-based (what are they?). I want a more realistic feeling of the prototype.
  2. It supports more than several predefined animation. So that I could go crazy with the animation.
  3. The output should be easy to share. I want to show the animation and workflow to others easily.
  4. It should be interactive. I hope to use the prototype in a user testing section later.
  5. It would be nice if the viewer works for different devices, including apple watch and apple TV.

Pros & Cons of Origami

Pros:

  1. It is free. But you do need an Apple Developer account.
  2. The animation feels native.
  3. Visual programming tools make it designer-friendly.

Cons:

  1. Control is not convenient. Assigning value to the patch is annoying. You either need to double click on the tiny area or aim and drag on it. The latter one is actually more buggy. There is no visual clue to help you aim at the area.
  2. Easy to get lost after a while. It is nodes based. Therefore, you will end up getting very messy lines all over the place if your prototype’s workflow is complex.
  3. Lack of support from Apple. It hasn’t been updated by Apple since November 2011. Not sure if it is still in active development. Thus, there might be a risk you are investing your time on a demising
  4. It is a power hog. Even running a simple prototype on my Mid 2015 MBP makes my computer’s fan spinning really hard.
  5. Sharing is going to be difficult. You need to download Origami App and connect it to your computer via a cable to try the demo on your mobile device. You can also export a video, but then it is not interactive.

Conclusion

After trying it, I came to a conclusion that Origami won’t be an ideal tool if you are creating a prototype to share with a remote team. It requires them to have QC + Origami installed on the machine to open it. It is not the end of the world, but it is going to be a little bit inconvenient for your coworkers. Also, it is not the tool that you want to use to prototype a complex user journey.  It is better to use it to try out small interactions.

However...

Facebook is going to launch its own prototyping tool later this year. This tool is built upon the same node-based programming concept but looks like a huge improvement compared to current QC based Origami.

  1. Add layer list to keep your Essay topics oriented in the sea of logic and nodes in Origami.
  2. Add the ability to run prototype offline on your phone.
  3. Add a standard iOS and Android interface library. So you can use iOS native alert component directly.
  4. Reusable custom components.

Resources