Momentum Framework

The Brief

Smarkets asked for a redesign of their market view, the single-event screen showing buy and sell prices, matched volumes, the order book and the probability graph for a prediction market. The brief was pointed: the existing screen was clear and honest but quiet, it read as somewhere to take a price rather than a market you could trade. The task was to make trading activity legible and felt, sharpen the order book, surface momentum and liquidity, and design a one-screen version for both desktop and mobile that served casual traders and serious traders on the same surface, without splitting into two products. Beyond the single screen, the brief explicitly wanted evidence of systems thinking: how the patterns would scale across other markets and views, and how an engineering team would adopt them, plus a visible, honest account of the AI workflow used to get there.

Constraints: Roughly three to four hours of working time, submission within five days, one screen designed for both platforms, and a requirement to show design-system thinking rather than a single polished mock.

Opportunity

Walk into a trading floor. You hear the buzz. You see the energy. Traders are moving, phones are ringing, prices are ticking, money is flowing. It’s alive. You feel it immediately.

A market only exists because people are trading it. Take the people away and there’s nothing left, no price, no probability, no market at all. So the feeling of people, of activity, of money changing hands, isn’t decoration. It’s the truest possible signal of what a market actually is.

This isn’t an industry-wide problem. Other platforms manage to show this. Smarkets, specifically, doesn’t. Right now, a market is happening. Real money. Real people. Real decisions. But the interface doesn’t reflect any of it. It shows a price and a graph and calls it done. It’s missing the people.

The brief asks: “make the trading activity legible and felt.”

Our approach is simple: we’re not redesigning Smarkets. We’re injecting subtle animations and lightweight components into what already exists, the start of a shared motion language, a Momentum Framework, that future features can draw from rather than reinventing each time. Three small additions here that work together to create a heartbeat, with the same thinking able to carry into gamification, personalisation, or wherever else togetherness as a design idea ends up mattering.

None of these components are new inventions. Candlestick views, live counters, toast notifications, pulsing “live” indicators, all exist elsewhere, in trading terminals, in delivery apps, in ticket-booking sites. Jakob’s Law tells us why that matters: users spend most of their time on other products, and only a sliver of it on yours. Familiar patterns get understood instantly. Nobody has to learn what a pulsing dot or a counting number means, because they’ve already seen it somewhere else. We’re borrowing trust, not building it from scratch.

The result: markets that feel alive.

Living Pulse

The Problem

The graph sits flat. It shows history, but it doesn’t show aliveness. When a market is quiet (hours before an event, waiting for trades), the graph looks dead. When a market is active (game in progress, money flowing), the graph still looks the same. There’s no visual signal that something is happening.

The Solution

A subtle pulsing animation on the graph’s “now” marker. Like a MacBook breathing when it charges, not distracting, not constant, just a gentle indication that the system is watching and ready. The pulse exists whether the market is sleeping or alive. On a dead market, it signals: “The system is real and waiting.” On a live market, surrounded by other signals, it reinforces: “Something is happening right now.”

How It Works

• Small animated dot or line on the graph marking “now”
• Opacity animation: 0.3 to 1.0 to 0.3 over 2 seconds
• Continuous loop, background-level intensity
• Works on all probability graphs, price graphs, any time-series visualisation
• Mobile and desktop, no change needed, the principle scales

Why It Works

It’s honest. It doesn’t lie about market aliveness. On a sleeping market, the pulse is there but subdued. On a live market, it sits alongside other signals (liquidity changing, trades happening). The animation is small enough that it never distracts, but present enough that casual observers notice something is real.

Liquidity Indicator

The Problem

Smarkets shows total liquidity across a market (e.g. “£78,000 total matched volume on France vs Morocco”). But where is that money? Which outcome is getting the capital? A casual trader sees this number and has no sense of where the money is flowing. A serious trader wants to know: is there more liquidity to buy or sell? Where can I actually get filled?

The Solution: Two Concepts

We’re proposing two approaches. Both solve the problem of visibility. One is simpler and more approachable. One is more powerful for serious traders.

Concept 1: Liquidity Indicators on Buttons

The simplest approach: show broken-down liquidity directly on the existing buy/sell buttons.

Currently:

• France to win: 2.44 (buy) / 2.46 (sell)
• Draw: 1.98 (buy) / 2.02 (sell)
• Morocco to win: 8.50 (buy) / 8.80 (sell)

With liquidity indicators:

• France to win: 2.44 (buy) / 2.46 (sell), with visual fill showing £45,000 available to buy, £38,000 available to sell
• Draw: 1.98 (buy) / 2.02 (sell), with visual fill showing £12,000 available to buy, £10,000 available to sell
• Morocco to win: 8.50 (buy) / 8.80 (sell), with visual fill showing £5,000 available to buy, £3,000 available to sell

In a glance: where is the money? France has it, Morocco’s thinly traded. Scale the visual metaphor to the amount: if France is full and Morocco is thin, make that plain. A single line or bar acting as a fill level, depth indicator, or ambient fill colour on the button itself does this without extra interface elements.

