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.
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.
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.
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.
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.
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.
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.
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.
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.
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.