10 Steps to Prototyping with POP

Over the years I've spent a not inconsiderable amount of time helping to choreograph enormous, complicated, expensive systems so that specific groups of human beings can derive benefit from them. And whether the end product of those efforts was a multistory building or an app running on a mobile device, one of the best ways to figure out how all the parts and pieces should fit together has been to build a tiny, simple, cheap representation of the thing (or of parts of the thing) in order to test it: in short, to build a prototype.

In a perfect world prototypes are executed quickly, answer a specific question, prevent you from falling in love with bad ideas, allow you to communicate your strategy to others then gather feedback, and can bake you a tasty pecan pie. In the real world, it's not always easy to build a prototype that definitively moves your project or your thinking forward. Make sure you're asking yourself the right questions and take a moment to consciously select the right prototyping tool for the task at hand. The methods and techniques you choose to test your ideas will have an impact on whatever it is you end up designing.

So in that spirit, I'll discuss an app I recently re-discovered called POP that makes building quick prototypes for iPhone (using an iPhone) a breeze. With POP, you snap photos of your freehand sketches, bring them to life by linking them together to simulate the user experience, and then easily share your prototype with others. If your project is farther along, you can save your design comps to your phone's photo gallery, upload them to POP, and create a higher-fidelity prototype. 

Here's how to use POP:

1. Download the app!

2. Open up POP and tap the plus icon in the upper left hand corner to add a new project. Enter a name for your new prototype in the pop up and hit save.

3. Take or choose a photo of your paper sketch or digital comp by tapping the appropriate icon in the tab bar at the bottom of the  screen, then move, scale, and crop the image to fit within the on-screen guides. Tap save.

4. Add the rest of your screens (don't worry if your ideas aren't fully worked out, you can always add, replace, or remove screens later!)

5. Reorder the screens if necessary by long-pressing the screen you want to move. It will wiggle slightly to indicate that you can reposition it. The screen in the upper left corner is the one your prototype will launch with.

6. To link screens together, tap a particular screen to bring it into focus. Tap the plus icon to create a hotspot on screen. You can reposition and shrink or enlarge the hot-spotted area by dragging the hotspot and its corners. 

7. When you've placed the hotspot exactly where you want it, tap "Link To" to choose which screen should appear when the user taps the hotspot area. You can also choose a transition from the list at the bottom of the screen. The basic transition is a cross-fade, but you can also slide your next screen into view from the right or left, or from the top or bottom.

8. Repeat until all of your screens are properly linked and transitioning properly. Tap the play icon to test your prototype.

9. When you've edited your prototype to your satisfaction, tap the share icon in the lower right corner of the screen. You can share your prototype through Facebook, Twitter, Mail, or even via Message. Anyone with the share link can see your prototype! 

10. Tapping your share link on an iPhone will open the prototype in Safari. You'll be prompted to save the page to your home screen, and doing so will place an app icon there. Tap the icon to view the prototype.

POP is a great tool because everything is happening at one to one scale: you sketch your ideas out at full size on a sketch pad, snap a photo with your phone, and then test your prototype in the exact setting in which your users will experience your app (the iPhone). Proper context gives you a clearer understanding of the experience you're creating and makes it easier to communicate it to others. 

Download POP app here and test it out for yourself!