Note: there is an update relating to InVision Studio at the bottom of this article.
If you design digital products like websites or apps then you will be well aware of the powerhouse prototyping tool InVision. They’ve been taking the design world by storm since founded in 2011.
Designing prototypes is an important part of any designer’s workflow, as such, InVision has become an integral tool within product teams. However, designing the prototype is only half the job, the second part is testing the design with users and seeing if what you’ve designed works.
Like a number of prototyping tools on the market, InVision has some usability testing baked in. It predominantly revolves around getting videos of users while they test a prototype on their iPhone 6 or above.
These videos of course are valuable, however, there is so much more that can be done with user testing and for these situations a tool like Loop11 is perfect.
The good news is, using Loop11 to test your InVision prototypes couldn’t be easier. Below we detail the steps.
This option is really simple. Get your ‘share link’ from InVision.
Then load the URL in your browser, navigate to where you wish to start the Loop11 test. Then when setting up your test all you need to do is copy and paste the URL from the prototype into the ‘task start’ URL field within Loop11. Be sure not to use your ‘share link’ as the start URL in Loop11. Instead use the link that the ‘share link’ redirects you to. An example of the correct link is highlight below.
Login to your InVision account, navigate to your prototype, then click on the menu item consisting of three dots (…). A secondary menu will then appear from which you can select ‘Download Prototype.
Ensure that ‘ZIP’ is selected as the file type and then click ‘Generate Zip’.
Once the ZIP file is ready, you will be provided with a download link. This saves the zip file to your computer.
If you’ve opened ‘index.html’ correct then you’ll see a lot of code, don’t worry, you don’t need to read or understand it. Scroll to the very bottom of the file and paste the Loop11 JS code just before the closing BODY tag and save the file. In the below screenshot we’ve circled the closing BODY tag in pink and highlighted the Loop11 JS in green.
The last step is to upload the unzipped InVision folder to your websites or server. You’re then ready to start configuring and running your Loop11 test on your InVision prototype.
If you use the ‘share to Invision’ button within InVision Studio it will provide you with a link, however, this is not the final link you want to use for your Loop11 project. This link actually requires the viewer to login to your InVision account.
So what you need to do is first grab this link and visit it in your browser. Then, once you see the prototype, locate the ‘Share’ button and click on it, the button looks like this:
Then, once you click on it you will be given an alternate link to share with anybody. It’ll look like this:
You can copy this link and use it as you start URL for your Loop11 project.