← All docs

Project & design

Prediction-site UI/UX — what to adopt from Polymarket and Kalshi

Summary + sample · full document is 2,188 words

Summary

The two best-known prediction-market frontends — Polymarket and Kalshi — have quietly converged on a small handful of visual conventions that make probabilistic information legible at a glance. This note pulls those conventions apart, distinguishes the patterns we want to copy from the ones we don't, and lays out how they map onto the WC2026 dashboard in this repo.

The goal is visual alignment, not feature parity. We are not building an exchange. We are building a research dashboard for football analytics. But the prediction-market crowd has already done the hard work of teaching a general…

Sample

1. Polymarket — what it does well

1.1 Probability is the protagonist

Every Polymarket market card answers one question first: what is the implied probability of each outcome, right now? That number — typically rendered as "63¢" or "63%" — is the largest, highest-contrast piece of text on the card. Question text is secondary. Volume, liquidity, and resolution date are tertiary.

The cents-vs-percent duality is deliberate: the cent is the contract price (so it's tradable), and the percent is the probability (so it's interpretable). Both are the same number. The UI never makes you do the conversion.

1.2 Card grids beat tables for browsing

The home and category pages are dense card grids, typically three columns on desktop, one column on mobile. Each card is a clickable target with:

  • Question (1–2 lines, truncated)
  • Top outcome(s) with probability bar(s) — for binary, just one Yes bar;

…

Full document

Pro

Want the full document?

Prediction-site UI/UX — what to adopt from Polymarket and Kalshi runs 2,188 words. Pro members get every research note in full, plus the arbitrage feed, model outputs, and weekly updates.

Sign in for Pro access →