Why Concept 1 works

It doesn’t add anything new to the screen. It lives on the existing buttons. A casual trader sees the visual signal (“France is busy, Morocco is quiet”) without having to parse numbers. A serious trader sees the same visual signal as a shorthand for “I could get filled quick on France, but I might have to work harder to exit Morocco.” The principle is Jakob’s Law again: a fill or colour gradient on a button isn’t novel, most users have seen these metaphors on sliders, progress bars, the battery indicator on their phone.

Concept 2: Candlestick-style Liquidity View (More Ambitious)

A second, more ambitious approach: show not just current liquidity, but depth and history via candlestick-style bars for each outcome.

Instead of static numbers, the order book becomes a small, animated candlestick chart, one per outcome, showing:

• The midprice (the fat body of the candle)
• The bid/ask spread (the wick, how far spread apart)
• The matched volume (the height or colour intensity)
• Live updates as trades flow in

Over time, this chart tells a story: when did this contract fill the most? When did the spread widen? Is there more selling than buying right now? A serious trader reads these shapes instantly. A casual trader sees it’s moving, which is enough.

Why Concept 2 is worth considering (but riskier)

It’s familiar to anyone who’s ever looked at a stock price or forex chart. It’s information-dense without being visually cluttered, the small multiples (one per outcome) scale, and it’s genuinely powerful for someone who wants to lean in. But it demands more engineering work (live updating, animation performance on many small charts) and it assumes your casual user can glance at a candlestick and not get lost. That’s not a given.

The recommendation: start with Concept 1. The liquidity indicators on buttons are a low-risk, high-visibility win that works for both trader types. Ship that first, prove it moves behaviour, then revisit whether Concept 2 is worth the effort.

Success Metrics

Three metrics, each tied to one component. If they move in the expected direction, the system works. If not, we know which part to revisit.

1. Basket-adds during quiet windows

Hypothesis: Even without urgency or scarcity, seeing that a market is alive (Living Pulse ticking, Togetherness ticker showing trades landing) will increase casual traders’ confidence to add a contract to their basket and get through to the betting slip, rather than just browsing.

What we’d track: Basket-add rate during quiet event windows (pre-event, low trade volume) before vs after Momentum Framework ships. We’re isolating the signal of aliveness here; urgency and scarcity haven’t entered yet.

Direction we expect: Up. A pulsing graph and a counter suggesting togetherness should nudge casual traders from “just looking” to “this feels like a place to trade.”

Timeline: Daily tracking for the first 30 days post-launch, compared against the same pre-event windows for the prior 30 days. This is a slow-burn metric, quiet periods don’t generate much volume, so a 7-day read will be noisy. 30 days gives enough events to see a real pattern.

2. Fill rate and time-to-fill on contracts with visible liquidity

Hypothesis: Once liquidity is visible on the buy/sell buttons, users will respond to scarcity, contracts showing thinning liquidity will get filled faster, and users will be more decisive when they can see depth rather than guess at it.

What we’d track: Time between a user viewing a contract and completing a trade on it, segmented by whether that contract had low, medium or high visible liquidity at the moment of viewing. Also track: did showing liquidity increase the proportion of users who complete a trade after opening the buy/sell panel (panel-to-trade conversion), versus abandoning it.

Direction we expect: Time-to-fill down, panel-to-trade conversion up, particularly on low-liquidity contracts where scarcity is real and now visible rather than hidden.

Timeline: This is testable fast. A/B test with liquidity indicators on vs off, run for 7 days minimum to get statistical confidence, extend to 14 days if traffic is thin on the specific contracts being measured.

3. Second transaction rate within a session

Hypothesis: Togetherness signals (the ticker, per the recommendation above) create a sense of ongoing momentum, seeing other trades land should make a user’s own first trade feel like joining something active, increasing the likelihood they place a second trade in the same session rather than trading once and leaving.

What we’d track: Of users who complete one trade in a session, what percentage go on to complete a second trade in that same session, before vs after Togetherness ships. Also worth watching: average session length for users who see the components active (live market) vs those who don’t (quiet market), to separate “more trades” from “just more time on site.”

Direction we expect: Up. This is the metric most directly tied to Smarkets’ commercial interest, repeat engagement within a session is a leading indicator of a user becoming a habitual trader rather than a one-and-done casual.

Timeline: Track on a 1-day basis (session-level data resolves fast) but report weekly, and hold a 90-day view to check whether the early lift is a novelty spike that fades or a genuine behavioural shift.

How These Three Fit Together

If all three move in the hypothesised direction, that’s a strong case the full system works as intended. If only one or two move, that tells us which component is pulling weight and which needs rethinking, rather than treating the whole initiative as one undifferentiated bet.

The Counterfactual Risk

Every one of these signals could cut the wrong way. Worth stating plainly, and worth measuring, not just acknowledging.

