An illustrative image from the Origami Studio project

Origami Studio

Bringing UI prototyping to the masses through visual, auditory, and kinaesthetic education material.

See it live →

  • For

    Facebook

  • When

  • Roles

    UX Research, Product Design, Video Production, and Video Editing

  • Collaborators

    Andrew Pouliot, Blair Heuer, David Fisher, John Evans, Julius Tarng, Kara Fong, Madelin Woods, and Matej Hrescak

Opportunity

Origami had originally been developed as an extension to Quartz Composer and used internally at Facebook for physics-based prototyping. The visual, node-based, programming interface worked extremely well for ideation and communication, however made the initial learning experience difficult.

Origami Studio for macOS came to life as a successor to the original Origami extension. Addressing the educational barrier was a high priority for Facebook given that its predecessor benefited the teams who used it, and that many designers and contractors at Facebook (and beyond) could potentially benefit, too.

Roles and collaborators

I devised, developed, and implemented the official curriculum and educational material for Origami Studio, along with David Fisher from ustwo. We were supported by the core Design Tools team at Facebook—especially by Andrew Pouliot, Blair Heuer, David Fisher, John Evans, Julius Tarng, Kara Fong, Madelin Woods, and Matej Hrescak.

Coming to the solution

Interviewing folks at Facebook

David and I organised interviews with a myriad of Facebook designers, researchers, and product managers; basically anyone at Facebook who was typically involved in the design and prototyping processes. These interviews were designed to provide context as to what function a prototyping tool generally serves for different audiences, and how those different audiences typically interface with a prototyping tool.

A collection of handwritten notes
A subset of notes taken during interviews with Facebook designers, researchers, and product managers.

Design Camp is Facebook’s educational track for new employees and contractors. David and I interviewed class organisers and recent attendees to similarly collate information on the roles and expectations of prototyping tools for new designers and researchers.

The three learning styles

Both sets of interviews left us with the conclusion that there were three preferred learning styles:

  • Learning by tinkering (kinaesthetic learners)
  • Learning by following-along (visual learners)
  • Learning by studying (auditory learners)

These three types of learners are well known in educational and psychology circles, and thus expected to manifest. Surprising to us however was the fluidity of these learning styles as a person progressed in skill level. In other words, interviewees suggested they change their learning style depending on how comfortable they are with a given prototyping tool.

Proposing a curriculum structure

David and I hypothesised that a curriculum structure that mapped the kinaesthetic, visual, and auditory spectrum—with clear interlinking between each—would solve the educational challenge for Origami Studio. We reviewed notes and reinterviewed employees to find the required weighting for each educational style.

Two hand-drawn sketches
Visual learning was disproportionally high for beginners. Kinaesthetic and auditory learning rose as learners progressed. This weighting exercise also gave us clues as to where these forms of educational material should exist and how they should interlink.

Knowing general the format, placement, and connections between educational material allowed David and I to map how they might manifest. We knew the Origami team would assist in building an educational section of the website and documentation within Origami Studio itself.

Several hand-drawn sketches
The evolution of my curriculum structure sketches as our knowledge and confidence increased.

Now that we had an idea of the eventual structure, I began to focus more heavily on the actual contents of the educational curriculum. David and I worked with Design Camp leaders to identify learning goals that contribute best to mastering Origami Studio, and then proposed how these learning goals should manifest through the three learning styles.

Creating the educational content

Given that I already had a large amount of Origami Studio experience through prior Facebook engagements, David and I split work. I wrote, recorded, and edited draft kinaesthetic learning material, whilst David ingested and gave feedback on the previous round of material. We often shared this draft-state educational material with Facebook employees, as many were (fortuitously for us) starved for Origami Studio support and happy to point out what needed clarification.

The incoming educational content began to advance the fidelity of the learning web and in-app experiences. Working closely with the rest of the Design Tools team, we began to decide on core structural and stylistic formats.

A digital mockup of a website
A higher-fidelity mockup done to help solidify the Origami Studio website structure and visual language. Full resolution image here.
A hand-drawn sketch next to a resulting web page A hand-drawn sketch next to a resulting web page
Two examples of how curriculum structure sketches informed the final outcome. Note the interlinking between tutorial and examples. Credit also to Dan Lebowitz for helped shape the final website.

Producing the master content

I wrote, recorded, and edited video for all 12 tutorials. I also created 22 example files and contributed to the core documentation. The tutorials were produced with guidelines on structure as well as audio & visual considerations, from which six more tutorials have since been produced.

An example of a final video. Accompanying tutorial here.

Challenges faced

Video and tutorial length

Covering all necessary learning goals in a tutorial format was fine. Doing so in a concise (under five minutes) manner whilst maintaining simplicity and slowness was extremely challenging. David and I overcame this by heightening our standards for superfluous details and increasing our editing cadence.

Interface integration

Contextual education was a recurring theme in our interviews. I had sketched how this might manifest in the Origami Studio interface, however had to ultimately scrap this idea after realising how complicated the scope of the project was becoming.

Two hand-drawn sketches
Early sketches for integrating educational components into the Origami Studio interface. In this case, a selected patch or layer may suggest related documentation, examples, or tutorials.

Mixed imagery and video content

Adding dynamism to textual material seemed to resonate with interview requests. Similar to the interface integration ideas however, proposals simply complicated scope without a clearly-sized benefit.

A scrapped proposal for turning still images, within textual content, into more contextual video loops.

Outcomes

Internal outcome at Facebook

Usage of Origami Studio within Facebook increased dramatically once the educational material was launched. Design quality and team performance were reportedly also improved, given that designers could explore more tangible interfaces, communicate these ideas to engineers more easily, and work with researchers to test their usability more accurately.

Facebook’s Design Camp used the Origami Studio educational material as the foundation for their own; referring learners to guidance that mapped what they learned in class. New internal designers and contractors could therefore spend less time learning the tool and more time creating prototypes.

External outcome

Spotify, WhatsApp, Instagram, and other major organisations adopted Origami Studio as a prototyping tool of choice soon after the tool was launched, especially because it was well documented. Designers outside of major organisations were similarly empowered, as Origami became the most widely-used free user interface prototyping tool available. As of writing this, the tutorials we created have been viewed over 2 million times.

Links

Press