Navigating the Interface

What Is the Hub?

The Hub is your home screen in Brand Threader. It's where you select tools, view recent projects, and access settings.

Access the Hub: Click the Brand Threader logo in the top-left corner from any tool.

What you see in the Hub:

• Recent Projects: Last 10 projects across all tools
• Tool Cards: All 9 tools with descriptions
• Quick Actions: Start new project, load saved project
• Workspace Info: Your workspace name and tier (Lite/Pro)

iPhone / iPad (Safari)

1. Open app.brandthreader.com in Safari
2. Tap the Share button (square with arrow, bottom of screen)
3. Scroll down and tap "Add to Home Screen"
4. Tap "Add" to confirm

Brand Threader now appears as an app icon on your home screen. It opens in full-screen mode without Safari's address bar.

Android (Chrome)

1. Open app.brandthreader.com in Chrome
2. Tap the three-dot menu (top-right)
3. Tap "Add to Home screen" or "Install app"
4. Tap "Install" to confirm

Brand Threader installs as an app with its own icon. It opens independently from Chrome.

Desktop (Chrome / Edge)

1. Open app.brandthreader.com in Chrome or Edge
2. Click the install icon in the address bar (monitor with down arrow), or go to the browser menu and select "Install Brand Threader"
3. Click "Install" to confirm

Brand Threader opens as a standalone window without browser tabs or address bar.

Left Side: Logo & Breadcrumbs

Brand Threader Logo (Top-Left)

• Function: Return to Hub
• Always visible: Click anytime to exit current tool and go back to tool selection
• In Pitch Mode: Shows warning "Exit Pitch Mode? Unsaved progress will be lost" before returning to Hub

Breadcrumb Navigation (Next to Logo)

Shows your position in the pitch flow (only visible in Pitch Mode):

Definer → Targeter → Positioner → Strategist → Forge

• ✓ Complete: Step finished, clickable to return and edit
• ● Current: Step you're working on now
• ○ Not Started: Future steps, not clickable yet

Example during pitch:

Definer ✓ → Targeter ✓ → Positioner ● → Strategist ○ → Forge ○

You're currently working on The Positioner. Definer and Targeter are complete (clickable to edit). Strategist and Forge are locked until Positioner is complete.

Right Side: Action Icons

Icon	Function	Behaviour
? (Help)	Context-sensitive help	Opens documentation for current tool in new tab. Example: In The Spark, opens /tools/spark.html
🔊 (Sound)	Toggle sound effects	Mute/unmute UI sounds (button clicks, transitions, notifications). Setting persists across sessions.
⚙️ (Settings)	Account management	Opens Settings panel with 4 tabs: Account, Billing, Branding (Pro), Team (Pro)
👤 (Account)	User menu	Shows your email, workspace name, tier. Options: View Profile, Settings, Logout

Two Ways to Launch Tools

Method 1: From the Hub

1. Click Brand Threader logo (top-left) to return to Hub
2. Select any tool card
3. Tool opens in Free Roam mode (no cascade)

Method 2: From Top Navigation (if available)

Some tools have quick-access dropdown in top nav:

• Click "Tools" in top navigation
• Select tool from dropdown
• Tool opens in Free Roam mode

Note: Free Roam mode means each tool works independently. No data cascades between tools. Good for standalone tasks like generating social concepts or running competitive analysis without full pitch flow.

How to Exit a Pitch Flow

Option 1: Click Brand Threader Logo (Top-Left)

• Warning appears: "Exit Pitch Mode? Unsaved progress will be lost unless you save first."
• Click "Save & Exit" to save current state
• Click "Exit Without Saving" to abandon changes
• Click "Cancel" to stay in current tool

Option 2: Complete the Flow

• Progress through all 5 tools: Definer → Targeter → Positioner → Strategist → Forge
• After completing The Forge, click "Finish & Return to Hub"
• Automatically saves full pitch project

Option 3: Save and Continue Later

• Click "💾 Save" button in any tool
• Name your project (e.g., "Client Name - Round 1")
• Exit via logo
• Resume from Hub → Recent Projects → Load saved pitch

How Breadcrumbs Work in Pitch Mode

Visual States:

