What is UXPin and how can it help elevate your design process?

At SMILE, our design team’s workflow and way of working is always evolving in order for us to produce the highest quality of work we can for our clients. We have used programmes like Figma, Atomic, Sketch and now we have continued to move forward to UXPin!

UXPin offers us everything we need nicely wrapped up into one product and has everything in one place. It is a cloud-based programme which means that your work is stored online instead of having multiple files saved locally or on an online storage system.

Dashboard

You are able to group your work into projects from a neat dashboard-style home screen, also allowing you to assign a project status which can vary from Wireframing to Usability Testing as a default but you are able to add a custom status. You can also do this at a project level with individual prototypes so that you and the rest of the team can easily keep up to date with where each sprint or prototype is at in terms of progress.

Before you even get the editor, there are so many things you can do to integrate UXPin with system you may already use. Here at SMILE, we have different projects linked to our slack channels so that notifications come through where new prototypes are created for example, or comments come in from clients/other teams. You are also able to import files from other design tools like Sketch to bring your existing designs straight into the mix.

The Editor

The bells and whistles truly shine through when you hit the editor view of a project. Like with any new piece of software, it can be quite daunting on first load but it is fairly easy to pick up as it the elements and tools are pretty similar to that of other programmes. In the editor, you are not only able to prototype but you can design straight into UXPin and subsequently prototype with whatever you design.

Similar to other systems, the editor gives you access to pages, layers and then all the tools to edit those layers. There are some handy things built into the editing process. One of those being the ability to detect, in-app, accessibility regulations. In the colour picker, you are presented with waves of AA and AAA accessibility depending on the colour of the background. This is helpful when trying to design a website that is truly accessible.

As well as the standard tools, from the editor, you have access to the UXPin design libraries or design systems if you’re on an enterprise plan. These allow you to collate your work per project in the form of; colours, fonts, components and assets! Thus making them accessible to others in the team to create a seamless design rollout across individual projects. It can also be of assistance when handing over the development team as they’re able to inspect individual components/elements and the code needed to create that in a website instance.

Prototyping

Finally onto the defining features that ultimately led us to choose UXPin. That is the prototyping functionality. A lot of software usually advertise that they offer prototyping but you’ll find that by that, they mean, connecting pages so users are able to click through the website. This is quite a basic form of prototyping and we were looking for me to really be able to add that wow factor to everything we do!

With UXPin, the limits are endless (well, I’ve not found a limit yet) in what you can do with interactions and animations. From hover states to entrance animations to conditional logic, UXPin has everything you need to create a fully functioning prototype that can outline the intended plan for the website. Whether that is to show a client, or to brief a development team or even in use cases of user testing, it covers you for everything.

So to conclude, we really like UXPin! With it being released in 2010, we’d still consider quite a new piece of software in comparison to its competitors and because of that, has a few teething problems. However, the UXPin team are constantly evolving the product and adding new features. As a team here at SMILE, it has really elevated the way we create work and present work and we hope it can possibly do the same for you!