What we learned from prototyping with Facebook Origami

We at Usersnap are always looking for new ways and workflows in order to be more productive.

This week our UI / UX designer Benedikt worked on some new design drafts. Instead of using a traditional approach of prototyping we ended up using Facebook Origami.

In this post we are going to share some key takeaways and lessons learned for getting started with Facebook Origami. Check out our Facebook Origami review.

What is Origami?

So you might ask: Origami, what?

Origami is a free design prototyping tool developed by Facebook. Yes. Facebook. Some mighty developers have created this prototyping tool and published it for free & open source.

Origami let you create design workflows on the basis of your design drafts. You can run those prototypes even on your iPhone or iPad.

Why should you use Origami?

You might wonder whether to use Origami or not. Well, there’s no clear answer to that question. But our first trial runs convinced us to integrated it deeper into our workflows.

Why?

Because Origami already helped us build better user flows and therefore a better user experience.

With Facebook Origami, you can build sophisticated user interfaces without any development skills needed. And the great thing about it is that you can export code snippets which help your developers work faster and be more efficient when they build the actual application.

Easy to get started.

Learning Origami is easy. Our UI / UX designer Benedikt, who started working with it in the morning, was already able to sketch out some great user workflows for some new product improvements by the end of the work day.

How he got started. There are some great tutorials available.

Better user stories, prototypes and workflows

There are a lot of reasons to start using – yet another – prototyping tool. Especially when working on complex websites or web application, you should design & present in style.

Origami offers a powerful set of tools in order to display user flows.

Scroll, Swipe or tap gestures which are commonly used on mobile devices can easily be set up with Origami.

Making communication between designers & developers easy

We’ve all been there. Designers gonna design and developers gonna code.

Transforming design drafts into interactive websites or apps isn’t that easy. Especially since you have to bridge the world between Photoshop and your developer’s programming editor. This leaves a lot of room for misunderstandings.

Interactive design drafts

If you’ve ever created some first prototypes or design drafts, you’d probably know the situation and how hard it is to express and display interactions and animations.

The real user experiences comes with that interactive prototype. Especially when presenting drafts and prototypes to clients and people who are not so tech savvy, Origami is a true winner. You cannot get a better understanding of the end result with any other traditional design workflow than what you can with Origami.

UX testing while prototyping

Because you’re constantly working on your interactive prototype with the Quartz composer, chances of a better UX understanding are much higher.

You can also instantly look at the user flow and check if it is still the best user experience.

From prototyping to production at no time.

Since Facebook Origami lets you export code snippets, your project steps from prototyping to development will be way more efficient.

Your prototype’s code can go directly into production.

What else?

Using Facebook Origami for the first time was quite a joy. It’s easy to learn and projects can be set up super fast. The interface is intuitive and self-explanatory.

With its already published Version 2, Facebook Origami has made a great leap forward and we’re excited to see how our designers and developers will make use of it in the future.

PS: For further reads on Origami, I recommend that you check out this sitepoint article in detail.
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.