UXPin

Still on a mission to find the ultimate protoyping tool…

What’s most important during ideation & validation?

— “Process”

From IDEO’s Design Kit, Design Thinking, Circular Design, Lean Startup Principles and even the GV Sprint Process — everything is ultimately the same idea repackaged. It’s the kaizen philosophy. All these processes sold as “new ideas” to be audience appropriate. Each “leader” be they creative, business or technical, will find a way to communicate in a language their audience would best understand. Business needed the Lean Startup, Dev needed GV Sprint Process and Creatives have Design Thinking. Each a process of constant improvement: ideation to innovation.

I have a similiar belief in constant change and improvement, I call it :

“don’t be lazy, don’t sit still and always make things better than the last time”

Yes, I know it, isn’t profound… but it is, what it is.

Bearing the kaizen approach in mind, I’ve been searching for a tool which makes this iterative design process easier and cleaner.

Some tools are great for constant change and some just aren’t.

PROBLEM STATEMENT: How might we reduce costs and improve this process of constant change throughout the design process, while all members work remotely?
HYPOTHESES: If each stakeholder/team member is part of a constant conversation, working from one central software, (& having a centralised process), then direction/goals will always be clearly understood. Having each move in the same direction. Bearing in mind that each have different locations, mindsets, roles and responsibilities within a given project, each using different hardware. If the software used can make the process of feedback simplified and communication clear, then everyone will ultimately always be focused on the same goal, always on the same page. What can be used in teams where members don’t like the constant updates of Slack, or feel that InVision is limited in creating clear direction in Product Management?

List of needs in current workflow:

  • Product Management
  • Research
  • Customer Discovery (Create — Personas)
  • User Journey / scenarios
  • Ideation — brainstorm
  • Wireframes
  • Icon creation
  • Hi-fi Prototype
  • Interactivity
  • Collaboration
  • Archive of findings & version control
  • User Interview preparation
  • User Testing (Verify — Personas)
  • Analysis/Report
  • User Interface Management System

The above process uses various tools from Apple Keynote, Pages, InVision, Trello, Illustrator, Sketch, Zeplin, Paper/Whiteboard, Dropbox. Some members use Axure, Excel and Powerpoint & Drive. Some PC while others Mac. Looking at the above process, it can definitely be improved. There are way more subscriptions than I ever planned on or have ever had in my life. I think that I am a sucker for easy online payments. Blame it on Business and UX!

I didn’t think there was just 1 tool to cover all the above tools and processes, …Until now…

UXPin

Take all the above steps/needs in current process and roll it into one application …..ta daa…..UXPin

I starting looking into UXPin, mostly because they have always created awesome eBooks. [ So by default, I’ve been brainwashed to trust them ].

Signed up for the trial anyway, and first thing I wanted to know, is it pixels or vectors?

Vector [ ✓ ]

Ok, then I shall research further…

Vectors wins hands down

First impressions…

Very similar to Justinmind. Easily switch from building wireframes to creating high fidelity prototype. For me, vectors beats pixels hands down. So if I’m going to even consider moving to a different application, I have to have perfect curves and lines when I zoom in. I’ve said it before, but it’s so important, I’ll just keep saying it…until someone actually listens to me.

The clarity within the design while creating as well as the final product, just makes the entire process so much more accurate and enjoyable.

I don’t care if all applications export SVG’s — I want it to be awesome, clear and crisp when I zoom in while I’m working in it. Clean vectors to ensure everything is in it’s place. UXPin export options — HTML & PDF.

Justinmind is a bit better to a certain extent, as creating various scenarios with the options to export sitemap, scenarios, including events is helpful. But perhaps it’s only because I’ve used Justinmind for a longer period.

Features

Project Management

Select “Benchmark in progress” — pop up for project management

Team Management — users and roles

User management — settings (overview) -Manage your team — add users and define their roles

Manage permissions

Permissions and roles —Edit permissions for users based on allocated roles

Create/Edit Prototype

Use UXPin Editor to start from scratch or install plugins for Sketch or Photoshop to sync projects

Options to sync from Sketch or Photoshop or start from scratch

Sketch/Photoshop integration

