Basic Criteria

Over the course of our evaluation, we looked at over 50 different prototyping tools and evaluated each according to the following criteria:

1. In the cloud/online access
2. Designed for prototyping websites (many prototyping tools are mobile-only)
3. Collaboration features (e.g. commenting)
4. Ability to create both low- and high-fidelity wireframes
5. Ability to create wireframes from scratch within the tool (some only allow uploading images)
6. Ability to create responsive designs
7. Allow for a corporate account of about 25 people
8. Support hundreds of projects over time
9. If possible, a usability testing feature, or usability testing integration with other tools

As a result, some popular tools like Axure RP, Omnigraffle, and Balsamiq were eliminated from our final review because they did not fit the above criteria. However, since some members of our team have used Invision before and really liked its features, we made an exception for it even though it doesn’t support the ability to create wireframes from scratch.

Prototyping Tools Compared

^{In the midst of our research, we came across Cooper’s prototyping tool review and we were inspired by Cooper’s graphic so we created a similar graphic for our review.}

Tool Summaries

We don’t recommend one tool as the “best” option because each has strengths that the others don’t. However, some tools do fare better than the others when it comes to the entire package. Below are our overall impressions.

All the tools we examined were strong in the following areas:

• Global/Master styles
• Tutorials
• Online sharing of prototypes
• Exporting

UXPin

Pricing:

Rate: $40 user/month
Discount: Save 10% for an annual subscription = $36 user/month
Number of users: 25 users
Total per year: $10,800

UXPin is the most well-rounded tool of the four we examined. It provides the ability to create wireframes and also conduct usability testing with a Pro+ account. It’s easy to create elements and to utilize the widgets. You can edit by clicking on the element rather than using a universal toolbar. In terms of the collaboration features, the workflow isn’t as clean as Invision, but commenting works well. It allows you to create iterations of your prototypes and view the changes you’ve made with each iteration. Team members can also receive activity notifications via email and view activity history for each project. The prototypes are easy to share, and teams can work on wireframes together in real-time, similar to Google Docs. This tool is clearly built by UXers for UXers. There are also options to upload or create site maps and other UX deliverables for each project.

Pros

• Simultaneous, real-time editing by multiple team members
• Chat functionality (when more than one team member is on the prototype build page)
• Annotation pin – allows you to leave notes that you can see in the build page
• File import from Photoshop/Sketch (keeps layers)
• PDF export can add the project and page name to each page
• Templates and/or forms for Persona, Business Model Canvas, and Project Canvas
• Usability Testing extension (in Beta)

Cons

• Lack of responsive design features. You can populate each screen size with the same elements in the default view but they won’t be automatically resized to fit the new screen size.
• Clunky and slow animations in preview mode. You have to also turn on “auto-resize” feature to adjust the browser size and see the different layouts, or click on the different screen tabs.
• UXPin is glitchy – it quit on us multiple times.
• The image uploader can be slow.
• Comments are hard to see. You have to expand each thread and you can’t edit comments.

Invision

Pricing:

Rate: Base price for Enterprise: $5400/year
Gives access of up to 10 contributors & 10 reviewers
Contributors: $35 per user per month
Reviewers: $10 per reviewer per month
Discount: N/A
Number of users: 25 users (Base price is for 20 users)
Total per year: $7,500

Invision won’t allow you to create wireframes from scratch, but the collaboration workflow was so great that we wanted to include it in our search anyways. It has a very clean interface for collaboration features such as real-time sharing and commenting on prototypes. Its tracking components are also very useful – each project has an Activity section which displays overall project statistics in chart form, and activity by individual users. Comments for the entire project also exist in a hub and are displayed in easy to follow threads on the screens. Invision makes it easy to see a project as a whole and to see exactly who interfaced with the project, when, and what they did. The tool also features version control and can display version history for each project. It’s easy to switch between screens in a project and also easy to switch between the different views: Preview, Build, Comment, History. It also has a mobile simulator which allows you to define specific gestures for user actions.

Pros

• Automatically turns feedback into actionable to-do lists that you can check off
• Each screen can be marked “In Progress,” “Needs Review,” or “Approved”
• Neat Extensions: Whiteboard, Snaps, Live Capture, Desktop Sync, Liveshare PS
• Can easily compare two versions using a slider to toggle back and forth
• Can make a “design” team, “dev” team, and a “client” team (comments change color depending on your team)
• Simultaneous, real-time editing by multiple team members
• Can draw/write on the screen, save that as a sketch, and add it to a comment
• Can embed your screens into tools like Trello & Hipchat

Cons

• No wireframe creation
• Not responsive
• No usability testing integration

Webflow

Pricing:

Rate: $35 user/month
Discount: N/A
Number of users: 25 people
Total per year: $10,500

Webflow is a solid tool for designers that are familiar with front-end development (FED) and want to design using those concepts. It can, however, be quite challenging for designers that are unfamiliar with HTML structure and CSS3 properties. Instead of typing the code that would be required to build the prototype, the user needs to know how the code and structure will work and then select and build it from the app’s toolbox. This could be a good tool for helping to bridge the gap between FED and UX design. Webflow uses widgets, but you have to create custom CSS classes before you can use them. It creates backups of your site and lets you revert to previous backups. The up-front coding knowledge required may seem burdensome, but it pays off by enabling robust responsive prototyping capabilities. Webflow stands out as having the best responsive features of the four tools we examined. Creating a new element also adds it automatically to each breakpoint and resizes it for the new screen size. You can also go into each view to turn on and off an element. This was the only tool of the four that functioned like this. Webflow also has impressive animation features, including interactions that show hover states.

