skip to main content
Back to case studies

Product case study

Yubico Product Finder Quiz

A guided product finder that helps people choose the right security key based on their experience, setup, and purchase needs.

Live Site
Year
2024
Role
Frontend Engineer
Type
Marketing site / Product guidance
Industry
Cybersecurity
Stack
React, TypeScript, Tailwind, WordPress, Cypress

Overview

Yubico’s product finder helps people choose a security key without requiring everyone to begin with the same level of technical knowledge. Visitors choose a starting point based on their familiarity and purchase context, answer a tailored set of questions, and receive a product recommendation or a clear next step.

Why rebuild it

The project replaced an older quiz that was harder to follow and did not create a clear enough path from someone’s needs to a product recommendation or business handoff. The goal was to help beginners reach an answer faster, ask more relevant questions for experienced buyers, and give larger business purchases a clearer route to contact Customer Success.

My role

The broader quiz structure and visual direction were already underway when I joined. I worked closely with UX and design to clarify incomplete rules, work through unclear questions and states, and turn the flow into a responsive, accessible React experience.

One product finder, four paths

The labels stay familiar to the quiz, but each one acts as a starting point for how much guidance someone needs.

Novice

A shorter route for people getting started with security keys.

Intermediate

A more focused path for people with some familiarity who need help narrowing their options.

Skilled

More specific questions for people who already understand their setup and requirements.

Business

When the selected quantity passes the business threshold, the quiz can shift from product selection to Customer Success.

Four starting points let the quiz match the amount of detail to someone’s familiarity and purchase needs.

Helping people answer technical questions

Each path uses a different set of questions, so beginners are not forced through the same level of detail as experienced buyers. Supporting information sits alongside the flow to explain terminology, clarify what a question is asking, and provide relevant Yubico context when it helps someone answer with more confidence.

Supporting information gives people the context they need without turning every path into a longer technical questionnaire.

From answers to the right next step

Answers guide people toward a relevant security-key recommendation instead of sending every visitor through one generic flow. For business buyers with larger purchase needs, the experience can move from product guidance to Customer Success at the appropriate point.

  1. Answer patternResponses narrow the flow around experience level, setup, and purchase context.
  2. Product recommendationIndividual buyers can reach a relevant security-key recommendation.
  3. Business handoffLarger team purchases can move from product guidance to Customer Success.
Individual paths end with a clearer recommendation and a direct route to the relevant product.
Larger purchase needs shift from a standard product recommendation to a Customer Success conversation.

Technical approach

  • Path-specific question sets for different experience levels and purchase contexts.
  • Conditional frontend logic that moves people through the appropriate questions and next steps.
  • Reusable question, answer, progress, and explanatory-content patterns.
  • Responsive and accessible frontend implementation.
  • React application integrated into the marketing site through the company’s existing custom WordPress plugin pattern.
  • Cypress coverage added later to protect key quiz paths.

Outcome

At a later point, internal tracking showed that 60% of people who completed the quiz continued to the e-commerce site.

What I learned

The most useful simplification was not removing detail everywhere. It was letting beginners reach a starting recommendation quickly while keeping the questions more specific for people who already knew what they needed.

The project reinforced that a product finder is not just a multi-step form. The order of questions, amount of explanation, and quality of each branch all shape whether someone feels guided or overwhelmed.