Why You Should Be Prototyping Your App Designs

By May 31, 2017June 17th, 2017Mobile App UI

More often, user interface (UI) designers and user experience (UX) designers are using app-prototyping tools to take their UI designs on test drives earlier in the app lifecycle.


This capability can be a game-changer, in some cases removing barriers to rapid iteration and development that have frustrated teams in the past—things like late-in-the-game user testing data, last-minute tweaks, slower feedback cycles, and delayed approvals.

Prototyping applications enables UI designers to share working prototypes of screen designs so that experimentation, testing, feedback, and approvals can happen before development even begins—in some cases, as early as the sketching and wireframing phases. For teams using Design Thinking, it’s one of the best ways to can keep up with the fast pace of iteration required to keep ideas (and products) moving. Designs can be imported and interactivity added, allowing users to click through apps, scroll, toggle, and generally engage with an app exactly how they will once it’s built.

There are many different options on the market with a slew of features that may make one or the other more attractive to you or your team, whether it’s pricing, third-party integrations, or advanced features like file syncing and real-time presentation modes. In this article, we’ll look at a few reasons why design teams at companies like Paypal, Twitter, Uber, and Netflix rely on prototyping tools like InVision, Flinto, Origami Studio, and Justinmind—and why you should use one, too.

See designs in action.

Just import designs into a platform to get started. InVision, Origami, Justinmind and Flinto all allow import of PhotoShop or Sketch files (some both), whether it’s natively or via a plugin.

Any actions you want your app’s UI to have you can make happen with a prototype: gestures, animations, scrolling, transitions, effects, and other “micro-behaviors.” Dropping in screens you’ve already designed—whether they’re simply sketches or more involved designs—allows you to hit the ground running.

In Flinto, for example, interactive screens are visually linked, showing users where each action will take them within an app. InVision similarly lets you add behaviors to designs, but note that the designs have to be created separate of the tool—you can’t create layouts within it like you can with a more all-in-one platform like Justinmind, which lets you create wireframes in the app with templates, pre-loaded UI kits, and a drag-and-drop interface.

Fire up the feedback cycle.

Prototyping helps to truncate the review/change cycle by getting clients, business partners, product managers, and anyone else who needs to weigh in on the feedback loop earlier with a working, clickable prototype.

The design team at Shopify uses InVision “as a feedback mechanism to allow asynchronous feedback on a design. InVision is great when we’re moving super fast—it cuts down on the amount of meetings we must have.” InVision also enables real-time design sharing and collaboration between teams, as well as browser-based design presentation tools that make it easy to share designs with clients with a bit more polish, if you need it. During real-time design meetings, presenters can use virtual laser pointers, real-time sketches and notes, and group chats to talk through designs and incorporate feedback as you go.

Justinmind has commenting built in, too, so users can login and leave feedback you can track and organize to turn into actionable changes.

Make tweaks before development starts.

By having interactive prototypes that designers can save and share on mobile devices, teams are able to see their designs in action, then make tweaks and adjustments to the UX before those tweaks become (more expensive and difficult) changes to the code. It lets teams get their designs closer to a finished product before development kicks in.

InVision takes commenting and conversation seriously, too. In the platform, teams of designers collaborating on a prototype can leave comments on specific elements of a design (comments that get threaded and organized) and drop feedback onto visuals that can be hovered over and expanded to eliminate any confusion over who’s talking about what and where. This keeps changes moving along and minimizes duplicate feedback.

Check to see if a platform offers file syncing, which would let any changes you made to your Sketch or PhotoShop files sync into your prototypes—something that can make the design-to-development process a little smoother, too.

Prototype for any kind of app: web, mobile, tablet, or wearables.

You’ll want to ensure the platform you choose supports the platform you’re developing for, whether it’s web, iOS, or Android. Many also offer downloadable mobile apps that allow you to preview the prototype on that specific device, e.g. Origami Live, Flinto Viewer, Principle Mirror, and more.

