Prototype like writing code, without writing code — my first impression of ProtoPie.
I needed to quickly prototype an interaction for a mobile app project over the weekend, and decided to try out ProtoPie. This is an overview of my first impression.
0. Intro
As a UX Designer, I usually design in Sketch and use the built-in prototyping feature or InVision primarily to show the user flow. Rarely do I have the need to prototype micro-interactions or animations. But this time, I wanted to design a floating action button and show the interactions in hi-fidelity.
So screen-linking tools like InVision or Marvel weren’t going to cut it. I’ve used Adobe XD and UXPin a lot when I was at Microsoft’s Turn 10 Studios. But I no longer had access to it, and wanted to try something more focused on mobile interaction design that plays well with Sketch. I also wanted to try a more “logic” based tool than an “animation” based tool (e.g. Principle).
Enter ProtoPie.
1. Concept Model
ProtoPie is one-of-a-kind prototyping tool that allows you to build interactions based on Object, Trigger, and Response. I was immediately sold when I saw this concept model from their website:
Being an engineer-turned-designer, this concept really resonated with me and I jumped right in to prototyping.
2. Building Interactions
The initial process of installing the app and importing my Sketch project was a breeze. After skimming through a few tutorials, I started building out the interactions.
I wanted to build a floating action button with sub-menus, so I mainly worked with the “Tap” Trigger followed by the “Opacity” Response to show/hide the sub-menus.
3. Conditional Logic
It gets interesting when you start thinking about advanced interactions which require conditional logic and multiple flows.
I wanted to build a button that would “move the position of text” on tap. If the text is on the top, move it to the bottom. If it’s on the bottom, move it to the top.
Even with Hi-fi prototyping tools, building this simple conditional logic can become really complicated. However, with ProtoPie’s “Conditional Trigger”, I only had to define one set of rules on a single object, rather than creating multiple objects or hot spots to mimic the logical flow.
4. Preview and Play
You can preview your prototype on your computer, or play it on iOS and Android devices via ProtoPie Player apps. I was designing on my rMBP with iPhone 6 Plus and Note 8 next to me. And They worked seamlessly for me.
You can also share it via a link, like this:
5. Outro
At the end of the day, I was pretty intrigued with ProtoPie’s concept model, and satisfied with what I was able to build with it. It felt as though I was prototyping like I was writing code, without actually writing code. I will definitely continue to explore its more advanced interaction design features.
If you’ve ever been frustrated with other tools’ take on hi-fi prototyping, give ProtoPie a shot and let me know your thoughts!
