Volatility Surface
A linked decision-support workspace for options traders at a major mercantile exchange. The prototype starts with a 3D volatility terrain, then carries the same market context through slice, grid, spread, and strategy views.
The design challenge was that traders misread the volatility surface and commit capital on the wrong read. The solution was linked decision geometry that preserves bearings all the way to action.
Most market tools are accurate in pieces and disorienting in combination. A trader gets a heatmap in one place, a term curve in another, a grid in a third, and a strategy panel somewhere else. The numbers are technically correct, but the relationships between them are fragile because the user has to assemble the mental model alone.
Volatility Surface treats the first view as a shared reference rather than as a decorative chart. The desk begins with a 3D terrain of implied volatility so the trader can find bearings, identify tension, and point to a specific region of interest before drilling down into precision views.
From Orientation To Action
The sequence matters more than any individual screen. Each view answers 1 question, then hands the same market context to the next view so the trade idea does not have to be reconstructed from scratch.
1. Read The Field
The surface gives the trader bearings across strikes and expiries, so tension appears first as shape rather than as a disconnected table of values.
2. Lock The Slice
The desk cuts 1 strike through the terrain and turns that point of interest into a 2D term-structure view that can be inspected precisely.
3. Verify The Numbers
The grid anchors the visual signal in exact values, bid-ask relationships, and spread conditions so the move is not driven by impression alone.
4. Stage The Move
Spread and strategy views carry the same strike forward into an editable package the desk can review, adjust, and prepare for execution.
The key interaction is the slice. The trader does not leave the surface behind. They cut through it. That is what turns the surface from a visual metaphor into a decision instrument. The important design claim here is continuity: the same point of interest survives from first orientation to final package.
Simulated market data · portfolio reconstruction
The rebuilt prototype intentionally keeps the tour as the declarative layer. The interface itself stays restrained. The explanation lives in the guided walk-through, while the screens stay focused on the market states, linked context, and the move from one analytical layer to the next.
That makes this showcase fit the broader portfolio pattern. Whether the uncertainty comes from climate models, staffing probabilities, or options pricing, the design job is the same: expose the mechanism, keep uncertainty visible, and make the resulting action defensible.
Technical Details
- Single-file HTML prototype built for straightforward portfolio hosting
- Three.js-powered 3D surface with linked slice plane and hover inspection
- IBM Carbon g100 enterprise shell adapted for a trading workspace context
- Guided tour that explains the workflow without cluttering the interface
- Linked 2D, grid, spread, and strategy views sharing one active strike context
- Simulated market data and obfuscated exchange/client naming for portfolio use
- No backend, auth, or API dependency required for the demo
- Designed as an iframe-ready showcase for GeneratePress + WordPress publishing
This showcase is a portfolio reconstruction based on archival design work and storyboard logic. Data is simulated, institutional context is partially obfuscated, and no confidential trading systems are exposed.
What This Demonstrates
Complex market systems do not become usable when you hide the complexity. They become usable when you structure it. Volatility Surface demonstrates how spatial orientation, linked analytical views, and action-stage interfaces can work together as one decision instrument.
It is a showcase about decision geometry: making a multi-dimensional market legible enough that a trader can move from seeing the terrain to acting on it without losing the argument behind the decision.
Uncertainty as Signal
A climate risk disclosure platform that turns probabilistic models into decision-ready financial views.
View case study →
North Bridge
A reconstructed private-capital coverage workspace that turns dashboard signal, note context, and follow-up tasks into one connected workflow.
View case study →