InVision covers iOs, Android, or web, supporting files imported from different design software like PhotoShop, Sketch, etc. Similarly, Flinto supports iPhone, iPod Touch and iPad and Android devices. You can create prototypes for Nexus 7, Nexus 5, Nexus 4, they are viewable on any Android device capable of running the latest version of Chrome. Justinmind’s wireframing tools have UI widget libraries built in for newest versions of iOS and Android (Nougat) for phones, tablets and wearables.

Origami, the Facebook-owned prototyping tool that’s been used on apps like Instagram and Messenger is big with iOS because of it’s Apple Quartz Composer integration, but also supports Android prototyping.

Fit a prototyping tool into your existing workflow and tools—and keep other teams in the loop.

An app is rarely just the concern of design and development teams. Other departments like marketing and tech support can benefit from familiarizing themselves with a new app, weighing in on it, and staying in the loop on its progress. With prototyping tools, designers can drop screen designs into the prototyping app, add animations and functionality, then export and share them with anyone given access.

For teams that already rely heavily on versioning, workflow, or chat tools, certain prototyping tools have the capability to seamlessly integrate right in with that existing tool. InVision is great for teams who already use tools in their workflow like JIRA, Trello, GitHub, Basecamp, and Slack.

There are project management aspects that make life easier, too. In InVision, projects can be organized (On Hold, In Progress, Needs Review, Approved) so everyone on the team knows where the work stands. In some platforms, updates to comment threads can be sent in an email digest or updated in Slack so you know what’s happening when you’re not logged in.

Get valuable user testing data even earlier.

Gather valuable feedback that isn’t just based on how your app or site looks—it’s based on how the interactivity works. Hear what actual users think before the app has been through rounds of development and revisions and incorporate that data into your app at an earlier (and less expensive) stage.

While you can easily export prototypes and share them out through your own testing means, many platforms integrate third-party testing services. A big bonus with Invision is the unlimited, free user testing you can get via UserTesting and Lookback, with video and audio recordings of actual users navigating around your product. Justinmind integrates with analytics and testing tools like Clicktale, UserZoom, Crazy Egg and Google Analytics.

Find a pricing plan that works for you.

Whether you’re a solo designer, work on a team, or are enterprise level, most prototyping apps offer paid plans that scale up to meet your needs—and include advanced features, if you need them. Many platforms offer Enterprise versions: InVision, Justinmind, Marvel, and more.

For example, Flinto Lite is contract-free and lets you pay $20 a month, with an extra $20 per team member, while Flinto for Mac is a flat $99 from the App Store. Origami is $19 per user per month if you pay annually, but $29 if you go month-to-month.

InVision has tiered payment plans that charge by the prototype and by the team size. So, one prototype is free, but 3 runs $15/month, unlimited prototypes run $25/month. The Team plan gives you unlimited prototypes for 5 team members for $99/month, and Enterprise packs more advanced features on.

Note: If you’re already paying for Adobe Creative Cloud, Adobe XD might be worth exploring, too.

Security that’s up to your strictest standards.

Are your app designs or data sensitive, or do you require more strict compliance from vendors or tools?

For app prototyping tools like InVision and Flinto, security is a top priority. You can rest assured your data and designs are safe. InVision has a dedicated, full-time security team and has server, network, and cloud security covered. Both Flinto and InVision offer encryption via SSL and TLS connections. Flinto and Justinmind prototypes can be password-protected and shared with only authorized users so your designs aren’t being seen by the wrong users before they’re ready.

Which tool is right for you?

This is not meant to be a comprehensive review of the mentioned platforms, or inclusive of every high-quality prototyping tool out there—it’s more of an introduction to what you can do with a prototyping tool to get you thinking about how one could work for you and to get you looking out for the features that might be priorities.

Each tool offers features and benefits that are worth exploring in detail. To find the one that’s right for your app or organization, consult a UI designer, mobile developer, or front-end developer to get a gauge for which might suit your needs. Or, visit these sites to get more information, watch videos, or download free previews.

InVision. Used by MailChimp, Netflix, Uber, SoundCloud,
Justinmind. Used by Oracle, IRS, Sony, Adobe, Verizon.
Origami. Created at Facebook, used on Instagram, Messenger, and Paper.
AdobeXD (Experience Design).