After adding Sketch plugin : Simply select plugins>UXPin> to export Sketch artboards individually or full project to UXPin

Once design is imported into UXPin, add interactivity

One screen viewed in workspace. Other screens accessed by the pages dropdown in top left corner.

Add documentation : Annotations/notes

Documentation — Add annotations to your design screens

Share screens via project link

Share screen via URL, E-mail, SMS or QR Code

View Specs

Specs summary

Styleguide

Styleguide — colours
Styleguide — Typography
Styleguide — View and download assets

Live Presentation

In preview mode — option to start live session

Comments

Add comments

Request approval

Approval request —received [ overview ]

Approval request —comment

Approval request — reject

Let’s compare: Ok, Sketch and Photoshop lack project management capabilities — But you can keep using InVision to compensate for this. But by far …UXPin rocks!

Canvas properties

UXPin — Canvas Properties allows you to add new adaptive version [ custom dimensions can then be added ]

So this particular application, UXPin, [ interface included ], I can handle. There are also customisation options to change from light to dark ui if you prefer. I just like it, because it reminds me of the Adobe interface.

Pity UXPin doesn’t support multiple artboards/screens in viewed workspace. The added screens can be accessed by pages drop down. I don’t like working this way, as I come from Adobe Illustrator and like seeing exactly what’s going on, in every screen. An overview helps to ensure changes remain consistent, and changes can be done quicker when all artboards are in one file.

“…without a doubt the only constant in life is death and design changes ”

However, it makes sense to have one screen per view to accommodate for user testing, which you’ll see shortly.

Usability Testing

Usability testing and live presentation options

Wait for it… here’s the best part…

Create Tasks and conduct UT all via UXPin

But first…

Usability Testing Beta is only supported by Google Chrome

Aargh…I was using Firefox…

Add plugin

Add UXPin Chrome extension

Create usability test: Website Wireframe

Edit Intro/Tasks/Settings/Participant — move to next task and repeat…and voila! Tasks set up. UT Prep sorted!

This is really cool. So instead of manually creating these tests/tasks, and wasting time and money testing in recording studios. Instead, everything is set up in UXPin using your prototype and UT recording can be done from anywhere — accommodating for remote testing.

Edit Introduction — Personalise (participant name, your name, product)

There doesn’t seem session times specified, so best to just specify times for the user. It would be nice and more efficient for the recording to automatically happen when user starts session. So you can accommodate for different time zones. Then review recordings when you are able to. (This is assuming that your task list is clear and comprehensive) — But logically you’d still need to be available to ask questions and find out exactly what the user is thinking without leading them.

Intro

Edit participant name, and add in y0ur name, edit product name etc. — specify session time.

Create Tasks

Add Task instructions for user. Go to each screen and add various tasks.

Invite user via link

Invite user via link
Start session

View — User/participant

Make sure you have personalised prior to sending to user: added particpant name and your name in this introduction when you initially edited the intro.
User will have overview of the number of tasks to complete. In this instance, there is only 1 Task set up. Then user needs to set camera, to ensure their face is captured during testing.

User : Set camera, then start session — complete tasks

Set face in camera area and start session

Session — UI and Task List

Participants view: UI and Task list

Facilitator : record session

Once user joins session, start recording

Sketch has Sketch Mirror in order to view prototype, but you’ll still need the ability to record. Why isn’t there an option to record? But, based on just this feature…UXPin wins the UT round.

In summary

Considering that I currently use ±10 applications to do the work of 1 application. UXPin looks like a really good investment based on pricing and features. It makes sense to design in Sketch/Photoshop and then use UXPin for UT/Approvals and Project Management.

Alternatively, their design capabilities don’t look shabby at all. It seems like it would be safe to completely remove Sketch/Photoshop from the equation and just design directly in UXPin.

However, this could get complicated (for the user) when testing on a mobile device. I haven’t tried that option. So could be wrong. Based on this tour of UXPin, I’d only use it for web interfaces. You can’t test a mobile app or mobile view on desktop. It makes no sense, and defeats the purpose of testing if you don’t test interface, usability and interactions on the correct device.

