Choosing the Right Prototyping Tool

If a picture is worth a thousand words, an interactive picture is worth a million.

Like other leaders in the industry, Switch uses interactive wireframes and high-fidelity prototypes to validate user journeys and page content. They help us get a lot of the trial and error out of the way before moving on to later stages of a project where changes would take more time to implement. They're also great for explaining concepts to clients.

Over the years, different people on our team have dabbled with different apps, but we never arrived at a standard for everyone to use. With the goal of finding something usable by project managers and designers alike, we went looking for the best tool to suit our needs.

What Makes a Good Prototyping Tool?

To help us narrow the playing field, we came up with a list of criteria to compare the different tools against. We based this criteria on what we loved (and didn't love) about the apps we had used previously as well as some dream features we thought up based on how we like to work (designers have nerdy dreams). The criteria were added to a spreadsheet for us to track our experiences with each app.

1. It's Easy to Learn

   One of our biggest concerns was a steep learning curve, which is what we had encountered whenever someone new had to work with one of our old standards, Axure RP. A newbie to the app had to spend a lot of time reading documentation and poking around menus to get started. We wanted something that would let new users jump in fairly quickly. This meant a clear UI, familiar controls, and good documentation when required.

2. It Supports Different Levels of Fidelity

   At Switch, we build both low-fidelity wireframes and high-fidelity prototypes. For our purposes, we define a wireframe as a simplified visual representation of a website's layout that focuses on content prioritisation and user flow, including movement between the site's templates. To keep the focus on these areas, our wireframes generally do not include styles, colour, or imagery. For these low-fidelity wireframes, we wanted easy access to shapes, text, and a library of common components like buttons and form elements that could be shared across projects.

   Later on in a website's development, we create high-fidelity prototypes using our Photoshop files to simulate interactions as they would behave on the live site. For this reason, we awarded bonus points if the app could directly import Photoshop files with its layers included.

3. Interaction Handling Is Hassle-free

   Shortly before commencing these reviews, one of our designers built a complex lo-fi wireframe for a multi-faceted search and new mega-menu for one of our clients using Adobe's app, Adobe Experience Designer (XD). Different search categories had unique filters, each mega-menu was unique, and each search had its own user flow. On a live website, all of these different views would be visible from the same page, and ideally, that's how it would work for a prototyping tool as well. Unfortunately, for something as simple as toggling a dropdown on and off, an entirely new artboard had to be created for every change in state, which meant any changes to content or interactions on other pages had to be duplicated over and over again and finding the right screen required a lot more scrolling than it should have.

   

   Artboards. Artboards everywhere.

   With this (painful) memory fresh in our minds, we looked for an app that supported microinteractions, allowing things like dropdown toggling to be easily handled. (Development for this feature is currently backlogged for Adobe XD.)

4. It's Easy to Collaborate with Clients

   It was important to us that our clients would be able to access projects easily and add comments within the app instead of having to provide feedback elsewhere. It's much easier to point to a component and write something about it than play guess-the-component when the client and ourselves may have different names for the same thing.

5. There's a Robust Design Library for Shareable Components

   By having a central source of colours, symbols, and components, we can avoid having to recreate the wheel every time we add a page to a project or create a new project. It saves time and costs to make things as reusable as possible, so we sought an app that had some method to utilise reusable components.

6. It Works on the Required OS

   Our OS requirements meant some options that were Mac-only, like the popular prototyping app Sketch, wouldn't work for our needs.

7. It Facilitates Developer Hand Off

   Features like automated styleguide generation and specifications for project hand-off to developers speed up the transition from design to development. Having everything documented from the get-go lets us focus on actual development instead of crossing t's and dotting i's.

What Did We Think?

We combed through UX blogs and recommendations to compile a shortlist of candidates:

• InVision
• MockFlow
• Proto.io
• Marvel
• UXPin
• Adobe XD
• MockPlus
• Figma
• Moqups
• Atomic

With this shortlist in hand, we recreated a wireframe from one of our recent projects in each app, taking notes as we went. Each app was given a rating of 1 to 10 and the top three apps were handed off to a second designer to assess.

Our Winner

After the second designer went through our top three choices, the consensus was clear: UXPin was our winner.

It was easy to pick up from the get-go, featured a robust Design Library, had url, PDF and HTML export sharing options, included documentation/specification options, met our interaction requirements, and more. We used it to build a prototype of a new back-end feature in our Mattaki app (a car dealership platform), where we got to experience how smart use of their Design Library can save us heaps of time. We also uploaded one of our more layer-heavy Photoshop files to see how it handled imports of large files.

What Do Others Have to Say?

It's important to note that our top choice isn't necessarily the best option for everyone! Everyone has different requirements and workflows. If you're in the market for a new prototyping tool, you should consider what you need before making a decision and give each app a trial of your own.

Continue reading about choosing a prototyping tool with articles from:

• Prototyper
• Savah
• Smashing Magazine

As for us, with a number of (super secret) projects coming up, we're really excited to use UXPin to provide our customers with next-level concepts and an easier platform for giving feedback and sharing ideas.

— Shaina Koval