Liquidity Indicator: scarcity could read as a warning, not an invitation. The instinct behind this component is that seeing thin liquidity creates urgency, act now or miss it. But the same signal could just as easily read as “this market is thin and untrustworthy,” particularly to a casual trader who doesn’t have the context to know that low liquidity on a quiet contract is normal, not a red flag. We’d be trying to create FOMO and accidentally creating doubt instead.

How we’d measure it: Segment the panel-open-to-abandon rate (opens the buy/sell panel, then leaves without trading) by trader type, first-time or low-volume users versus users with a longer trade history. If abandonment on low-liquidity contracts rises specifically among casual traders after this ships, that’s the counterfactual showing up in the data, not urgency, but hesitation.

Kill criterion: If casual-trader abandonment on low-liquidity contracts increases by a meaningful margin against the pre-launch baseline and doesn’t recover within the first 30 days, the component gets pulled back to design, most likely gated so it only surfaces for users with trading history, rather than shown to everyone by default.

Togetherness Ticker: constant movement could read as noise, not energy. On a genuinely fast-moving market, numbers counting up and down every few seconds could tip from “this feels alive” into “this feels chaotic,” especially for a casual trader trying to make a simple decision. Miller’s Law cuts both ways here, the component designed to draw attention could end up overloading the exact working memory we said we wanted to protect.

How we’d measure it: Watch time-on-page and rage-click or erratic-scroll signals (if available) on high-frequency markets versus low-frequency ones. If casual traders leave faster or interact less cleanly on the loudest markets, the animation frequency needs a ceiling.

Kill criterion: If session abandonment correlates with update density above a certain threshold, we cap how often the number is allowed to visibly animate (e.g. batch small updates rather than animating every single trade) rather than reflecting every trade individually.

This is the part of the job I don’t think can be skipped. It’s easy to ship a feature because the story behind it is good. It’s harder, and more valuable, to build in the exact conditions under which we’d admit the story was wrong and take it back out. If a component doesn’t move its metric, or moves it in the wrong direction, it doesn’t get a permanent home just because it was clever to build. That’s how you end up with a product nobody can navigate anymore.

Next Actions

What’s here is a set of high-level concepts, grounded in real behavioural principles rather than personal taste. That’s a deliberate starting point, not a finished system. Getting from here to something shippable means:

Instrument before building further. The three metrics above only work if the tracking exists from day one, basket-adds during quiet windows, time-to-fill, session-level second transactions. None of this is retrofittable cleanly. If Living Pulse ships first as the low-risk starting point, its event tracking should ship with it, even before the other two components exist, so we have a clean before/after baseline rather than guessing retroactively.

Break these down into reusable components and animation patterns. Living Pulse and the ticker need to exist as proper design system primitives under the Momentum Framework, not one-off screens. Defined states, defined tokens, defined motion specs that engineering can pick up and reuse anywhere. The liquidity concept still needs its effort/value conversation with product and engineering before either version gets built.

Sit down with product and engineering on effort. Some of this is trivial (a pulsing dot is a CSS animation). Some of it is genuinely hard (a live-updating candlestick view of liquidity is a real data and infrastructure problem). We need their read on what each of these actually costs before ranking anything.

Build an effort/value matrix. Once we know the cost side, we can weigh it against expected impact and agree what gets built first. Living Pulse and the liquidity button fills are the obvious low-effort, high-visibility starting points. The candlestick view is the one that needs the most validation before committing engineering time to it.

Test properly against Hick’s Law, Miller’s Law and the rest. These principles shaped the direction, but they’re hypotheses until they’re tested on real users. Does the liquidity view actually cause hesitation once we know which concept ships? Does the ticker’s update frequency ever tip into noise? That’s usability testing, not guesswork.

Expand across the wider market universe. This case study focuses on a single football match because that’s what the brief gave us to work with, and three to four hours doesn’t stretch to mocking up politics, TV and film, or basketball markets as well. But the real test of these components is whether they hold up outside sport entirely. Smarkets isn’t only a sports platform, and neither should this system be. The next phase of this work is proving these patterns are genuinely contract-agnostic, not just football-shaped.

Why This Works

Prediction markets live in a tension: they need casual traders for scale and volume, and serious traders for liquidity and depth. Most platforms pick one and under-serve the other. Smarkets is trying to hold both.

These three components don’t force that choice. They layer information so:

• Casual traders get the essential signal: is this market alive, and where is money moving?
• Serious traders get the depth signal: exactly how much is available, and which way is it shifting?

The interface doesn’t shout. It whispers, and lets traders lean in if they want more.

That’s how you build trust in a market. Not with hype. With visibility.

None of that changes the fact that this is a starting point. The trading floor we opened with, loud, busy, visibly full of people, isn’t built by three components shipped once. It’s built by treating movement and togetherness as a standing part of how Smarkets designs everything that comes next. This case study is what that looks like on day one.