Code-Free Mobile App Prototyping

There’s a lot of talk recently in the design community about the utility and value of clickable mockups & prototypes. I agree that they can be very effective tools for a number of reasons—primarily the ability to clearly communicate user flow and proposed functionality to stakeholders on the business, design, and engineering teams. Prototyping is especially valuable when designing mobile experiences, allowing users to experience the prototype on a tablet or smartphone. They’re extremely useful for early & ongoing usability testing of design concepts prior to moving into code (in most cases, things get more expensive to change once programming comes into play).

Here’s a (mostly) quick & dirty way to transform your ideas into clickable prototype goodness without any code.

Keynotopia To The Rescue

While designing a native mobile application recently for a large insurance client I used PowerPoint templates designed by Keynotopia to give me a jump-start on the wireframing process. Obviously you should use any wireframing stencils and programs that you’re comfortable with. I went with Keynotopia because the templates provide a number of UI elements (both wireframe and with a native iOS look & feel) that allowed me to spend more time concentrating on features, flow, labeling, and layout rather than recreating common mobile design patterns. PowerPoint is also a format that any client at a large organization is comfortable with.

The first step in prototyping (after conducting some user research and gathering business requirements) was to build out each PowerPoint slide to represent a screen within the mobile application. You may also add clickable areas and animations to make the wireframes more interactive if needed. I ended up with a couple dozen screens outlining the overall app experience. The PowerPoint presentation became a great way to communicate user flow and interaction among business stakeholders and prospective users to get final sign-off on the design concept.

Transition to Smartphone

Once all parties are on board with the overall design concept, the next step is creating the prototype that will work on a mobile device. I built out each individual screen in PowerPoint (72 slides/screens in all). The PowerPoint deck was then converted into a PDF (here comes the more tedious part) after which I overlayed hyperlinks on each screen. Those links make the PDF “clickable” (or, “tappable” as the case may be); allowing users to interact with the app and navigate from screen-to-screen.

Once all of the links are wired, the PDF prototype is ready to go. Both Android and iOS tablets & phones will render PDF files—even the links. The challenge is the PDF readers contain application chrome that will obscure your design and interfere with the prototype. Keynotopia to the rescue again. For two bucks Keynotopia has an iOS app that will load and render PDFs without chrome—leaving nothing visible but your interactive prototype. It’s nothing fancy, but it allows users to focus entirely on your prototype. From there you can facilitate additional stakeholder reviews and usability testing on the device that the application was designed for.

There you have it. No coding, fully interactive mobile prototypes within hours, and no, I’m not an official Keynotopia spokesperson.

Posted in Design, Mobile, User Experience | 3 Comments »