Designing without sharing competences can hardly get you far. Designing for the web became just too complex to master every aspect of it working alone. While competences tend to fragment, there is still a need to work within one design environment with a view for the big picture and the ability to collaborate fast and easy. The need is stronger, the more we understand the value of the overall user experience of a service.
Sending each other e-mails with screenshots of work wasn’t effective even when it was invented. Design collaboration needs something more than that. We decided to build UXPin from-the-ground-up with collaborative methodology to help you exchange ideas, discuss solutions and examine the design from different perspectives with your teammates, clients and stakeholders, even create a design documentation within the App. This article will show you how you can use the collaborative potential of our tool. You can keep track by trying those tips in your UXPin account or sign up for a free trial if you haven’t done that yet.
Index
- Overview video
- Sharing design by URL
- Exporting design to HTML, PNG, PDF
- Inviting coworkers to accounts and projects
- Adding and managing comments
- Preparing a design documentation in UXPin
Overview video
Sharing design by URL
The quickest, most web-intuitive form of sharing. Giving someone access to the preview URL will allow to view your design in real-time. If you don’t want anybody to see everything you do after that, just set a password or crate another iteration of the project.
In UXPin sharing design by URL can be done an infinite amount of times, no matter what kind of plan you have signed up for. Just click the sharing icon in the upper right corner (see the picture below), copy the URL and you’re free to share your design anyway you like, be it social media, e-mail, chat or as an attachment to your design documentation.
If you want to send an e-mail with the URL right away, instead of copying the URL click “Share by e-mail” button in the same sharing menu.
Normally if you share the preview of your design, the viewers will have access to commenting (including viewing other people’s comments). This way you can get feedback directly on your project in a form of annotations, so no more comments with legend attached to it and switching through different notes to get all feedback in one place. The commenting feature is also available for viewers without a UXPin account, so you don’t have to worry whether the person on the other side ever heard of UXPin. We’ll cover more on this topic later in the article.
However, if you just want to show the design only, keeping the comments more discrete, all you have to do is uncheck the “include sitemap and comments” in the dialog box shown above.
Or if you’re using the the “share by e-mail” option:
Exporting design to HTML, PNG, PDF
If you’re in need of a more offline method of sharing or displaying try exporting your design to one of these formats: HTML, PNG, PDF. Let’s go back to the sharing menu, it’s all there:
Inviting coworkers to accounts and projects
To get more out of UXPin collaboration features, first let me distinguish two terms: inviting coworkers to your account and inviting coworkers to your projects.
- Inviting coworkers to your account: that’s the first step of enabling full design collaboration in UXPin. In this step you invite other people to your account in order to share specific projects with them and use other collaboration features. UXPin allows for user management, so you can have control of permitting access to specific areas of your work done in UXPin and keep the other ones to yourself.
- Inviting coworkers to your projects: this is the second step of full design collaboration in UXPin. With this option you can share specific projects with coworkers you previously invited to you account.
Let me show you how to use the above two options.
Inviting coworkers to your account
To invite coworkers to your UXPin account go to the dashboard and then click the “Workspaces” button (the icon with 3 horizontal lines) in the upper panel to show the workspaces panel.
While in the workspaces panel, click the “Manage your Team” button:
After clicking the “Manage your Team” button you will see a modal window with a list of users that you already have invited and the option to invite new users. In this step it is recommended to assign specific permission for the users that you invite. You can let coworkers create projects and invite other users to your account, but also access all your projects or only specific ones (you’ll learn about inviting users to specific projects in the next step).
Inviting coworkers to your projects
Like explained above, this option is to permit other users access to specific projects in your account, so they can collaborate with you on your designs. You can do it in two ways, whichever is more comfortable for you.
Firstly, you can add coworkers in the dashbard. Open any project and click the “+” button in the upper panel:
Secondly, while in the UXPin editor you can share the project you are currently working on with any user, just use the “Add coworker button” and pick users you want to add or remove from viewing the project:
Adding and managing comments
Once you have your team in one place, it’s time for some design collaboration. Here’s where the commenting feature becomes real handy. Let me show you how to get the most of it.
Your team can place comments while in the preview mode. Remember the sharing menu we discussed ealier? You can launch a preview from that menu as well. To put a comment on a preview, simply click this button in the upper bar:
How does a comment look like? Let me show you. Once you place a comment on a preview, it appears as a small circle exactly in the place you left the comment, so you can also mark and annotate anywhere on the design using this feature. In the example below we placed two comments, notice that the way commenting work makes this window looking like a small conversation:
Quick tip: if you’re sharing the design with someone that doesn’t have a UXPin account, ask this person to leave a name under the comments, so you know which comment comes from which person. To do this, guide your co-worker to the upper right corner of a preview to set up his/her name, see the picture below.
So once a comment is placed, can I change its position? Of course you can, there are serveal useful features to manage comments:
- Adjusting their place on a preview (you can treat them as annotations marking the exact spot of an issue)
- Removing outdated or misplaced comments
- Marking comments as “resolved” to keep track of what’s already taken care of
When the amount of comments gets a little hard to handle or you want to make sure you haven’t “missed a spot”, simply use the “view all” feature. You can do it from inside project dashboard:
Or from inside the editor:
Preparing a design documentation in UXPin
Wireframes and prototypes are only one part of the design story. If you want your design to have solid foundations and stay focues on solving specific design problems, a good idea is to prepare a design documentation – especially if you’re working on the solution with other people, because a documentation helps keeping things in order and keeping your team “on the same page”.
To get started on creating a design documentation, open any project and look for the gray “Create or upload UX Document”, right below the “Create wireframe” button:
Clicking this button will display a drop-down menu with all the documentation options:
- Persona: creating a Persona document using an editable template
- Business Model Canvas: creating a Business Model Canvas document using an editable template
- The Project Canvas: creating a Project Canvas document using an editable template
- Upload file: lets you upload external documentation in jpg, png, doc, ppt or pdf format without any storage limits
While you’re probably familiar with uploading files to cloud apps like ours, let me show you what’s unique about preparing a Persona, Business Model Canvas and The Project Canvas in UXPin, see the video below:
Well, that pretty much covers all the basic tools for design collaboration in UXPin. We went throught sharing design via URL, e-mail, exporting to HTML, PNG and PDF, inviting and managing coworkers, commenting features and preparing a documentation. Try them out with your teammates, clients or stakeholders.
Try Design Collaboration in UXPin
Thanks for tuning in and take care!
Ps. Liked this post? Sing up for our newsletter and you won’t miss out on the next one. Use the blue box on your right :).
