Origami Studio – Prototyping a Light Timer

I used Origami Studio to prototype a utility to help me get my 6-month-old son back to sleep at night. Here’s how and why I did what I did.

Prototype tools I currently use

I’ve been reviewing prototyping tools lately in an attempt to find the best workflow for my design team. There are roughly 40 prototyping apps and web services on the market today, each with different strengths and weaknesses. While there are a few sites that attempt to compare and explain the benefits of each tool, upon trialling the vast majority of them, I found their analysis to be wildly inaccurate. I would advocate trying them all yourself in order to understand which work for your needs.

For a short time my team and I at Racing Post used UXpin and InVision but found them unsuitable as they only allowed page-to-page transitions. We now use Axure as we need to build multi-page prototypes with fairly complex on-page interactions, use conditional logic, output to any platform, and conduct in usability tests with them. It covers most of our needs but the app can grind to a halt when building a large file. More importantly, I want to be able to prototype at higher fidelity for native mobile apps.

With the recent release of InVision’s Craft Prototype plugin for Sketch (I’m eagerly awaiting the release of their Motion app too…) I am considering using that tool as a modern sidekick to Axure. The speed at which a UI can be built in Sketch, deployed to a prototype, and then iterated upon looks revolutionary, though still limited to page-to-page transitions.

About Origami Studio

Origami Studio is Built by Facebook as an upgrade to Apple’s Quartz Composer Its UI is based on ‘visual programming’ – the concept being to link patches of logic together by dragging lines between them.

This tool’s strengths are:

  • It can make enormously high-fidelity prototypes that mimic native app interactions so closely that you wouldn’t know the difference between a prototype and the finished app in the store.
  • It outputs files that can run locally on either iOS or Android phones.
  • It integrates with Zeplin, aiding handover to developers (same as Sketch)
  • Facebook are also very responsive to Sketch updates, ensuring the tool integrates well with the design community’s favourite UI creation app.

Origami Studio's hot fix for Sketch 44 update

Its weaknesses lay in the complexity of building a prototype. Origami users need to define interactions at a more granular level, relying on a competent grasp of logical thought and a little mathematics. This means it will take longer to prototype something than most other tools. It’s no good if you want to whip up a full app prototype using lots of pages & animation very quickly. I’ve found that Principle and Axure are far better for that use case.

Deciding on a learning project

When I learn new software I need a live project to get my mind into the reality of using it. As a new father I’m always looking for ways to help me raise my son, and I had an idea for a simple app that could do just that.

We use a blackout blind in his room to help him sleep. It lets very little light into the room. When he wakes at night I use my phone to light the room while I pick him up & soothe him back to sleep.

Before entering the room launch an app with a predominantly white UI so that the ambient light is bright enough for me to see while my pupils are adjusting to such a dark environment. I have set my iPhone to auto-lock after 5mins of inactivity.

I’ve usually got him back to sleep by the time the phone locks but the sudden change from light to dark room often jolts him awake. It also means that my eyes take time to, once again, adjust to a suddenly-dark environment before placing him back in his cot.

What I need is for my phone to gradually dim from white to black over the course of five minutes.

And there it was. The ideal project with which to learn Origami – the Light Timer. An interesting, functional prototype, small enough in size for Origami to handle.

Learning to prototype the Origami way

To give me the opportunity to use some more patches I added some extra features to the idea of a gradual dimmer:

  • A countdown clock
  • Start, stop, reset buttons
  • Customisable timer duration

My Light Timer prototype took roughly three hours to create. I’d say it could look better and include some slick animation to swap the stop / reset buttons at specific states but it’ll do for now.

I had previously read through the documentation which amounts to a list of patches and what they achieve. There’s scant info about how to use them. Aside from that I had no experience using Origami. So this is the kind of thing you can expect to manage shortly after first launch of the product.

Visual programming

One aspect I struggled with at first was the concept of visual programming. In essence it’s a brilliant, self explanatory way to describe logic. It’s like creating an effects pedal board for a guitar – something I’ve spent much time on in the past.

Following lines from one patch to another is intuitive but the mathematics I used to control my prototype felt somewhat backwards to how I would go about the same challenge using JavaScript (or Framer when I get around to learning that tool). It’s just something you have to get used to. It’s good practice to expand your mind by working in different ways sometimes.

Origami Studio patch network for Light Timer utility prototype

UI design

Laying out the page uses the same controls Xcode offers, pinning each object (Origami refers to every object as a ‘layer’) to a corner or side of the centre of the screen, then assigning fixed dimensions. You can order the stack of layers in the same way as in most graphics apps, only here you can also change that order programmatically.

Using the prototype

I’ve used Light Timer a few times now and I like it. The gradual dimming of light seems to keep him asleep and the extra features I built are handy additions.

I may add a second timer to measure the total elapsed time since the countdown began so I can tell how long it actually took to successfully get him to sleep.

Beyond that it may be useful to log those times to track the effectiveness of my method. That would require building a real app so perhaps I should bump ‘learn to code Swift’ further up my personal development list…

Download the Light Timer

I’m giving away the editable Origami file for free right here so others can learn how I organised the layers and connected patches together. You could even use it to help get your own children to sleep. It’s built for an iPhone 6 as that’s what I have in my pocket. To run the Light timer locally on your phone:

  1. Download the Light_Timer.origami file
  2. Download the Origami Live app for iOS or Android
  3. Email it as an attachment to your phone
  4. Tap to view the attachment
  5. Choose Origami Live to open the file
  6. Launch the Origami Live app
  7. Light Timer will now be available to use

 

Download the Light Timer

 

Please let me know your thoughts on this in the comments below 🙂

Your thoughts etc?