In a step-by-step demonstration, we show how organizations might use UXPin and Ethnio to recruit, screen, and schedule participants, conduct high-quality usability tests with interactive prototypes, and finally pay participants anywhere in the world—using only two tools.
What is UXPin?
UXPin is a code-based design tool that enables design teams to build fully interactive prototypes indistinguishable from the end-product. UXPin looks and feels like any other design tool but renders HTML, CSS, and Javascript behind the scenes rather than vector graphics like other popular design tools.
UXPin's Merge technology allows organizations to sync a design system repository to UXPin, so design teams use the same UI components during the design process as developers use to build the final product—creating a single source of truth.
Accurate Prototypes Require Accurate Research
UXPin's Merge technology allows organizations to sync a design system repository to UXPin's design canvas, so design teams build prototypes by dragging and dropping the same UI components that developers build the product with.
UXPin Merge allows product teams to get ideas into prototype form quickly. By using coded components (either with one of UXPin's built-in open-source component libraries or a private one), design teams can build prototypes that accurately replicate the end-product experience, enhancing testing scope while achieving meaningful feedback and data.
But once you build a prototype, you need to do research that is just as accurate. You don't want to stick a prototype under the nose of someone who doesn’t use your product, doesn't care about the use case or isn't in the right moment to give you accurate feedback.
Enter, Ethnio and UXPin.
You can use a live intercept in Ethnio to precisely target and recruit real-world participants and then guide them to an interactive prototype made with UXPin to gather realistic feedback.
We used one of UXPin's example prototypes to demonstrate how Ethnio's Research Ops platform and UXPin's full-stack design tool can simplify usability testing.
The Basic Idea
Art gallery ArtMart has just simplified its pricing and wants to add a booking form to its website.
The research team will use Ethnio's Intercepts to recruit website visitors who land on ArtMart's Visit page looking for tickets and pricing.
Participants will complete Ethnio's Screener and book a date for their usability study.
The team uses UXPin to create an interactive prototype to test the new booking system.
Once the study is complete, researchers will pay participants using Ethnio's Incentives.
Step 1: Using Ethnio's Intercepts to Recruit Real Participants
UX researchers know the value of interviewing real users vs. irrelevant panels. These authentic participants provide valuable, actionable insights from people who actually use the product for teams to iterate and improve.
Intercept-based participant recruiting is a vehicle to get our teams as close to our customers as possible.
Joanna VodopivecLead UX Researcher at SquareEthnio's Intercepts allow researchers to intercept and recruit users while they're interacting with a digital product. Researchers can customize the popup to be on-brand and blend seamlessly with the UI. The Intercept informs the user about the study with details about the incentive for participation.
Intercept targeting
Researchers can use Ethnio's Intercept's targeting to deliver popups to specific user groups based on many factors relevant to the product or participant attributes, for example:
Paid vs. free users
Logged in users
Returning or first-time website visitors
Specific languages, regions, locations
Devices and operating systems
Any personal details from the CRM (age, gender, area code, order history, etc.)
Step 2: Screening and Scheduling
If the user agrees to participate in the study, the Intercept directs them to a screener. Researchers can also add these screener links to emails, social media, paid ads, etc.
With Ethnio, I am able to screen, filter, and recruit thousands of participants within a few minutes, which gets me plenty of completes. 
Sarah BowlinDirector of Research at The ZebraEthnio's Screeners provide qualifying logic, drill-down logic, and page logic to funnel respondents to the right survey, study, or scheduler.
For our ArtMart campaign, researchers may only want to interview respondents who have visited the gallery before and survey everyone else.
Researchers can use Ethnio's Screeners to create light surveys and get immediate feedback. Ethnio tracks every interaction and response and automatically enriches participant profiles in Pool—Ethnio's purpose-built Research Ops CRM.
Fully automated quota management
Screeners also allow UXRs to set up and manage quotas in an intuitive dashboard using customizable qualifying logic with colors and emojis to visualize and monitor easier. Researchers can invite stakeholders to review each quota, with the option to reject or approve participants.
For our ArtMart campaign, researchers may set quotas for the following:
Families
Couples
Low-income households
Pensioners
Foreign tourists
Ethnio will automatically fill these quotas based on screener responses.
Ethnio's powerful recruitment scheduling technology
Ethnio's Scheduling gives UXRs multiple tools and features to automate and simplify the scheduling experience for participants, team members, and stakeholders.
Researchers can sync team members' calendars, and Ethnio will automatically schedule studies at a time suitable for everyone. They can also customize email notifications to meet brand and project requirements.
Researchers can visualize all studies in one combined calendar and sort by status, project, team member, and date range.
Step 3: Interactive Prototype Testing With UXPin
For our ArtMart example, researchers use UXPin with Merge technology to test the website's new booking system using interactive prototypes.
The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the 'design drift,' and it’s all driven from one place.
Nick ElliottDesign System Product Owner and Regional Head of Product Design at Iress.
Design teams can use one of UXPin's built-in open-source React UI libraries (MUI, Ant Design, or Fluent), to build a prototype fast while maintaining consistency with the end product. They can also import the organization's design system's components via two integrations:
Git Integration: React component libraries.
Storybook Integration: sync any Storybook, including React, Vue, Angular, and more.
UXPin also offers an npm integration, which allows designers to import and manage individual components from open-source design systems.
Benefits of a code-to-design workflow
Bringing coded components into the design process offers several benefits:
Enhanced testing: design teams can build interactive prototypes indistinguishable from the end-product, providing meaningful, actionable feedback during testing.
Design consistency: Merge components include properties and interactivity defined by the design system, including colors, sizing, typography, states, etc.
Single source of truth: designers and engineers use exactly the same component library, streamlining governance, updates, and consistency.
Smoother handoffs: with designers and engineers using the same components, design handoffs are more efficient, with a faster time-to-market.
ArtMart redesign
ArtMart doesn't have a design system, so the team uses React components from MUI.
Merge's drag-and-drop workflow means designers can build prototypes, test, and iterate much faster and with higher fidelity and functionality than traditional image-based design tools.
In UXPin, UI components look and behave exactly as they do for developers, effectively bridging the gap between design and development–a real single source of truth.
Birthe StruffmanndotSource GermanyThe ArtMart redesign has several UXPin components and features:
Input fields: there are three inputs for name, email, and mobile number. These are fully functional fields capable of capturing user inputs and using that data elsewhere in the application.
Fully functioning date picker: date pickers look and function as they do in the final product—something designers can’t do in image-based design tools.
Ticket selection: icon buttons and text fields combine to make steppers so users can increment ticket quantities or manually input a value.
Variables: designers can capture the user's name, email, mobile number, and date and display them on the booking confirmation screen.
Prototype testing
Researchers can test the UXPin prototype in the browser using the Preview and Share feature. For remote testing, they can send the prototype link to users and prevent unauthorized access using a password.
Researchers can use UXPin's Comments to leave notes and collaborate with design, product, and engineering teams. Ethnio and UXPin also integrate with Slack to streamline cross-functional collaboration. Team members can mention and assign comments to one another and mark them as resolved once they have taken appropriate action.
Design handoff
Design handoffs are seamless with less friction using UXPin Merge because designers and engineers speak the same language. Engineers can import the necessary components from the design system's repository and adjust properties according to design specs and prototypes. UXPin Merge renders production-ready JSX, so engineers can copy/paste to apply the changes.
Step 4: Incentive Payout in Ethnio
Once testing is complete, researchers can pay and monitor incentive payouts using Ethnio's Incentives. Incentives is a native feature, meaning no data sharing with third parties. UXRs can also restrict access to sensitive participant data within their team.
With Ethnio, researchers can pay participants anywhere in the world, in any currency, and translate UIs and correspondence into any language. A free incentive calculator allows teams to plan payouts and budgets, considering multiple factors for global studies.
UXRs can track incentives, including email opens, link clicks, and redeemed rewards. Payout methods include:
Bank transfer to any country and currency worldwide
Donate incentives to 40+ charity
Digital wallets, eGift cards, and retail vouchers—PayPal, Amazon, Global Virtual Visa, Uber, and more
The Necessity of High-Quality Research and User Testing
Interactive prototypes are crucial for achieving high-quality research outcomes. Why spend time and resources recruiting and selecting the perfect users and then put them in front of a static prototype that doesn't provide an authentic user experience?
Worse still, you purchase random panels and test them with static prototypes—that might look incredible—but lack the final product's fidelity and functionality.
Getting quality data from usability testing requires high-quality participants who actually use your products + fully functioning interactive prototypes.
Better stakeholder feedback
"C-suite people and directors can give us stronger feedback about the ultimate direction because they experience the features and goals of these prototypes rather than just commenting about how these boxes don't look like a text field.
Erica RiderFormer UX Lead EPX at PayPal.UXPin's interactive prototypes don't only benefit user testing. Stakeholders get an accurate vision of the final product, enabling them to share meaningful feedback while increasing trust in product and research teams.
To learn more about UXPin and Merge technology, check out their Merge page and follow the instructions to request access.