Token Yard

Token Yard

We partnered with Token Yard to design a prediction marketplace where probability reads as signal, not as a bet, and where the difference between the two is visible on the surface of the product.

Prediction markets have a credibility problem. The category is crowded with platforms that borrow their visual language from gambling, which makes serious participants discount the data underneath.



Token Yard needed the opposite reading. The product had to feel closer to a terminal than a casino, without becoming so austere that a first-time user bounces off it.

Our objective was to translate a macro-focused market framework into a responsive web app that investors, analysts, and experienced traders would trust on sight, while keeping the entry point warm enough for someone encountering prediction markets for the first time.

Process

01
Product Strategy & Information Architecture
.
02
UX & Conversion Design (CRO)
.
03
Web App UI & Design System
.
04
High-Fidelity Interactive Prototype
.
Our Work

The Token Yard interface was built around a single promise: that any probability on screen is one you can interrogate. Rather than compressing markets into a feed of odds, the structure moves from category to market to evidence, letting a user arrive at a number and then work backwards through the sources, the criteria, and the history behind it. Density is layered deliberately, so a newcomer sees a clear question and a clear percentage while an expert finds volume, participation, and trend without leaving the card.

Color Palette

The palette is built almost entirely from neutrals, with a single directional pair reserved for outcome and movement. Because that pair does semantic work across percentages, charts, buttons, and depth bars, users read market state before they read a single word, and color never appears as decoration.

Typography

The system pairs an editorial serif for market questions and headings with a neutral sans for data, labels, and interface controls. The contrast frames each market as a question worth considering rather than a product listing, while uppercase letterspaced micro-labels organize the page into scannable zones without adding visual weight.

Closing (visual system → conversion)

Beneath the data layer sits a crafted illustrated environment that repeats as market thumbnails and gives abstract macro questions something concrete to hold onto. It is the mechanism that keeps a serious financial product approachable, and it is the reason the platform reads as authored rather than templated.

Conversion mechanics were designed around confidence rather than urgency. Outcome actions carry their price inline, so committing to a position is a single deliberate step with no hidden consequence. Because the MVP targets an invite-only alpha and investor presentations, the interface was optimized to convert scrutiny into belief, which is a harder and more durable outcome than converting a click.

"We came in worried that a prediction market would end up looking like every other prediction market. The Charly team understood immediately that our whole positioning depends on not looking like that. The signal and noise idea was ours in principle, but they were the ones who put it on the screen where people can actually see it. First time we showed the prototype to investors, nobody asked us to explain what the product was. They just started arguing about the markets."

Founder, Token Yard