UXPin

Described as the 'end-to-end' UX platform, UXPin is essentially another design tool but with a powerful ability to create design systems. UXPin serves larger design teams that need to work off the same styles and guides, saving time with product development when collaboration plays a large part.

The design team behind the Interaction Design Foundation got a chance to review UXPin – a collaborative UX Design tool – and here is our review (spoiler: it’s awesome!)

To fully appreciate a tool like UXPin, it’s important to understand the context in which it exists. With the digital revolution rapidly changing the way we interact with the world around us, there has never been a greater demand for well-designed products – both aesthetically and functionally. The design processes that lead to product successes are both multidisciplinary and complex. The tools you use should reflect that. In other words, if your design process involves people from varying professional backgrounds, your tool should support that.

New wireframing and prototyping tools appear almost every day in the market but these tools typically focus only on one part of the design and development process. Invision, for example, is collaborative but not very powerful for creation. Axure, meanwhile, is powerful but not very collaborative. UXPin aims to be the best of both worlds.

It’s precisely for this reason that UXPin’s integrative and collaborative approach to building products stands out. UXPin describes itself as a collaborative platform for increasing the speed, quality, and scalability of product creation and that’s exactly how it feels to use the platform.

The people who have built UXPin – and now continually evolve its capabilities – have the advantage of 5 years of user feedback and market experience, and this shows in key areas. After having spent time using UXPin, it seems they’ve resisted the temptation of “creeping featurism”, i.e. cluttering their interface with more and more features. Instead, they offer a well-chosen set of capabilities that makes the right tool handy at the right time for team members.

In addition, unnecessary documentation is replaced with a more intuitive way of working. The tool goes a long way in getting rid of the need for a single moment that reflects the transition from design to development. Rather, designers, developers and product managers can work in a continuum. That’s the collaborative and integrative approach that we mentioned above, which makes UXPin stand out.

We had a chance to explore the key features that make UXPin unique and have listed them below. These are in no way exhaustive as there are countless other features.

Hi-fi Prototypes

While libraries are extremely helpful for putting together a working prototype quickly, UXPin still allows you plenty of room for customization. You can create your own animations, or use your Photoshop and Sketch files with drag-and drop integration. We appreciated the nice touch of actually preserving the layers in the Photoshop and Sketch files.

Code Snippets & Use Cases

When prototyping, you can also add custom code snippets to any element. As you reuse the element, the code follows along for contextual documentation. Definitely helps to reduce the need to refer back to technical documentation since the snippets are in the design itself.

Collaboration and Handoffs

Because each team member has a set of very specialized skills, we’ve often struggled to maintain the macro perspective necessary to build a good product. With real-time collaboration, that changes completely.

Based on the permissions you set for your team, members can co-design in real time with automated notifications for updates and new comments. The need for documentation is thus replaced with annotated prototyping. Going back and forth from planning table to designing becomes streamlined as the comments turn into contextual feedback that can be immediately acted upon.

Prototype Annotations

As you prototype, it helps to mark up annotations for technical nuances and edge cases. Very useful for complex enterprise products.

Automatic Developer Specifications

For final developer handoff, we switched to Spec Mode to auto-generate specifications (colors, typefaces, etc.) and CSS code. If you use Sketch, a useful workflow is to import your file into UXPin, transform the static design into a prototype, then enter Spec Mode for developer handoff.

Moderated User Testing

User testing is at the heart of building a product that’s informed by real people’s needs and desires. In UXPin, you can create tasks and set up user tests instantaneously. UXPin automatically records every action of a test user session, including a video of clicks, facial reactions, and audio.

If you’re looking to scale your tests, a remote unmoderated service like UserTesting or Userzoom might be a better choice to validate with hundreds of users at a time. For fast 1:1 user testing, however, the testing tool in UXPin definitely serves it’s purpose.