POP: Your Sketched Wireframes Brought to Life

Developing iOS apps is a very challenging process but one area that takes up more time than anything else is its design. It doesn’t matter what your app can do — if it’s poorly designed then people just won’t use it.

POP‘s aim is to make the early stages of testing an app’s design as effortless as possible by making use of the most fundamental part of process — your sketches.

Making Things POP

POP works by providing a way to navigate between sketches of wireframes you’ve made. Whether you’re building a complicated and in-depth app or simply the next big Twitter client, being able to navigate through the sketches you’ve made will give you a great advantage when it comes to developing the best user experience. If you find it takes too many taps to switch between two often-used features of your new app then it’s much better to find out now than when the app is complete.

POP works by creating links between images that let you navigate between images depending on where you've tapped.

POP works by creating links between images that let you navigate between images depending on where you’ve tapped.

POP supports multiple projects so you can distinguish between different apps if you’re working on more than one thing at a time. The developers plan to charge for using more than two projects, a feature which is currently only half-implemented. As pricing hasn’t yet been finalised (the developers have said they will not charge for the app until it is good enough), you can redeem an “Early Bird” code within the app that will provide at least an additional five projects for free.

Importing Sketches

As you’d expect, sketches can be imported from your iPhone’s Photo Library or, more easily, directly using the camera. A handy outline is included on the camera view and you can also opt to take only a B&W image if you’d prefer.

After selecting a project, you can use the camera to take snaps of drawings.

After selecting a project, you can use the camera to take snaps of drawings.

Images can be cropped to ensure they’re correctly sized before being imported so that you’re not left with any inconsistent images. Each image can then be given a title within the app as well as description, if necessary.

If you don’t yet have an app idea or want to get a feel of how POP works, there’s a sample app that’s included which is fully complete.

Hello World

Building your own app prototype using your imported sketches is really well done and incredibly simple. Tapping an image will display a larger version and it’s then just a case of adding areas that can be tapped over the respective element, before selecting which image to link it to. Complete this for all your images and you have a fully working prototype app to test for usability.

Adding a link is easy and you can specify which image it links to.

Adding a link is easy and you can specify which image it links to.

Tapping the Play button “runs” the app, letting you use all of the areas you’ve highlighted and then navigate around your app. There’s no overlay displayed when running so you don’t instantly see where you’ve specified these areas but tapping anywhere there isn’t one will reveal them for a moment. This is to keep as much of the POP interface away from your app as possible.

Once you're ready to test it out, your "app" is launched full-screen.

Once you’re ready to test it out, your “app” is launched full-screen.

I couldn’t figure out how to “quit” a prototype app and ended up pressing the home button and then opening POP again. This then stops the process but I couldn’t tell if this was by design (to better mimic how an app would run) or an oversight on my, or the developers, part. If there is a correct way to do it, it isn’t obvious.

Sharing

Provided you signed up and verified your email address, or signed in with Facebook, you can share your completed app wireframes online. A unique link is generated and wireframes are stored on POP’s servers. You can toggle whether to keep it private or public, doing so will disable Twitter and Facebook sharing since these are publicly accessible. That link is then controlled only by you.

Sharing your "apps" is straightforward. You can also increase the number of apps you have for free (for now).

Sharing your “apps” is straightforward. You can also increase the number of apps you have for free (for now).

The web interface works really well and it allows visitors to get a feel of the app. For developers remotely collaborating or you want to get the opinion of a friend on how an app feels, they don’t need POP to do it.

A slight problem I had was that after a few days of testing, I never got my verification email. I didn’t mind then logging into Facebook but for those without a Facebook account or who would rather not use it for the purposes of logging in, you may be waiting a while to verify. Without verification, you can’t use any of the sharing capabilities or redeem the offer of additional slots.

Conclusion

POP is a great app that any developer should have on their iPhone. It’s really hard not to like POP as it does exactly what it sets out to do in a really fun and easy to use way. Although the app is free and you can get additional app slots for free using their Early Bird access, there’s no telling what pricing would be like in the future so even if you don’t necessarily plan on using the app anytime soon, it’s still worth getting it now.


Summary

A great app for any iOS developer looking for an easy way to test sketched-out wireframes of potential new apps.

8