A Review of UXPin – A Collaborative UX Design Tool

A Review of UXPin – A Collaborative UX Design Tool

305 shares
188
94
23

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.

Rapid Prototyping

There are libraries with dozens of interactions and responsive breakpoints. You can choose within seconds from 1000s of low fidelity and high fidelity UI elements like buttons and text fields for iOS, Android and more.


Lo-fi Prototypes

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.

For advanced prototyping, we preferred creating Multi-State Elements. In UXPin, Multistate Elements (MSEs) are sets of items, like boxes, buttons, and images, that change between configurations upon interaction. For example, two configurations — states — may each show a different icon. Clicking the element then flips between the states.

Fave-unfave-Sept-2016.gif

The MSE Editor makes it pretty simple to create different states. When viewing a particular state, you can move elements within that state, change their styles like color and opacity, hide them altogether, or give them interactions.

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.

For further clarification, you can also add descriptions of use cases (or whatever other notes you want to attach to elements). Might not be as useful as the code snippets, but doesn’t hurt to over-communicate.

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.

Different team members can still comment on the prototype in Spec Mode.

https://lh5.googleusercontent.com/f04ceabOUxyR7vDuFwfvqAv51TGrrTqllGsQa7SLPiQBTULlq8j5inZnjTESEhGHjZK3gLtA-e3K1AhmkdkaBHca78nhO22TgV2wBglGIS8Jf8k2o-7dJIU6otW89tSmOmsIwqB1

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.

Creating Tasks

Setting up tasks is pretty straightforward. Write out all the tasks you want users to complete, then you’re ready to send the prototype link to users.

Running the Test

Once users click on the prototype link, the testing session can begin. After the session, you can locate the recording in your UXPin projects folder.

Scalable Design Systems

When rapidly scaling your product (rolling out new features, adding cross-platform compatibility), it can be extremely frustrating to get caught in a cycle of redundant work. We found that the Team Libraries and Smart Elements features definitely help to create a reusable toolkit.

Of course, it takes a bit of time to build your library in the beginning, but you end up saving far more time in the long run.

Team Libraries

Team pattern libraries not only improve consistency of design, but make component-based design a simple matter of dragging and dropping the right elements. There’s no need to refer to a separate style guide, the elements you are working with is your style guide.

Because they live in the cloud, the team libraries in UXPin behave like a more collaborative and consistent version of Symbols in Sketch.

To start building your library, right-click on any element, then click “Add to Library”.

Once you’ve built out the library, you can review all the elements in the “Library management” dashboard.

https://lh5.googleusercontent.com/1tCrKNBl9NwZUiubxUAI6YXCPOd7ph2OmeTtBYPoLA4hAmvRWwzllcqp0a7y_Ist7nyiz0TnxkyL1NBmizz-vCDBIMLF9P6ElmLNXTfMs9-m3ef8brTemf0EfSujOPg-SssbesGJ

Smart Elements

Smart Elements is an exceptionally nifty feature that makes you modify an element just once and automatically updates it for your entire product. If you know Adobe Photoshop, then this is like “Smart Objects” in Photoshop: Very, very powerful.

Conclusion

Our conclusion is simple. UXPin is fast, powerful, and naturally collaborative.

Pros

  • Improved design consistency thanks to cloud Team Libraries and Smart Elements
  • Creative freedom in prototyping with lo-fi and hi-fi capabilities
  • Intuitive comment tracking, design approvals, and project tracking
  • Photoshop and Sketch integrations
  • No redlining and minimal documentation needed thanks to Spec Mode

Cons

  • Slight learning curve
  • No birds-eye view of prototype screens
  • No Illustrator integration
  • No offline mode

Overall, our hat’s off to the team. We give UXPin both our very best recommendations and warmest regards!

References

Hero Image: Author/Copyright holder: UXPin. Copyright terms and licence: All rights reserved.

Topics in this article:
Make design better: share this article
188
94
23