Pros

• Can choose if element shows up on the different breakpoints and the elements are automatically resized to fit each breakpoint
• Offers responsive templates that you can customize (some are free, some paid)
• Can embed media like Youtube videos
• Can set up animations
• Can export the entire site as cleanly packaged HTML and CSS
• Simple URL to share for viewing

Cons

• No collaboration features like commenting, task management, or simultaneous editing
• Not good for quick wireframes
• Can’t just drag elements to change its size; must input the correct styles
• A lot of development knowledge required
• No real-time sharing of prototypes
• No usability testing integration

Justinmind

Pricing:

Rate: $23 user/month (10-20 users rate discount)
Discount: Save 35% for an annual subscription = $16 user/month
Number of users: 25 people
Total per year: $4,800
* License option available: $495 user/month with 27% discount = $362 user/month

Justinmind has a desktop app and an accompanying online account. You build your prototype in the desktop app using pre-designed widgets and then can run simulations to test it. (You need to be logged in and it’ll open up the simulation in the browser.) There are pre-existing templates that you can use like an iPhone or a responsive website. You can specify gestures for mobile designs and the simulators are very realistic. The collaboration functions similarly to how developers have to commit code to a repository on GitHub. It allows simultaneous editing of shared prototypes by allowing you to lock elements you’re working on. It has been described as having a moderate learning curve, but it does have tutorials to help its users learn the tool. This learning curve might be offputting to some people, but its responsive and mobile design capabilities are better than UXPin, especially since it has emulators.

Pros

• Can start from image files, pre-made template prototypes, or an empty prototype
• Can integrate with other usability testing tools (UserTesting, Userzoom, Clicktale, Usability Test, Keynote, Loop11, Crazyegg, Google Analytics)
• Mobile apps allow you try out your mockups live on real devices
• Can make a user flow for your prototype (scenario)
• Comments can be organized into customized categories with labels/colors, and you can attach files to your comments

Cons

• Justinmind’s workflow is the most tedious, requiring a desktop app and having to commit updates (it takes a long time to commit too)
• The program interface feels clunky with too many components
• Activity history is minimal
• No auto-versioning; it’s not possible to revert back to previous iterations
• You can’t have more than one prototype open in the desktop app
• No real-time sharing of prototypes

Superlatives

Best for Wireframing

UXPin is the best tool for pure wireframing, with its ability to wireframe from scratch, its widget libraries, and iteration capacity.

Best for Making Clickable Prototypes

Invision is the best tool for clickable prototyping. All of the tools have this functionality, but Invision’s clean and simple interface was exceptionally nice to use.

Best for Collaboration

Invision is the best tool for collaboration. The Activity section is robust with a snazzy interface that has stats and graphs of users’ activity beyond just a list of actions. There is a hub for comments, though you can also see threaded comments on each screen. It also gives users the ability to hold conference calls with its software, along with conducting virtual whiteboarding sessions.

Best for Responsive Design

Webflow is the best tool for responsive design since it automatically resizes each element to fit any screen size. The other tools required you to create a new design for each breakpoint (usually 3 – 4: mobile portrait, mobile landscape, tablet, and desktop).

Best for Mobile Design and Simulation

Justinmind is the best tool for creating and viewing mobile designs. The company has a mobile simulation app for both Apple and Android that allows you to test your design on your mobile device. You could also just use the web version of the mobile simulator to test your designs, too. Additionally, Justinmind allows you to design gestures and animations.

UPDATE: Invision just announced the ability to test different animations and transitions in real-time on your mobile device.

Best for Usability Testing

We found that UXPin is the best tool of the four for usability testing, as it’s the only tool with built-in usability testing functionality. It allows for a preset task list, the ability to record the usability test (audio, video, and screen), see the participant’s mouse movement, and without requiring participants to download any extra software. However, we still recommend using a usability testing tool that isn’t in its beta version, as the usability testing tool is a bit glitchy still and doesn’t let you “undo” your actions in regards to setting up tasks or marking tasks as completed. Another thing to note is that UXPin has a loading animation for its interactions that makes the prototype seem less realistic, which is okay for early stage testing, but can still impact some of the feedback that you will receive.

Best for Sharing

Invision is the best tool for sharing functionality. It has a Liveshare and Share option that allows you to send out online links for your prototypes to your team and clients. In Liveshare, participants can sketch on the prototype and even be on an accompanying conference call while viewing your interactions with the prototype.

What We Picked

After our comprehensive review, we found that UXPin would be the most fitting tool for our team. We needed a wireframing, prototyping, and reviewing tool that would replace the various tools we have used. It met all of our criteria and with the level of fidelity that we needed. Although some of the features were more robust in the other tools, we weren’t willing to compromise and pick a tool that was missing any of our needed features.

What other tools should we look at to review? What tools are you all using and why? We’re interested in hearing about your experiences, so comment away!