Prototyping with Origami Studio as a beginner
Why Origami Studio
In my workplace, Origami Studio offers more benefits compared with other tools. It enables me to integrate the hardware capabilities into my designs. For example, my prototype allowed me to take photos with my phone camera. Additionally, as a tool built by my company Facebook, it accelerated my prototyping process by leveraging internal Origami components.
In the past, I tried to learn Origami several times but gave up due to the steep learning curve. I regained my hope during the quarantine when I carved out a daily routine to commit to this task.
My learning process
Step 1: Grasp the basics
To begin with, I watched the tutorials to develop a basic understanding of the Origami tool. However, I encountered a roadblock when learning patches. Patches, the powerful building blocks in Origami that resemble coding, were something I was intimidated by and was my steep learning curve.
With courage, I pushed forward. I realized that operating the patches was not as complicated as I thought. By having a good grasp of the basics, I began to create common interactions such as scrolling and tapping.
Keep going, don’t let the patches stop you!
Step 2: Create prototypes of real apps
To activate my knowledge, I applied the tutorials to real-life examples. I deconstructed my favorite app — Facebook and recreated its interactions. For example, I prototyped how users can click the tab bar to navigate through the Facebook app. I mocked up how users can post Facebook stories from their photo albums. Additionally, I learned how to use live data such as my friend lists to make my prototypes feel more realistic.
Through this process, I trained my mind to be observant of the details. For example, even a simple animation like enlarging a photo takes many delicate steps, such as controlling timing and transparency changes.
From this point onward, Origami registered better for me.
Step 3: Take off the training wheels
Moving forward, I was able to create prototypes for my work projects. For example, when designing a new flow of Facebook settings, I prototyped several solutions with Origami.
These interactive prototypes were more persuasive than static designs, which allowed my team to empathize with the user’s experience. Because of this, we were able to make quicker and more informed decisions.
The benefits: what I have learned from prototyping
Prototyping transformed me to think more deeply about interaction patterns. I began to appreciate the consideration behind the delightful animations and built an understanding of the implementation cost. This knowledge allowed me to create feasible designs and collaborate better with my engineer partners.
Think of your favorite dish from a restaurant. You love it. Once you tried to make the dish from scratch by yourself, you realized how many steps, time, and ingredients were required. Now with a new perspective, you appreciate this dish much more.
Prototyping is a win-win! If you want to learn Origami, you can find all the needed information on its website.