Unless there is a practical way UXPin has accommodated for testing on mobile devices, I would use this only for testing websites. (I did not try testing this on a mobile device…but I’m sure they have accommodated for this. They’ve thought of everything else, so there must be an easy for user to view tasks list as well as complete them on a mobile device — while being recorded).

Version control for designers

For responsive web design, UXPin follows a similiar logic to Adobe Reflow, namely adding breakpoints to the website design. This makes some sense. But Sketch Auto-layout plugin is headed in a better direction in comparison, as it forces designers to work in the correct order, namely, design for mobile first!

If you’re working with breakpoints in UXPin, then you’re once again working backwards, by creating desktop first. But if you’re like me, you want to see that your design works by creating both extremes simultaneously, mobile and desktop. This works well in Photoshop/Sketch with multiple artboards.

Style Guide/ Custom Libraries are available in all applications, from UXPin to Sketch/Photoshop using Craft plugin. So no competition there.

UXPin has all the necessary features/requirements for current workflow, and has the potential to improve process:

Vector [ ✓ ]

Project Management [ ✓ ]

Wireframes [ ✓ ]

Hi-fi Prototype [ ✓ ] — Sketch and Photoshop import options or Create new in Editor

Custom Libraries [ ✓ ]

Style Guide — [ ✓ ]

CSS (add to elements) [ ✓ ]

Interactivity [ ✓ ]

Collaboration [ ✓ ]

User Interview preparation [ ✓ ]

User Testing [ ✓ ]

Version control [ ✓ ]

Export options [ ✓ ] — Pdf / HTML

I haven’t taken speed into account. As I haven’t fully played with UXPin, and would need to work on a collaborative project to see if it’s all it promises to be. And assess what other team members think of it. But it really is worth trying.

There isn’t a desktop application for UXPin, all work needs to be done in browser. Which is awesome as there is no Mac vs PC issues. Everyone will have access.

This software is great for the designer who codes. (Well, so they say). How clean the code is after export, I wouldn’t know, (I don’t code). So this I will need a developer to review first. But it has caught my attention. Because if this could be that much closer to production ready and reduce developer’s time by not having to start completely from scratch, that would be awesome. That would make the process so much quicker for everyone, which would mean faster validation, faster iterations and less waiting time.

SOLUTION: From just this bit of digging, UXPin does seem to be the better, logical and cheaper choice for the freelancer/startup. It’s simple for anyone to use, as each will only view what they need to view. Eg. Stakeholders only needs to review, comment, accept or reject designs. Immediate feedback = efficient process.
Users will complete tasks, and feedback is immediate (no more worrying about arranging users to be on site for testing, and failing to show up due to unexpected schedule changes). = convenient for all, as user can complete when they are ready, therefore no more wasting of time/money with booking venues for users who don’t show up.
I’d say choose this if you’re seeking a centralised process covering all the fundamental requirements at a low cost. Instead of paying for 10 subscriptions, only pay for 1.

I believe in simplicity. I have a suspicion that less tools (which do more) which are consistent throughout a team will result in a streamlined, faster, better and more collaborative team effort which would boost quality of the work, as well as team morale.

…Just a theory until I’ve tested it.

-image credits [ screenshots: dashboards/workspace : UXPin ]


Just in case you’re wondering, I am not affiliated with any company (apart from my own). I do not get paid to write. [ Obviously I don’t get paid for this…have you read some of my articles? ;) ] I’m on a mission to sift through the bullsh*t and test products/processes for myself. Because there are no definite answers, only opinions everywhere.

I am not an expert. I have just found hacks to do what I need to do. And always question if there’s a “right” or better way. I’m an “almost” normal “Design.erd” who works remotely in search of better processes, people, products…while adding to my principles along the way. Writing in the hopes that questions/answers will be shared as I write to sift through various options. [ …insights/comments/suggestions always appreciated ]

These are my opinions, based on curiosity, a desire for knowledge and inspired by my values. It’s not rocket science! [ I don’t have the patience for Kerbal Space Program ]


← P R E V I O U S Inspiring words by Da Vinci

Axure: Still on a mission to fine the ultimate prototyping tool N E X T →

If you enjoyed this article, don’t be shy… tap the ♥ or follow this publication