Your Guide to Faster Usability Testing with UXPin & Ethnio

Here's how UXPin and Ethnio streamline your usability testing workflow - recruit, screen, schedule, test, pay globally - with only two tools!

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.

Streamline your user testing recruitment workflow with EthnioFrom intercepting real users to global payments—Ethnio's end to end Research Ops platform will simplify time-consuming operational workflows

The Basic Idea

Art gallery ArtMart has just simplified its pricing and wants to add a booking form to its website.

  1. The research team will use Ethnio's Intercepts to recruit website visitors who land on ArtMart's Visit page looking for tickets and pricing.

  2. Participants will complete Ethnio's Screener and book a date for their usability study. 

  3. The team uses UXPin to create an interactive prototype to test the new booking system.

  4. 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 PoolEthnio'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.

Make your UX research more efficient with EthnioDitch the color-coded spreadsheets and stop wasting time with manual scheduling

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:

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

We think globally about UX ResearchEthnio provides the tools and features for global studies from translating UIs to paying participants anywhere in the world

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.

Seeking actionable insights from real users?Recruit participants who actually use your products with Ethnio


More from the Blog

Optimize your research recruitment funnel

Everything you need to know about conversion rates recruiting for UX research studies - from pageviews, screener views, and responses.

Ethnio tips for Program Managers & Research Ops

Join power user Tarik Arslan, Research Operations Program Manager on teams from Asana to Google, as he shares his best practices for leveraging Ethnio’s features to optimize participant recruitment.

Subscribe to Updates