HomeComputer ScienceCard Sorting & Information Architecture Simulator

Card Sorting & Information Architecture Simulator

Run a synthetic open card sort: many virtual participants group content cards, a similarity matrix is built from their agreement, and average-linkage hierarchical clustering reveals the resulting information architecture in a live 3D force-directed layout.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version
ui-ux-design-design ↗ Open standalone

Card sorting is one of the core UX research methods for designing a site's navigation: real participants group content items into piles that make sense to them, and researchers cluster the results into a proposed information architecture. This simulator runs that whole pipeline live — a configurable number of synthetic participants sort 15 website content cards under a tunable consistency level, a card-to-card similarity matrix is built from how often each pair landed in the same pile, and average-linkage hierarchical clustering merges the cards into groups. The resulting structure drives a real physics-based 3D layout, where every card pair repels like charged particles while a spring pulls similar cards toward each other, so the emergent categories visibly pull apart from the noise.

⚙ Under the hood

Run a synthetic open card sort with dozens of virtual participants, build a card-to-card similarity matrix from their agreement, and watch average-linkage hierarchical clustering reveal a website's information architecture in a live 3D force-directed layout.

ux researchcard sortingclusteringinformation architectureui designdata visualization

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)