Setting up a Prototype usability test
First you'll need to have created a new study. For information on how to do that head over to head over to our guide.
Next, have a think about how you would like to structure your test. Check our prototype templates if you're looking for inspiration.
Adding a prototype block
When creating a study, you can click + New Block and then select Prototype test. This should create a block in your study that looks like this:
Introduce your task
Next, introduce the task that you'd like your participants to complete. You have the Title, Body and Callout fields to do this. You the preview on the right of the screen to see what this will look like.
Set recording settings
Wondering supporting screen and audio recording of prototype tasks on Desktop devices.
Note: Recording is only available on secure websites (with https). If a prototype test is triggered on an insecure website then no recording will be triggered but the participant will still see the prototype and be able to complete the study.
Link to your prototype
Add a link to your prototype from tools like Figma. We currently support:
Figma
InVision
Miro
Adobe XD
Axure
Design Tool integration guide
Figma
To embed a Figma prototype in a Prototype Test block:
Open your Figma design file, and click the ▷ (Present) button in the top right corner.
In the new tab that opens, update the Options setting to make sure your prototype displays as intended.
Click the Share button, and make sure "Anyone with the link" is set to "View":
Finally, click "Copy link" to copy the prototype link, and then paste the copied link into the "Prototype URL" field in your Prototype Test block on Wondering:
Invision
To embed an InVision prototype in a Prototype Test block:
Open your InVision prototype document, and hover over the screen you want to share:
Click the gear icon called "Global Appearance" at the bottom of the screen.
Make sure that the "Zoom/Scroll Behaviour" setting is set to "Scale Down to Browser Width", and then click the Apply Settings button to save any changes you've made.
Click the Share button, click the Public tab and copy the Public link.
Finally, paste the copied link into the "Prototype URL" field in your Prototype Test block on Wondering:
Miro
To embed a Miro prototype in a Prototype Test block:
Open the Miro board you want to add to your Prototype Test.
In the top right corner, click the Share button to open your sharing settings for your board.
Make sure that "Anyone with the link" is set to "Can view":
Click the </> Get embed code button, and then choose if you want your users to be able to see your entire board (by choosing "Free navigation") or just the frames you decide (by choosing "Presentation":
Click the Copy embed code and then paste the embed code to a text document (such as a text document or note).
Copy the whole URL in the src portion of the embed code:
Finally, paste the copied link into the "Prototype URL" field in your Prototype Test block on Wondering:
Adobe XD
To embed an Adobe XD prototype:
Open the Adobe XD file that you want to share as a prototype.
Go to the Prototype tab in the navigation and click on the prototype flow that you want to share.
Go to the Share tab in the navigation and make sure that the "View Setting" is set to "User Testing" and "Link Access" is set to "Anyone with the link" in the Link Settings section on the right:
Click the Create Link button, and then click the </> button to copy the embed code:
Paste the embed code to a text document (such as a text document or note).
Copy the whole URL in the src portion of the embed code:
Finally, paste the copied link into the "Prototype URL" field in your Prototype Test block on Wondering:
Axure
To embed an Axure prototype:
Open the Axure file that you want to share as a prototype.
Click Share button in the top right corner:
In the "Publish Project" window that appears, click Publish:
Click the "Share link" that is displayed:
In the new window that opens, customise your prototype settings so that it matches your desired participant experience. Some common customisations are:
Scale the prototype to fit by setting the scale to "Scale to Fit":
Hiding the top banner by clicking the "X" in the top left corner:
Click the three dots in the top right corner and decide if you want hotspots, comments and note markers to be available:
Copy the prototype URL from the URL bar in your browser:
Finally, paste the copied link into the "Prototype URL" field in your Prototype Test block on Wondering:
