Information Architecture (IA)

The Information Architecture (IA) visualizes the hierarchical structure of pages within a service. It’s connected to the Specifications defined in the Functional Specification (FS) and helps design how users navigate through the product.

1. Understanding the Structure

IA is organized around pages, which are arranged hierarchically by depth levels (parent → child). Each page can be linked to the specifications created in the FS.

Page

A page represents a navigational unit within the product. Each page can include a name and description.

e.g., “Dashboard,” “Project Management,” “Settings”

Page Depth

Indicates the hierarchical relationship between pages.

e.g.,

• 1Depth: Home, Project, Settings

• 2Depth: Project → Member Management

• 3Depth: Project → Member Management → Invite

2. Switching Views

You can switch between two viewing modes — Expand View and Collapse View.

Expand View

Displays page names, descriptions, and connected specifications together. Useful for reviewing the structure or checking relationships between pages and features.

Collapse View

Shows only the page names, allowing you to grasp the entire hierarchy at a glance. Best when you want to quickly check page depth without additional details.

3. Adding & Editing

Editing Pages and Connecting Specification

1. Select a node and click the “＋” button on the left, right, or bottom (same or lower depth) to add a new page.

2. Click the edit (✏️) icon on the top bar to switch to edit mode, or double-click a node to edit directly.

   1. In edit mode, you can modify the page name or description.

   2. When deleting a page, note that all its subpages will also be removed.

3. Select a node and click the “Connect Specification” button to open the connection modal.

4. Choose Specifications from the FS and link it to the selected page.

5. Hover over a connected specification to see an “×” icon on the right — click it to unlink.

Setting Depth Relationships Between Pages

You can define hierarchical relationships (depth) directly by connecting pages. To move a page under another: drag the lower handle (1) of page A to the upper handle (2) of page B. This links page B as a child of page A.

4. Ask AI

1. When a page node is selected, the Ask AI button appears at the top. You can refine page names or descriptions, or ask AI to generate child pages automatically.

2. While a node is selected, open the chat to provide additional context — the AI will follow your precise instructions in that context.