Introduction
Prototyping is one of the important phases in the design process to make ideas tangible. In one of our courses we were tasked to develop a ProtoPie prototype of one of our projects. We chose to develop our concept from the gamification course this semester.
I really loved this approach to high-fidelity prototyping. In my experience Figma sometimes limits what is feasible to showcase in a prototype. ProtoPie allows me to create realistic prototypes that are similar to a final product. In this research article, I will share how I went about getting started in ProtoPie, how I learned the software and how it differs from Figma.
What is ProtoPie?
ProtoPie is a tool that allows you to create interactive prototypes. The prototypes look, feel and behave like a finished software product, even though it is a no-code tool. Unlike static pages a prototypes can simulate real interactions and verify concepts. Button clicks and screen transitions can be simulated in Figma, but ProtoPie offers to simulate complex interactions like voice commands or tilt interactions, for example. You can use your device’s native sensor systems, such as the camera, microphone or even GPS.
How is ProtoPie different from Figma?
Both ProtoPie and Figma are design tools, but they serve different purposes. Figma is my choice when it comes to designing websites, user interfaces and simple prototyping. I love the collaborative aspect of Figma. In ProtoPie we struggled with collaboration. We had to save multiple versions of a file to “collaborate”. One person worked on one part of the prototype, while the other finished a different section and then we combined them. It was not optimal.
However ProtoPie is the better choice for dynamic high-fidelity prototypes. For example, I could build a password validation that shows different reactions depending on the input.
First project
When we started to get to know the software, we decided to do the ProtoPie 101 crash course. It was a really nice e-learning experience. Everything was easy to understand and the accompanying Figma Files were well prepared. The course starts with the basics, which is perfect if you’ve never worked with ProtoPie or other prototyping software beforehand.
I started by learning the core concepts – such as triggers and reactions. They form the basis for interactions. My first project was to import a design from Figma, create a simple button interaction and test it on my smartphone. The Figma to ProtoPie Plugin worked great. The Smartphone App for displaying prototypes was not as user-friendly but worked great after all. By the end of the lessons, I started to get to a hang of it. Most of the advanced features are self explanatory if you understood the basic concepts.
Working with native sensors
After exploring the basic concepts of triggers and reactions, we viewed the list of supported sensors and inputs. Working with native sensors from devices is where ProtoPie really opened up new possibilities to our projects. It means that you can not only create simple touch interactions, but also prototypes that respond to motion, voice, camera or other device inputs. This was a completely new to me, and it sparked new ideas on what is possible with prototyping for projects in my portfolio.
I loved that I could delve into these functions without knowing how to code. For example, I created a prototype that uses my smartphone’s camera input as part of the interaction. I was introduced to voice commands, allowing me to integrate voice control into a prototype – something that is becoming increasingly important in my opinion. I tested this in a simple example where an app responded to the word “start” and then triggered an animation.
After that we focused back on the project we chose to enhance with this ProtoPie prototype. It is an App that connects people through gamified experiences. We compared different sensors and decided to use the native iPhone compass for our game.
Conclusion
The tool helped us complete our concept and make the gamified experience tangible. The hands-on approach made it easy to learn step-by-step and feel successful early on in the learning curve. I want to continue to learn how to use variables and formulas to create more dynamic interactions. I would like to build prototype in the future that makes use of the “Send and Receive” feature. This way I could connect multiple screens together to create a multi-screen experience. I will keep this in the back of my mind for a future project. By the end of the course, I feel like I have a complete toolset in hand for prototypes.
Links
https://learn.protopie.io/course/protopie-101
