**Four steps for testing prototypes asynchronously and remotely.** By [[Joshua Rudd]]. Published January 26, 2020 on [Medium](https://uxdesign.cc/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify-3dab59f89ef0). --- ![[Viewing a user session in FullStory.png]] <small style="text-align: center; display: block;">Viewing a user session in FullStory from a UXPin prototype hosted on Netlify.</small> Sometimes the tools we love need a little help from others. One tool I love to use for quick wireframes and high fidelity prototypes is [UXPin](https://www.uxpin.com/). Unlike Figma, Sketch, and most design tools that require you to fake states and interactions, UXPin supports interactive states, conditional logic, and even code components. This means that buttons and form fields are fully interactive. Similar to tools like Figma, UXPin is web-based and makes it easy to share a URL with anyone to click through the prototype. Because of this and its rich support for interactive components, when I’m creating and testing prototypes with people where it needs to feel like the real thing, UXPin is a top choice. ## Testing at scale Sharing preview links is simple enough, but observing how others navigate through your prototypes is often cumbersome and synchronous. Peering over someone’s shoulder, getting them to share their screen with you over Google Meet or Zoom, or working through a 3rd party service like [UserTesting.com](http://usertesting.com/) are often not ideal. One effective method I’ve used for testing concepts and prototypes at scale with B2B customers at companies like UserVoice is to target in-app messages inviting users to test a prototype and provide feedback. But, as many of us know, **the real value in feedback is not what the user _says,_but what they _do._** Enter [FullStory](https://www.fullstory.com/). FullStory helps us see what people do, and understand what they mean when they give us feedback. As someone who has led design for B2B platforms serving thousands of customers, it’s simply the best way to understand how people are using your product. FullStory is like a DVR for recording everything people do on your website or web app. You can go back and replay—visually—every user’s session. You can even search for specific events to watch everyone who’s done it. As powerful as this is for seeing people use existing products and sites, what most people don’t know is that they can use this power for prototypes, too! The trick is getting FullStory to record UXPin prototypes. Fortunately, UXPin allows you to export prototypes in HTML. Prototypes in UXPin _are_, in fact, already HTML, so this is perfect. The only thing missing is hosting the prototype where others can access it and recording it with FullStory. This is where Netlify comes in (of course, you could use a different hosting solution, but Netlify is free and makes it easy to inject FullStory’s tracking scripts). ## The Steps This article assumes you already use [UXPin](https://www.uxpin.com/). If not, they’ve got a great free trial and [lots of tips](https://www.uxpin.com/docs/) for getting started. You can even import your existing Sketch files. Go make something you want to test and carry on! Also, if you haven’t already, sign up for free accounts on [Netlify](https://www.netlify.com/) and [FullStory](https://www.fullstory.com/). Both Netlify’s and FullStory’s free plans are sufficient for testing your prototype. ### Step 1: Export your UXPin prototype <figure> <iframe width="900" height="675" src="https://www.youtube.com/embed/smtEygWU9DQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <figcaption>Exporting a UXPin prototype to HTML.</figcaption> </figure> 1. Open the *Share* dialog for your prototype. 2. Select the *Export* tab, then select HTML. 3. Make sure *Include images (offline browsing)* is selected. 4. Click *Export as HTML*. 5. After the export is generated, click the link to download the prototype. ### Step 2: Upload your prototype to Netlify <figure> <iframe width="900" height="675" src="https://www.youtube.com/embed/dwvcydGtN_Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <figcaption>Uploading a UXPin prototype to Netlify.</figcaption> </figure> 1. After logging in to Netlify, drag the unzipped UXPin folder into the area that says, *“Want to deploy a new site without connecting to Git? Drag and drop your site folder here.”* That’s it. In seconds Netlify will create a new website with your prototype and assign it a unique subdomain. Feel free to change this to whatever you prefer, but note that if you change it after FullStory starts recording sessions, sessions from before you changed the subdomain will not render properly. ### Step 3: Add your FullStory tracking code to Netlify <figure> <iframe width="900" height="675" src="https://www.youtube.com/embed/m0lJzhageJA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <figcaption>Adding FullStory tracking code to Netlify.</figcaption> </figure> Once Netlify has published your new site, you’re ready to add your FullStory tracking code. Netlify allows you to do this without modifying the HTML that UXPin generated, which is especially helpful if you update your prototype later — you don’t have to edit the HTML yourself to include FullStory! 1. In Netlify, click on your new site’s **Site settings.** 2. In the left-hand nav, select **Build & Deploy** and scroll down to **Post processing.** 3. Under **Snippet injection,** click **Add snippet.** You’ll now see three new fields: Insert before…, Script name, and HTML. 4. Change **Insert before** from `</body>` to `</head>`. 5. For **Script name** you can simply enter *FullStory* (the exact text doesn’t matter). 6. Under **HTML** you’ll need to paste in your FullStory tracking code. If you’ve just created a new FullStory account, this will be the first thing you see. Otherwise, go to your FullStory settings and copy the Javascript code from there. 7. **Click Save.** Netlify will automatically update your prototype’s HTML to include the tracking script. ### Step 4: Share your prototype Now you’re ready to have people view your prototype. Just copy the website URL generated by Netlify. How and with whom you share your prototype is up to you, depending on the audience and desired turnaround time. Here are a couple of methods for scaled asynchronous testing I’ve had success with in the past: 1. **Email.** Email specific users you’d like feedback from. You’ll be able to see if and when they’ve accessed the prototype, and respond 2. **In-app notification.** Send an in-app notification to a specific cohort of users of your product asking them for feedback about your new concept. Services like [Pendo](https://www.pendo.io/) and [Intercom](https://www.intercom.com/) are great for this. 3. **Embedded iframe.** Similarly — or in addition to — in-app notifications, you can embed your Netlify-hosted prototype in an iframe. Try prompting users through an in-app button or notification to invoke a modal experience with the embedded prototype. In any of these cases, it’s helpful to provide context to the person you’re asking to view the prototype, let them know what kind of feedback you’re looking for, and how to give that feedback. ## Start Watching <figure> <iframe width="900" height="675" src="https://www.youtube.com/embed/oxCuYRYWTGc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <figcaption>Viewing a user session in FullStory.</figcaption> </figure> Once people start viewing and interacting with your Netlify-hosted prototype, their sessions will automatically be recorded and you’ll start seeing their sessions show up in FullStory. Whether you’re testing your prototype with just a few people or at scale, you’ll now be able to review how each session at any time. As an added bonus, you can even add notes to specific moments you’re reviewing in FullStory to share with your team (or just to keep track of for yourself). Happy testing! %% ## Meta Published * [https://medium.com/@joshuarudd/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify-3dab59f89ef0](https://medium.com/@joshuarudd/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify-3dab59f89ef0) * [https://uxdesign.cc/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify-3dab59f89ef0](https://uxdesign.cc/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify-3dab59f89ef0) Referrers 1. [https://uxdesign.cc/](https://uxdesign.cc/) 2. [https://productdesign.tips/html/prototype-testing](https://productdesign.tips/html/prototype-testing) 3. [https://medium.com/topic/design](https://medium.com/topic/design) 4. [https://medium.com/topic/ux](https://medium.com/topic/ux) 5. [https://medium.com/topic/visual-design](https://medium.com/topic/visual-design) 6. [https://www.uxatoday.com/posts/PDkZFZkz7sCqpawxY/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify](https://www.uxatoday.com/posts/PDkZFZkz7sCqpawxY/testing-prototypes-remotely-with-uxpin-fullstory-and-netlify) Social Media 1. [https://twitter.com/bhooshan/status/1219900007706431493?s=21](https://twitter.com/bhooshan/status/1219900007706431493?s=21) 2. [https://twitter.com/uxnews_io/status/1219781806284656641?s=21](https://twitter.com/uxnews_io/status/1219781806284656641?s=21) 3. [https://twitter.com/maker_ade/status/1219781020469334022?s=21](https://twitter.com/maker_ade/status/1219781020469334022?s=21) 4. [https://twitter.com/vpware/status/1217916104317767681?s=21](https://twitter.com/vpware/status/1217916104317767681?s=21) 5. [https://twitter.com/uxdesigncc/status/1220038920999776256?s=21](https://twitter.com/uxdesigncc/status/1220038920999776256?s=21) 6. [https://twitter.com/uxpin/status/1220259492383862784?s=21](https://twitter.com/uxpin/status/1220259492383862784?s=21) 7. [https://www.linkedin.com/posts/uxpin_testing-prototypes-remotely-with-uxpin-activity-6623874058054311937-8xQ7](https://www.linkedin.com/posts/uxpin_testing-prototypes-remotely-with-uxpin-activity-6623874058054311937-8xQ7) 8. [https://www.linkedin.com/posts/elanlopes_testing-prototypes-remotely-with-uxpin-activity-6626228458726969344-XRgS](https://www.linkedin.com/posts/elanlopes_testing-prototypes-remotely-with-uxpin-activity-6626228458726969344-XRgS) %%