Why Design Collaboration?
Collaboration is the secret sauce to success. When designers and stakeholders collaborate regularly, each iteration is then fueled by valuable insights and actionable feedback that drives the next iteration, which results in our design being more refined.
Working solo is dangerous because it limits the total output of ideas, increasing the likelihood of the end-result being substandard. Collaboration offers a super-easy and inexpensive way to validate ideas and mockups, so in this InVision Studio tutorial, we’ll highlight the various ways in which stakeholders can discuss feedback and collaborate.
Let’s start with Studio Mirroring.
Carrying on from the last tutorial, where we self-tested our design locally using InVision Studio’s Desktop Preview feature, the next step is to test it on a real device.
Enter Device Preview, officially known as Studio Mirroring.
Device Preview enables us to identify flaws that weren’t immediately evident in Desktop Preview, this time focusing less on silly mistakes (like a connection being misconfigured), and more on the user experience of the design itself. This is vital (for example) when designing usability and accessibility, because there’s no way to ensure that (for example) tap targets are easily clickable without testing them on a real device.
Being able to physically hold the prototype as if it were the real thing, even if it’s nothing more than a wireframe at this stage, allows us to see what’s not working.
Firstly, our device requires InVision Mobile — this includes either the InVision iOS App or the Android beta. It’s also worth noting that InVision Mobile contains a few other features, including the ability to comment on screens and collaborate on Freehands.
Anyway, in Studio:
- Click the Publish to InVision icon — or ⌘⇧P
- Switch to the adjacent “Mirror” tab
- Studio will now display a QR code for the document
And then, in InVision Mobile:
- Click the QR code icon
- Scan the QR code with the camera
Studio should now mirror the screens to the device 🎉.
With Studio now mirroring screens to our device, it’s time to take a thumbs-on approach to testing, so do a self-test first, then involve the rest of the design team.
Just FYI, if for any reason the prototype isn’t meant to be scrolled vertically, we can change this using the inspector. Below: the four different types of viewport scrolling.
- None (scrolling disabled)
- Vertical (up/down)
- Horizontal (left/right)
- Both (vertical and horizontal)
Prototype changes are mirrored in realtime 👏👏👏.
Freehand Feedback Sessions
Next, we need to facilitate a way for team members to express and document their feedback effectively. Designers often enjoy being very visual with their feedback, so with that in mind, it then makes sense to import the mockups into InVision Freehand.
Here’s our Freehand tutorial, in case you missed it.
Awesomely, we can actually launch a collaborative Freehand session directly from Studio, and this Freehand will contain all of the screens from our low-fidelity wireframe.
Click the Collaborate Live With Freehand icon — or hit ⌘⇧F — to launch a Freehand.
Launching a Freehand takes a few seconds, but once it’s ready, click the “Share” button to invite others to collaborate, then wait for feedback and make changes as necessary.
And, if making design changes during the session, we can sync those changes back into the Freehand without having to start a new session, by clicking the Update button.
Publishing to InVision
Next step: involving other stakeholders.
Involving a wider audience means more feedback, but that’s fine because we’ve already ironed-out the obvious flaws using a smaller subset of our stakeholders. Sharing with stakeholders that aren’t designers (i.e. clients and other teams) is more sporadic and less hands-on, where the feedback happens via comments over various iteration cycles.
Hence, in this next step we’ll upload our screens to the InVision Web Platform, and then create a share link where they can be interacted with on either mobile or desktop.
Let’s start by uploading our screens:
- Hit ⌘⇧P again
- Stay on the “Prototype” tab this time
- Complete the “Name” field (if needed)
- Clarify the “Viewport” and “Appearance”
- Click the “Publish” button to begin uploading
After that, click the “Copy Link” button and share the link with stakeholders.
Prototypes, viewed on desktop, look like this:
And there are some keyboard shortcuts:
- Navigate screens: ←→
- Auto hide navigation: H
- Full screen: F (hides everything)
And there are three modes:
- Play mode: P (enables interactions)
- Comment mode: C (enables commenting)
- Inspect mode: I (for inspecting styles and extracting assets)
Don’t worry about Inspect mode for now. Switch to Comment mode, then click on the screen to begin making a comment (the comment will show up wherever you click).
Additionally, click “Resolve” once the feedback has been addressed.
Super-easy, right? Identify » fix » more feedback.
What About Real User Feedback?
When conducting user tests (for early validation) or usability tests (for UX improvements, after validation), InVision works flawlessly with both UserTesting (tutorial) and Lookback (tutorial), allowing real users to also voice their feedback.
So we don’t deviate too much from the topic of Studio, we won’t discuss user testing today, but it has been confirmed that an InVision Studio → UserTesting integration will soon be at our fingertips. When that happens, we’ll update this section with a tutorial.
We haven’t invested much time or many resources in our design yet, so if there’s something about it that isn’t working, consider this realization a lucky escape, not a devastating failure. Wrong turns are inevitable, but a lean design workflow ensures that when we do take a step back, we learn from it and move two steps forward.
Get everyone involved, test often, suggest feedback, make improvements.
Got feedback? We’d love to hear it. Send us a tweet @uxtricksdesign.