Data obfuscated for a secure public portfolio
Volatility SurfaceOptions-Trading Decision UX
On a trading desk the implied-volatility surface is the terrain every option decision is read against. But the tools that render it scatter the surface, term curve, bid-ask grid, and ticket across four screens the trader must reassemble by hand. A misread slips in during that reassembly, and the trader commits or withholds capital on one strike with the wrong geometry in their head.
The constraint is that the read has to survive the trip from terrain to ticket without being rebuilt. Volatility Surface is a linked decision workspace that carries one active strike across surface, slice, grid, spread, and strategy views.
Siarhei Mardovich designed a linked decision workspace for options traders that holds one market context across surface, slice, grid, spread, and strategy views. The trader orients on the implied-volatility terrain, locks a strike to read its term structure and skew, verifies bid-ask and mark in the grid, then stages the spread as an editable package, without rebuilding the trader’s mental model between screens. The same linked decision geometry transfers to market-risk and value-at-risk monitoring, derivatives pricing and Greeks visualization, real-time market-data dashboards, and trade-surveillance review.
Hiring teams: use this as a concise case summary.
Role, approach, and outcome
Role
Principal product designer and prototype engineer. I mapped the trader mental model through expert walkthroughs, evaluated the disconnected screen flow, and designed the linked decision architecture that carries one strike across every view.
Approach
Design process: spatial orientation first, precision second. The surface gives bearings; the slice locks the skew; the grid verifies exact values; the spread and strategy views stage the move. Each transition preserves the active context.
Outcome
A trader can move from terrain to staged ticket in one continuous UX flow. The design claim is continuity: each view hands the same market context to the next, so the trade argument survives the move from analysis to action.
From Orientation 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 in the skew, and point to a specific strike before drilling into the precision views.
The surface gives the trader bearings across strikes and expiries, so tension in the skew appears first as shape rather than as a disconnected table of values.
The desk cuts one strike through the terrain and turns that point of interest into a 2D term-structure view that exposes the skew precisely.
The grid anchors the visual signal in exact values, bid-ask relationships, mark, and spread conditions so the move is not driven by impression alone.
Spread and strategy views carry the same strike forward into an editable package the desk can review, adjust, and prepare for execution.
The misread is rarely a wrong number. It is a dropped thread: the trader sees a shape, switches screens to check it, and returns with a slightly different argument than the one they left. Continuity is the design defense against that: keep the surface, strike, skew, spread, and strategy in the same working context.
Workspace in Frames
Each static frame is a real view from the prototype. Together they show how the same strike context moves from spatial orientation to staged action.
The 5 Dials Behind the Surface
Before the live workspace, here is the engine behind it. The Heston model has 5 parameters, and they are not abstract: they are the dials that reshape the implied volatility surface a trader reads. Turn a dial and both the 3D surface and its slice reshape in real time.
Heston dials reshaping a volatility surface
Deeper theory: how the math shapes the UI
Why volatility snaps back
Volatility behaves like a rubber band. A shock stretches it, then mean reversion pulls it back toward a resting level. Reading that is how a trader tells a passing shock from a new regime.
Skew as the price of protection
When a crash starts to feel likely, traders buy downside puts the way people buy house insurance after a hurricane warning. That demand lifts the implied volatility of low-strike options and tilts the smile into a one-sided skew.
Why the surface must be arbitrage-free
A volatility surface is not just a picture. If the prices it implies are not internally consistent, a competitor can buy a dollar for less than a dollar. Enforcing an arbitrage-free shape is the safety net that protects the desk’s capital.
Interactive Prototype
The rebuilt prototype intentionally keeps the guided tour as the declarative layer. The interface itself stays restrained. The explanation lives in the walk-through, while the screens stay focused on market states, linked context, and the move from one analytical layer to the next.
Options volatility workspace
The Trader’s Mental Model
A trader does not read a volatility surface the way a report reads it. They hold a running picture of the market in their head: where the skew is tense, which strike is rich or cheap against its neighbors, how today’s shape differs from yesterday’s. The decision is a test of a move against that picture, not a lookup in a table.
That mental model is fragile under tool-switching. Every time a trader leaves one screen to find a number on another, working memory has to hold the argument open, and that is exactly where a misread slips in. I designed this workspace to carry the trader’s model forward rather than make them rebuild it: each view answers one cognitive move, then hands the same market context to the next.
The same design problem appears in climate models and staffing probabilities: a high-dimensional signal has to become a decision a human can own. The UX work is to expose the mechanism, keep uncertainty visible, and make the resulting action defensible.
Default Chart vs Linked Workspace
The same data, two ways to read it. A default line chart shows implied volatility in isolation. The workspace keeps the strike, bid-ask band, and expiry grid in one view so the read is grounded in context.
One line. No strike context, no bid-ask band, no expiry grid.
Locked strike, bid-ask band, and expiry grid keep the read tied to exact values.
Disconnected Screens vs Linked Decision Geometry
The same trade idea, 2 ways. The difference is not the accuracy of any single chart. It is whether the read survives the trip from terrain to staged ticket.
Disconnected screens
- Heatmap, term curve, grid, and strategy panel each live in a separate view
- The trader reassembles the market argument between screens
- A strong visual impression can outrun the exact bid-ask and mark
- The read does not survive the trip from chart to ticket
Linked decision geometry
- One market context travels across surface, slice, grid, spread, and strategy
- The same active strike is carried forward, never rebuilt from scratch
- Surface, slice, and grid must agree before the move is staged
- The staged spread carries its own evidence into execution
Where This Transfers
The case is options volatility, but the transferable asset is linked decision geometry. Any trading or risk team that moves from high-dimensional market data to a staged, defensible action has the same design problem: many views, one context, one accountable move.
Options volatility decision support
Linked decision geometry
one context, many views, a staged and defensible action
- Market-risk and value-at-risk monitoring
- Derivatives pricing and Greeks visualization
- Real-time market-data dashboards
- Stress and scenario analysis
- Trade surveillance and execution review
Who This Workspace Serves
A solo prototype has no team to manage, but it still has an ecosystem to design for: the roles a trading-floor decision workspace must answer to.
Needs bearings before precision and a clean path from read to staged ticket.
Needs the desk on one shared market read, not 4 private interpretations.
Needs spread and stress visible before capital moves.
Needs the visual signal tied to exact values and arbitrage-free constraints.
Needs a prototype that maps cleanly to data feeds, state, and instrument identifiers.
Needs the decision path explainable after the fact.
Design Trade-offs
A senior decision is usually a trade-off made on purpose. Here are 3 I made on this build, and what each one bought.
Tradedimmediate numeric density
Forspatial orientation, because a trader needs bearings before committing capital
Tradeda denser default screen
Foran interface that stays focused on market state and linked context
Tradedmulti-strike comparison
Forcontinuity, because the real risk is losing the market argument between views
I rejected a side-by-side multi-strike comparison table. Power-user feature, but it would have split the single shared market context that is the whole point of the workspace.
Technical Details
The case page is static, crawlable HTML and CSS in the siarheimardovich.com design system. The interactive figures use inline SVG and D3.js. The main options workspace is a single-file Three.js/WebGL prototype, embedded by iframe with a descriptive title and lazy loading.
Single-file HTML prototype with no backend, auth, or API dependency. Three.js/WebGL surface, linked slice plane, and hover inspection.
Heston-inspired implied-volatility surface across strikes and expiries. The slice exposes term structure and skew at the chosen strike.
Expiry grid anchors exact values, bid-ask, and mark. Spread and strategy views carry the same active strike into an editable package.
Five D3.js interactives that map model parameters to the surface shape: mean reversion, skew, arbitrage, Heston dials, and calibration stability.
ARIA labels on figures and iframe, keyboard-operable controls, prefers-reduced-motion honored, color not the only information channel.
Designed as an iframe-ready showcase for GeneratePress and WordPress. Obfuscated exchange and client naming for portfolio use.
The Judgment Behind the Model: Predictability Beats Perfection
The same discipline runs through every screen here. A model that fits today’s prices perfectly but jumps overnight wrecks tomorrow’s hedges. A constrained, stable model gives up almost nothing today and stays standing tomorrow. Predictability beats perfection.
Stable calibration versus overfitting
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 an action-stage interface 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 mental model behind the decision. The same thesis runs across this portfolio: expose the mechanism, keep uncertainty visible, and make the action defensible.
What I would measure: screen switches per staged trade against the desk’s current multi-tool flow; how often a staged spread is edited after grid verification, the impression-outran-the-numbers signal; and time from first surface read to staged ticket. The guided tour already walks the exact path these metrics would instrument.
My starting assumption was that the 3D surface was presentation and the grid was the real work. Expert walkthroughs broke it: traders orient spatially first, and precision without bearings is where the misread starts. The rule I carry forward: orientation is a precision instrument, not decoration.
Let’s Talk
Open to principal/staff product design roles · Greater New York City Area · siarhei.mardovich@gmail.com · LinkedIn · Resume