What I Learned From Prototyping an Entire App in Pixate
For a long time, product designers were expected to deliver static designs and maybe a few After Effects videos demonstrating more complex interactions and animations. But now, with the proliferation of powerful and fast prototyping tools like Pixate, Principle, Origami, and FramerJS, there’s very little excuse for designers not to deliver fully functional prototypes with their tool of choice.
For me, that tool is Pixate.
What is Pixate?
Pixate is a code-free, drag-and-drop prototyping tool that empowers designers to quickly translate ideas for interactions into functional prototypes. Interfaces are built using exported assets as layers. Layers are controlled through actions (click, drag, scroll, etc.) which result in animations such as move, scale, and fade.
There are several reasons why handing over static mockups and wishing for the best is not enough:
- Explaining interactions with hand gestures to an engineer is not only unfair, it’s downright ridiculous.
- You don’t really know what an interaction is going to feel like until you actually play with it on a device.
- Without having a tool to explore interactions, your potential for creating a better user experience is limited.
Pixate Prototype: Examples of a few involved interactions that could only be conveyed via prototyping.
When I first started designing apps, I thought my job was to make things look pretty, and I regrettably admit to focusing on making things look pretty over making things functional. Over time, I’ve come to appreciate the fact that the craft in what we do is all about finding the balance. As a steadfast rule, I will always prioritize clarity over aesthetics.
If you design something beautiful, but the user is confused, you’ve failed in some ways as a product designer. At the end of the day, we have to remind ourselves that an app is more a tool than a painting. Spending an inordinate amount of time making your static mockups look pixel-perfect without considering how they feel in motion is prioritizing aesthetics over clarity.
That’s why I try my best to get out of Sketch and hop into Pixate as soon as possible. I want my interactions to inform my visuals and not the other way around. Prototyping illuminates any potential oversights I may have missed and allows me to come up with better solutions before handing over a design to my engineers.
Nothing is worse than having an engineer ask you a question, only to realize you didn’t consider a particular edge case. Often the combination of lack of foresight and strict timelines begets band-aid solutions that frequently result in a mediocre or poor experience. Anytime you have the opportunity to learn about a flaw in your design and rethink it from the ground up, you should.
While there are clearly many reasons why product designers should build prototypes, I would be doing a disservice if I didn’t share the potential cons of building and maintaining a fully interactive prototype.
One of my biggest fears as a designer is becoming a bottleneck for engineering. I do my best to stay a few sprints ahead to allow myself time to iterate. Unfortunately, working on static mockups in Sketch, going to meetings, making changes to designs after design reviews, and updating the Sketch file all on a tight deadline is enough to keep any designer busy. In some situations, it just might not be feasible to add an additional high-fidelity prototype to your workload.
There are also diminishing returns when it comes to making small tweaks here and there, especially when they don’t help you uncover anything new, but are simply to maintain consistency between the prototype and your mockups in Sketch. This is where I tend to struggle in my current workflow. The time spent updating superficial parts of a prototype could be better spent on pushing a design or getting a leg up on engineering by working on the next section of an app.
Pixate itself also has a few shortcomings that make it challenging to develop an entire prototype in a single file.
- In my most recent prototype I had over 500 assets, which would consistently cause the companion app to crash. When it came time for user testing, it proved to be extremely stressful. I would often open it simultaneously on multiple devices, cross my fingers, and hope that it would successfully load on at least one of the devices.
- Having a lot of assets can make Pixate feel extremely sluggish. Rearranging layers or simply moving around your workspace can quickly feel like a chore.
Example of the lag experienced in Pixate Studio when the asset count gets high.
Both of these concerns, while seemingly annoying, are not enough for me to give up Pixate as my prototyping tool of choice. It’s not because I’m a masochist with time to burn, but rather, it’s a testament to how valuable and powerful I find Pixate to be. I do, however, hope these problems will be addressed in future updates.
Try It Out
If you haven’t tried Pixate yet, but you’re interested in picking it up, I highly encourage you to check out their tutorials here.
I found it a lot easier to grasp the concepts by actually replicating all of the basic tutorials instead of just watching them. It took me about a day to go through all of the tutorials, but upon completion, I had enough confidence and blind enthusiasm to sustain my interest in becoming proficient with Pixate over the course of a few weeks.
Another benefit of Pixate is the community that comes with it. If you ever feel stuck or have a question, it’s probably already been answered by a robot posing to be a Pixate employee named Cody.
Play Hard, Work Hard
My experience using Pixate has felt more like playing Monument Valley or Minecraft than using a tool for work. Being able to go from an idea to a functional prototype in minutes has been the single most empowering development in my career as a product designer.
The ability to convey an idea with a tool like Sketch is like writing a story with the limited vocabulary of 300 words. You’ll probably be able to convey an idea with that set of words, but it’s far from ideal. Pixate, on the other hand, fills in the gaps and makes me feel like I have the entire Oxford dictionary in my head. But, like a dictionary, it’s only valuable if you know how to use the words effectively.
Pixate also plans to release an update that will allow you to export your Pixate prototype to Xcode. The implications of this are extremely exciting to me. While your engineers most likely will not be able to copy and paste large chunks of this automated code into an app without some tinkering, it’s a step in the right direction where, instead of just offering blueprints, videos, and hand gestures that need to be interpreted, designers closely contribute to the final product.