• ✓ Green Checkmark: Step complete, data locked, clickable to edit
• ● Blue Circle: Current step you're working on
• ○ Grey Circle: Future step, not accessible until current step complete

Clicking Completed Steps:

If you click a completed step (✓), you'll see a warning:

"Editing this step may affect downstream outputs. Continue?"

• Yes: Opens that tool for editing. Changes cascade forward to later tools.
• No: Stays in current tool

Example:

You're in The Forge (Tool 5). You realize the audience tension from The Targeter (Tool 2) needs refinement.

1. Click "Targeter ✓" in breadcrumbs
2. Warning: "Editing may affect Positioner, Strategist, Forge outputs"
3. Click "Continue"
4. Edit audience tension
5. Click "Lock & Continue" to cascade changes forward
6. Review downstream tools (Positioner, Strategist, Forge) to ensure coherence

4 Settings Tabs

1. Account Tab

• View plan details (Lite or Pro)
• Upgrade/downgrade subscription
• View usage (projects created, team members)

2. Billing Tab

• Update payment method
• View invoices (download as PDF)
• Manage billing details (address, VAT number)
• Cancel subscription (with 30-day grace period)

3. Branding Tab Pro Only

• Customize workspace accent colour
• Upload workspace logo (appears in exports)
• Preview branding changes

4. Team Tab Pro Only

• Add team members (enter email, click "Add Member")
• Remove team members
• View member list
• Lite: 1 user only
• Pro: Up to 10 team members

Context-Sensitive Documentation

The ? icon opens documentation specific to your current location:

Current Location	Help Opens
The Hub	Getting Started Guide
The Definer	/tools/definer.html
The Targeter	/tools/targeter.html
The Positioner	/tools/positioner.html
The Strategist	/tools/strategist.html
The Creative Forge	/tools/forge.html
The Spark	/tools/spark.html
The Competitor	/tools/competitor.html
The Prototyper	/tools/prototyper.html
The Estimator	/tools/estimator.html
Settings Panel	Account & Billing docs

Opens in new tab so you can read documentation while working in the tool.

Managing UI Sounds

What sounds does Brand Threader have?

• Button clicks (subtle click)
• Step completion (success chime)
• Lock & Continue (progression sound)
• Notifications (toast messages)
• Error alerts (warning sound)

Toggle sound:

• Click 🔊 icon in top-right
• Icon changes to 🔇 (muted)
• Setting persists across sessions (saved to browser localStorage)

Recommendation: Keep sound on for first few projects (helps learn tool flow). Mute once comfortable if working in shared office space.

User Account Options

Click 👤 icon to see:

• Your email address
• Your workspace name
• Your tier (Lite or Pro)

Menu options:

• View Profile: See account details, join date, usage stats
• Settings: Opens Settings panel (same as ⚙️ icon)
• Logout: Sign out of Brand Threader (saves all work automatically)

Scenario 1: "I'm in Pitch Mode but want to generate quick social concepts"

1. Click "💾 Save" to save pitch progress
2. Click Brand Threader logo (top-left)
3. Click "Save & Exit" when prompted
4. From Hub, select "The Spark"
5. Use Spark in Free Roam mode
6. Return to Hub, load saved pitch project to continue cascade

Scenario 2: "I need to edit the problem reframe from The Definer"

1. Look at breadcrumbs (top bar)
2. Click "Definer ✓" (green checkmark)
3. Warning: "Editing may affect downstream outputs"
4. Click "Continue"
5. Edit the Real Problem field
6. Click "Lock & Continue"
7. Review later tools (Targeter, Positioner, etc.) to ensure changes cascaded correctly

Scenario 3: "I want to add a team member"

1. Click ⚙️ Settings icon (top-right)
2. Go to "Team" tab
3. Enter colleague's email in "Add Member" field
4. Click "Add Member" button
5. They receive access immediately (must log in with exact email you entered)

Note: Lite tier is 1 user only. Pro tier supports up to 10 team members. Enterprise supports unlimited users.

Scenario 4: "I need help with current tool"

1. Click ? icon (top-right)
2. Documentation for current tool opens in new tab
3. Read guide while working in tool

Alternative: Use chatbot in bottom-right corner for quick questions.