Skip to content

Prototyping Log

Track what we tried, what worked, what didn't. Every failed experiment teaches something.

Prototype 0 — Interactive D3.js radial cluster (v1, discarded)

Date: 2 May 2026
Approach: D3.js radial cluster with 10 interactive features (search, hover highlight, click-to-zoom, breadcrumbs, deep links, SVG/PNG download, fullscreen, onboarding hint, node count badges, animated entrance).

What we built:

  • 3 maps: M365 Copilot (70+ nodes), M365 Licensing (90+ nodes), Azure Certs (80+ nodes)
  • Radial, horizontal tree, and waterfall layouts via adapter pattern
  • Gallery page with mini SVG previews

What worked:

  • D3.js rendering is solid — SVG output is clean
  • Adapter pattern for multi-layout is well-architected
  • Download (SVG/PNG) is useful — keep this

What didn't work:

  • Interactivity added complexity without user value (search, hover, zoom = workarounds for "map is too small")
  • Cramming 70-90 nodes into one map made everything tiny and unreadable
  • The site layout (sidebar, toolbar, navbar) stole space from the map
  • Bottom-half radial text at steep angles was hard to read
  • Mobile experience was poor with interactive SVG

Key learnings:

  1. Mind maps should be static visual content, not interactive apps
  2. Small focused maps > large comprehensive maps
  3. The map should fill the viewport, not fight with page chrome
  4. Typography and colour choices matter more than features

Decision: Pivot to static, purpose-built maps with fullscreen lightbox UX.

Prototype 1 — Static horizontal mind map ✅ SHIPPED

Date: 2 May 2026
Status: 🟢 Deployed to production

What we built:

  • Free-form horizontal layout (root center, branches L/R, children cascade outward)
  • Plus Jakarta Sans (headings) + DM Sans (labels) typography
  • Branch-colour palette — 5 distinct vibrant colours per map, no repeats
  • Root node = dark slate rounded rectangle (never same colour as branches)
  • Branch nodes = solid-fill coloured pills with white text
  • Leaf nodes = tinted pills with coloured dot + dark text
  • Tag badges = small solid-colour pills ("Most used", "New", "Popular", "Try this")
  • Dot-grid canvas background (whiteboard feel, matches Mermaid diagrams)
  • Organic Bezier curves with rounded stroke-caps
  • Branded footer: aguidetocloud.com/mind-maps + Updated May 2026
  • Fullscreen lightbox on click + close button
  • 3x resolution PNG download with white padding border
  • Gallery page with horizontal mini-SVG previews + category filters
  • OG images generated via Playwright screenshots
  • FAQPage JSON-LD for SEO

First map: Copilot in Teams — 5 branches, 15 leaf nodes, 4 tags

Key design decisions made during prototyping:

  1. No circular/radial layouts — circular is aesthetically interesting but not functional for reading. Free-form horizontal spread is instantly readable.
  2. No interactivity — search, hover, zoom, breadcrumbs all removed. Static maps are more shareable, more printable, more useful.
  3. Root colour must differ from branches — using same colour (e.g. indigo root + indigo branch) creates hierarchy confusion. Root = dark slate (#1E293B), always.
  4. Branch text = white on solid fill — not coloured text on light fill (too muted). Solid vibrant pills with white text pop.
  5. Leaf text = dark black (#1F2937) — not branch colour. Black text on tinted pill is more readable.
  6. Tags placed outside leaf pills — small solid-colour badges that add information density.
  7. Count badges removed — tested but added visual noise without user value.
  8. No Focus Mode button — mind maps have their own click-to-expand lightbox.
  9. No ecosystem section — mind maps are a standalone section, not a tool.
  10. ViewBox must account for tag width — tags extending beyond leaf pills were being clipped until bounds calculation included tag extent.

Bug caught in production:

baseof.html catch-all is sacred

When adding mind-maps to baseof.html, the {{ else }} catch-all block (which renders ALL non-tool pages) was accidentally replaced with {{ else if $isToolPage }}. This broke the ENTIRE site — blog, home, about, every section showed only nav + footer. Fix deployed within minutes. Lesson: NEVER replace the final {{ else }} in baseof.html. Always add new conditionals BEFORE it.

Future prototypes (planned)

# Focus Goal
2 Batch 1 maps 10-15 obvious candidate maps (Copilot family, Licensing, Certifications) — validate the renderer handles different data shapes
3 Gallery at scale Test gallery UX with 15+ maps — do the grid/filters still work?
4 Icon integration Test Microsoft product icons inside nodes
5 Print quality Test PNG export at poster resolution (A3/A2)
6 Mobile optimisation Dedicated mobile layout if horizontal spread proves too wide on phones