Building a TV Prototype with ProtoPie

Intro

My team searched for a prototyping system that could truly mimic a real TV & remote experience. Most of the prototyping software didn’t even come close, or was purely mobile-focused. The only software that had the potential to work was Origami, which became cumbersome in large flows. This leads us to ProtoPie…

Building the TV

I started with the TV first because it would have the most complexity. I used the HD 1080p screen size for my TV, which fits perfectly on any common TV screen. From there, I imported my designs from Sketch and organized my layers. ProtoPie does a good job of importing things, but you still will have to rebuild a lot in the “Pie” if you want more control over an element.

Prototyping the TV

TV is harder than a mobile device because there is always going to be one element that is “selected” and from there, you can press up, down, right, left, and enter. So, you can imagine how many triggers each element had.

Pro Tip: To quickly iterate, I first used the arrows on my keyboard so that I could quickly test a trigger. Have ProtoPie open in your external monitor, and the preview window on your laptop screen (we will use the TV later).

Conditions

This will become your best friend — and makes everything work. When you create a trigger “Arrow Down or “Down”, you will then create a condition that listens for some other element. Usually, it’s the current element that is active or selected.

Pro Tip: Try to have each section of elements have the same condition listener, so that it moves faster and is easier to organize. You can have as many conditions as you want. But like symbolizing in Sketch, too much can be a bad thing.

Adding complexity

ProtoPie can do a lot! I’m not going to go into all the things it can do (heck I don’t even know all the things it can do). I used some Lottie animations that I created in After Effects which plugged in nicely. I also used some formulas to manipulate some numbers simulating a thermostat going up and down.

Pro Tip: Add sound to each TV movement so that the user has both visual and audible feedback. Google has some great free sound UI to choose from. ProtoPie’s documentation won’t help you. So, this is what you have to do. Create a trigger “Arrow left”. Then add three sounds: Play, Pause and Seek. The first Play should start at 0:00. The Pause should have a start delay at 0.1 (after the sound effect finishes). The third one, Seek, should seek to 0:00 with a start delay at 0.2… It feels like a hack, but hey, it worked!

Testing It on the TV

Once everything is working smoothly, I pushed the preview screen to the tv (clicked full screen). From there I was able to test the hover state, and the font readability at 15 feet. This allowed me to double-check that everything was readable and had the proper spacing at that distance.

Pro Tip: It’s better to risk being a little big rather than a little too small. Cross reference Apple and Android’s TV standards to make sure you are in the median range. Use the worst photos you can find to make sure your font is readable. We both know your dribbble cool background photos don’t translate to real life.

Building the phone remote

At this point, you are a pro and can build the remote pretty quickly. Now your triggers are going to be a tap. On that same trigger, you are going to add a “Send”. Then you will have two boxes to the right, namely, “Channel” and “Message”. Channel should say ProtoPie Studio. The message is what is being sent to your other prototype. Keep it simple stupid (KISS), if the tap is a right, the message should say “right”.

Pro Tip: Add a “vibrate” to each tap so that the phone vibrates when you tap the remote. This type of haptic feedback allows a user to get a rhythm and quickly tap through elements.

TV listening to the Remote

Now go back into your TV “Pie” and do either or. At the moment, ProtoPie does not allow you to add a “receive” trigger to your triggers. So, you have to copy and paste every trigger you made and use a “Receive” as the main trigger. The channel should still say “ProtoPie” studio, and the Message should be the exact same message you wrote in your Remote “Pie”. If it’s “arrow down” in your tv, then it is “down” for both the send and receive message.

Bringing it together

First, have both ProtoPie’s open. Then take the remote Pie and click on device. Use your phone to read the QR code that is displayed. Naturally, you will need the app installed. Once it is showing on your phone, minimize the remote Pie and only have your TV pie up; this will leave your preview window just showing the TV prototype. From here, make it full screen on the TV and you are done!

Pro Tip: After a certain time, the preview screen might show your phone prototype. If this occurs, just re-follow that same process of scanning the phone with the QR code — and it should work. This occurred during some of our testing participants, but it’s fine so don’t freak out.

Final Thoughts

My threshold for prototype animation is very high. I use After Effects for most of my animation prototyping, but I am amazed by what ProtoPie can achieve. You need real tools to mimic complex movement and animation. If your world is Invision hot spots, I would challenge yourself to test a more complex prototyping tool.