Research-driven design system for infinite canvas modeling platform facing 100M-block scalability challenge
Client: Client project at Intuitive Journey · Strategic digital twin platform (Cologne, pre-seed €2.8M)
Challenge: Help CEOs visualize complex business models without drowning in visual noise
My Role: UX Strategy · Competitive Research · Interface Design
The Turning Point
Their infinite canvas needed to scale from 10 to potentially 100 million interconnected blocks representing equipment, products, and calculations.
But they faced the classic "empty canvas problem" and had no strategy for helping users navigate thousands of mathematical relationships.
My research across 9 infinite canvas platforms revealed something counterintuitive: The most successful platforms evolved from feature-rich to radically simple. Miro killed their interactive beautifications. FigJam reduced toolbars to 6 core icons. Figma deliberately avoided built-in minimaps.
The insight: Mathematical modeling tools need intelligent scaffolding that disappears as users gain competence—not permanent complexity.
Impact: What I Proposed
Template library with industry-specific starting points (Manufacturing costs, Sustainability tracking) addressing the empty canvas problem
Context-aware minimap using semantic color coding (financial=blue, environmental=green, social=orange) with focus-mode highlighting and error visualization
Semantic zoom with three cognitive levels: strategic (KPIs + process groups) → tactical (mathematical relationships) → operational (full details)
Hierarchical grouping with collapsible containers and automatic suggestions based on block proximity
Expected Impact
25-40% reduction in navigation time (based on Lucidchart's Project Blackbird achieving 1000x performance gains through spatial indexing)
35-50% faster model creation from templates (Miro's template-based onboarding research shows 40% completion rate improvement)
15-25% error reduction from compatibility validation (n8n's visual connection feedback patterns)
The Problem: Scaling Mathematical Intuition
Issue #1: Blank Canvas Paralysis
New users faced infinite white space with no guidance.
Expected cost: 40-60% abandonment (Miro onboarding research)
Issue #2: Navigation Breakdown at Scale
Platform showed 30+ blocks with dotted-line connections. No way to distinguish financial flows from environmental impacts. No minimap, no grouping, no zoom strategy.
Expected cost: Exponential search time as model complexity grows (Fitts's Law)
Issue #3: Mathematical Compatibility Blindness
Users could attempt invalid connections (connecting currency to percentages). System provided no feedback until after the error.
Expected cost: 15-30% time waste on trial-and-error (Nielsen's usability heuristic: error prevention > error recovery)
The Solution
Onboarding: Wizard
A structured workflows that walk users through building complete models for common business scenarios. A "Wizard model builder" might guide users through identifying all components, defining attributes, setting up calculation relationships, and validating results. Each step should explain not just what to do, but why it matters for business decision-making.
These guided flows should be dismissible for expert users but available as learning aids that help newcomers understand the platform's capabilities.
Onboarding: Template Library + Progressive Suggestions
Template launcher (left side): 6-8 industry templates (Manufacturing, Sustainability, Revenue Modeling) with:
- Animated 300×200px previews
- Completion time estimates
- Complexity ratings
- Pre-connected blocks with placeholder values
Progressive suggestions (right side): Context-aware recommendations when adding blocks near existing entities (inspired by n8n v1.70.0 AI-powered suggestions)
Why this works: Addresses Miro's core insight—role-based complexity decreases completion. Instead: domain-based scaffolding that teaches through doing.
Navigation: Context-Aware Minimap
Design decisions:
200×150px viewport in bottom-right corner with semantic business logic:
- Equipment (blue) / Products (green) / Calculations (orange)
- Focus mode highlighting connected calculation chains
- Legend showing active filters
Why this works: Combines Miro's semantic color approach with n8n's connection intelligence. Users scan for business logic patterns, not just spatial location.
Intelligent Hierarchical Grouping
Automatic grouping suggestions: When users create multiple related blocks (Energy cost calculator + Material cost calculator + Labor cost calculator), system offers to group them into "Aluminium production cost analysis"
Collapsed state intelligence (left side):
- Shows summary formula (Energy Cost + Material Cost + Labor Cost = Total Unit Cost)
- Displays key metric prominently ($1.23/unit)
- Descriptive subtitle explaining calculation purpose
- Maintains input/output connection points for other groups
Expanded state detail (right side):
- Reveals all individual calculator blocks
- Shows internal connections between components
- Allows editing individual attributes
- Preserves spatial relationships
Why this works: Mathematical models inherently form hierarchies: aluminum production costs feed into profitability analysis, which affects strategic decisions. Collapsible groups let users navigate at the conceptual level (cost analysis → quality impact → profitability) while preserving the ability to drill into calculation details.
Visualization: Semantic Zoom
Three cognitive levels:
Tactical (1,000ft): Mathematical relationships visible, attributes summarized
Operational (ground): Full attribute detail, all connections
Why this works: Adapts Figma's frame hierarchy to mathematical modeling. Users think at different altitudes depending on decision type (CEO strategy vs. analyst validation).
How I Approached It
1. Systematic Competitive Research
Analyzed 9 platforms across 3 categories:
Infinite canvas tools: Miro, Figma, FigJam, Lucidchart, Whimsical
Mathematical/workflow tools: n8n, Waylay
Journey mapping: TheyDo
[INSERT: Research synthesis board showing patterns]
Key finding: Successful platforms share navigation DNA—minimaps with semantic color, spatial indexing, progressive disclosure—but each adapted for their domain's cognitive demands.
2. Pattern Mining
Navigation: Miro's minimap uses 25% device RAM threshold. Figma deliberately avoided minimaps, using search instead. Lucidchart achieved 1000x gains through rbush spatial indexing.
Onboarding: Miro's "robo-collaboration" breakthrough—replacing interactive wizards with human video + AI guidance. FigJam reduced toolbars from 20+ to 6 icons.
Smart interactions: n8n's contextual "Add node" buttons. Miro's blue dot connection indicators. TheyDo's hierarchical journey framework (L0-L3).
3. Domain Translation
Unlike Figma (design artifacts) or Miro (brainstorming), Circonomit handles mathematical relationships with business consequences. Wrong connections = incorrect strategic decisions.
This required adapting patterns with domain-specific intelligence:
- Color coding tied to business logic (equipment/products/calculations)
- Compatibility validation based on unit types (kWh/kg ≠ percentages)
- Templates grounded in accounting structures (COGS, depreciation, revenue models)
Deliverables
✓ Competitive research analysis (9 platforms, 20+ patterns)
✓ 7 detailed design specifications
✓ 2 block card component specs
✓ Figma mockups with interaction annotations
✓ 7-minute video walkthrough
Research Foundation
Miro – Onboarding evolution, robo-collaboration, semantic color
Figma – Render pipeline, hierarchical frames, deliberate simplicity
n8n – Visual connection feedback, AI node suggestions, workflow intelligence
Lucidchart – Project Blackbird performance, spatial indexing
TheyDo – Hierarchical journey framework
Nielsen Norman Group – Usability heuristics, error prevention
Baymard Institute – Form usability, progressive disclosure