InVision StudioNEW UX Design

A Guide to Collaboration With InVision Studio

Scroll down to learn about design collaboration with InVision Studio or download our InVision Studio ebook 🎉

Download (free)

Quick summary

Learn about testing on real devices, getting feedback, and collaborating with stakeholders.

What you’ll learn

  • Studio Mirroring
  • Getting visual feedback
  • Collaborating with stakeholders

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.

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.

Let’s begin.

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:

  1. Click the Publish to InVision icon — or ⌘⇧P
  2. Switch to the adjacent “Mirror” tab
  3. Studio will now display a QR code for the document

And then, in InVision Mobile:

  1. Click the QR code icon
  2. Scan the QR code with the camera

Studio should now mirror the screens to the device 🎉.

Setting up InVision Studio Mirroring

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.

Viewport Scrolling

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 👏👏👏.

Viewport scrolling

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.

Ready?

Click the Collaborate Live With Freehand icon — or hit ⌘⇧F — to launch a Freehand.

Syncing screens to 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.

Communicating feedback in Freehand

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.

Updating a Freehand

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:

  1. Hit ⌘⇧P again
  2. Stay on the “Prototype” tab this time
  3. Complete the “Name” field (if needed)
  4. Clarify the “Viewport” and “Appearance”
  5. Click the “Publish” button to begin uploading
Publishing to InVision

After that, click the “Copy Link” button and share the link with stakeholders.

Copying share links

Prototypes, viewed on desktop, look like this:

Opening share links

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)
Comment and inspect mode

Adding Comments

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.

Commenting with 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.

Conclusion

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.

Next: read high-fidelity screen design with InVision Studio or get the free ebook!

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.