For Designers · Information architecture

Information architecture on a whiteboard — every node captured before the site map moves into Figma.

IA sessions on whiteboards produce clearer hierarchy decisions than any card sorting tool. BoardSnap captures the full structure — nodes, relationships, navigation paths — in a document you can share with developers and stakeholders.

Download on the App Store Free to start. Pro from $9.99/mo or $69.99/yr.

Why designers love this workflow

Information architecture is best worked out on a whiteboard: you can draw the whole hierarchy at once, move nodes around without worrying about layout, and see the navigation paths in context of the full structure. The problem is that whiteboard IA disappears — you need to recreate it digitally before you can share it or build from it.

BoardSnap reads the whiteboard IA and produces a structured document. Snap the site map or content hierarchy and get a node-by-node description: each section, its sub-sections, and the navigation relationships between them. That document is the source of truth for your Figma site map and your developer handoff.

The exact flow

  1. Draw the top-level hierarchy first

    Start with the main navigation sections across the top of the board. These are the root nodes of your IA. Label each one clearly.

  2. Add sub-sections under each node

    Draw sub-section branches below each top-level node. Use connecting lines, not just visual proximity — the line is what BoardSnap reads as the parent-child relationship.

  3. Mark cross-links and shared nodes

    Some content lives in multiple sections. Draw cross-links with dashed lines and label them 'also in X.' BoardSnap reads these as shared or cross-linked nodes.

  4. Note page types and templates

    Next to each node, write the page type: list, detail, form, landing, article. This is the design specification that maps IA nodes to design templates.

  5. Snap and build the IA document

    The BoardSnap summary is a written IA: top-level sections, sub-sections, cross-links, and page type annotations. Ready to paste into your design brief.

What you'll get out of it

  • Full IA hierarchy captured in a structured document — not just a photo to recreate manually
  • Parent-child relationships preserved from connected lines on the board
  • Cross-links and shared nodes documented explicitly
  • Page type annotations captured alongside the IA structure
  • Developer-ready IA document without a manual transcription step

Frequently asked

Can BoardSnap read a complex IA with four or more hierarchy levels?

Yes, with clear visual indentation or consistent branching. Four levels is the practical limit for clarity on a single whiteboard — deeper hierarchies work better across multiple boards.

What's the difference between using BoardSnap for a site map vs. a user flow?

Site maps show hierarchy — what content exists and how it's organized. User flows show sequence — what steps a user takes. BoardSnap reads both, but the summary structure differs: hierarchy for site maps, sequence for user flows.

Can I use the BoardSnap IA summary to generate a Figma site map automatically?

Not automatically, but the structured summary maps directly to a Figma site map component — copy the hierarchy and paste each level into your site map frame. The thinking is done.

Designers: try this on your next information architecture.

Three taps. Action items in your hand before the room clears.

Free · 1 project, 30 boards Pro $9.99/mo · everything unlimited Pro $69.99/yr · save 42%
BoardSnap Free on the App Store Get