Design Systems

Designing volumetric product canvases that adapt in realtime

How we prototyped a spatial interface for financial data that adapts to user intent, mixing 3D storytelling with hard analytics.

Alex Chen

Lead Product Designer

Oct 12, 20257 min read
Designing volumetric product canvases that adapt in realtime

When we set out to build a financial dashboard for a Series B fintech client, we knew traditional 2D charts wouldn't cut it. The data was complex, multi-dimensional, and needed to tell a story that users could explore intuitively.

We started with a simple hypothesis: what if financial data could live in a spatial canvas that responds to user intent? Instead of static bar charts, we prototyped volumetric visualizations that expand, contract, and reorient based on what the user is exploring.

The breakthrough came when we combined three-dimensional data representation with real-time adaptation. As users drill into specific metrics, the canvas morphs—pulling relevant context forward while maintaining spatial relationships between data points.

We built this using WebGL and React Three Fiber, creating a component library that could handle both traditional analytics and immersive exploration. The result? A 40% increase in user engagement and a 60% reduction in time-to-insight for complex queries.

The key was balancing information density with visual clarity. We used depth cues, color gradients, and subtle animations to guide attention without overwhelming users. Every interaction feels intentional, every transition smooth.

Spatial UXFigma tokensData viz