Learn how to collaborate on prototypes with InVision Studio, mirroring, and shared prototypes.
What you'll learn
- Studio Mirroring
- Sharing and feedback
- Freehand collaboration
Why Design Collaboration?
Collaboration is the secret sauce to success. When designers and stakeholders collaborate on a regular basis, they’re able to adopt a lean design workflow, fuelling each iteration with valuable feedback and actionable insights that then drives the next iteration. The ultimate benefit of lean design and collaboration is a better end result.
Working solo is dangerous because it limits the total output of ideas, increasing the likelihood of the end result being substandard. Collaboration is an immensely 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 ideas and feedback.
Let’s start with Studio Mirroring! 🎉
Getting Started With Studio Mirroring
Since we rounded off the last tutorial by testing our low-fidelity prototype with the Desktop Preview feature in Studio, the next step is to test it using a real device.
Enter Device Preview (or “Studio Mirroring”).
Device Preview enables us to iron out 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 tap targets are sufficiently 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.
First, our device requires the installation of InVision Mobile, which includes the InVision iOS App and the Android beta. It’s worth noting that InVision mobile apps have other useful features, including the ability to comment and even collaborate on Freehands.
With an InVision mobile app installed, in Studio:
- Click the Share to InVision icon (⌘⇧P)
- Switch to the “Mirror” tab
- InVision Studio will offer a scannable QR code
After that, on InVision Mobile:
- Click the QR code icon
- Scan the QR code with the camera
Awesome, we’re linked!
With Studio now mirroring screens to our device, it’s time to take a thumbs-on approach to testing. Make sure that the rest of the design team does the same.
By the way, 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 (default)
- 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 InVision 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 mockup.
Click the Collaborate Live with Freehand icon, or use the ⌘⇧F shortcut.
Do the thing in Freehand.
Re-sync mockup changes with the Freehand by clicking the “Update” button.
Sharing to InVision
For external stakeholders (meaning clients and/or non-designers), we can instead upload our screens to the InVision Web Platform and create a share link that can be viewed on either mobile or desktop. This workflow is more sporadic, hence, sharing doesn’t come with any realtime mirroring features, and since non-designers tend to communicate better with words, the feedback typically happens via commenting.
Let’s begin by uploading our screens to the InVision Web Platform.
- Click the Share to InVision icon (⌘⇧P)
- Complete the “Name” field (if needed)
- Click the “Publish” button to begin uploading
Once uploaded, click the “Copy Link” button, and then share the link with stakeholders.
Stakeholders can also access shared prototypes via the InVision Web Platform, but also, guests can view and comment too (if enabled). Regardless, it should look like this:
Just like with Studio Mirroring, this screen allows us to test our prototype (via desktop with clicks, and via mobile with taps). On desktop, there are a few keyboard shortcuts:
- Navigate screens: ←→
- Auto hide navigation: H
- Full screen: F (hides everything)
Click the “Share” button in the bottom-right corner to invite stakeholders to collaborate.
- Play mode: P (the current screen)
- Comment mode: C (for adding comments)
- Inspect mode: I (for handing off styles and assets)
Switch to Comment mode, then click on the screen (on the element that relates to the comment). Comments are contextual and numbered, which keeps them organized.
What About Real User Feedback?
When conducting user tests (for early validation), or usability tests (for UX improvements, after validation), the InVision Web Platform has integrations with both UserTesting (tutorial) and Lookback (tutorial), allowing real users to physically access our prototype and voice their feedback regarding its usefulness and effectiveness.
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 improvements.
Tune in later this week to learn about high-fidelity screen design and prototyping with InVision Studio. Also, subscribe to the book — it’s totally free, so why not?
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.