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. 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 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. 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. If not, they’ve got a great free trial and lots of tips 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 and FullStory. Both Netlify’s and FullStory’s free plans are sufficient for testing your prototype.
Step 1: Export your UXPin prototype
- Open the Share dialog for your prototype.
- Select the Export tab, then select HTML.
- Make sure Include images (offline browsing) is selected.
- Click Export as HTML.
- After the export is generated, click the link to download the prototype.
Step 2: Upload your prototype to Netlify
- 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
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!
- In Netlify, click on your new site’s Site settings.
- In the left-hand nav, select Build & Deploy and scroll down to Post processing.
- Under Snippet injection, click Add snippet. You’ll now see three new fields: Insert before …, Script name, and HTML.
- Change Insert before from
</body>to</head>. - For Script name you can simply enter FullStory (the exact text doesn’t matter).
- 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.
- 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:
- 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
- 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 and Intercom are great for this.
- 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
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.
In Conclusion
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!
This article originally appeared on UX Collective and has been posted here with permission from the author.
