# IGNY8 UX Guidelines

**Last Updated:** December 25, 2025

---

## Design Principles

### 1. Concise Labels

**Navigation & Tabs:** Keep labels short (1-2 words max)
- ✅ Good: `Queue`, `Drafts`, `Images`, `Review`, `Published`
- ❌ Bad: `Ready to Write`, `Finished Drafts`, `Review Before Publishing`

**Section Headers:** Use simple, consistent terminology
- ✅ Good: `SETUP`, `WORKFLOW`, `ACCOUNT`, `SETTINGS`
- ❌ Bad: `GET STARTED`, `CREATE CONTENT`, `MANAGE ACCOUNT`, `CONFIGURATION`

### 2. Consistent Terminology

Use the same term throughout the system:

| Concept | Correct Term | Avoid |
|---------|--------------|-------|
| Content measurement | "Content pieces" | "Credits" |
| Sidebar modules | Module name only | Verbose descriptions |
| Page titles | Match tab name | Flowery language |

### 3. Page Titles

Page titles should be:
- Short and descriptive
- Match the sidebar navigation
- Consistent with tab labels

```
Dashboard (not "Your Content Creation Dashboard")
Keywords (not "Your Keywords")
Drafts (not "Your Articles" or "Finished Drafts")
```

### 4. Descriptions & Helper Text

- Keep descriptions **short** (under 10 words)
- Put longer explanations in tooltips or Help pages
- Dashboard cards: 3-5 word descriptions maximum

```tsx
// ✅ Good
<ComponentCard title="Workflow Progress" desc="Track your content pipeline">

// ❌ Bad
<ComponentCard title="Your Content Journey" desc="Track your content creation progress from ideas to published articles">
```

### 5. Workflow Pipeline Labels

For pipeline stages, use arrow notation:
- ✅ `Keywords → Clusters`
- ❌ `Organize Keywords`

---

## Navigation Structure

### Sidebar Sections

```
Dashboard (standalone)

SETUP
├── Add Keywords
├── Sites
└── Thinker

WORKFLOW
├── Planner
├── Writer
├── Automation
├── Linker
└── Optimizer

ACCOUNT
├── Account Settings
├── Team
├── Plans & Billing
└── Usage

SETTINGS
├── Profile
├── AI Models
├── Publishing
└── Import / Export

HELP
└── Help & Docs
```

### Module Tab Labels

**Planner:** `Keywords` | `Clusters` | `Ideas`

**Writer:** `Queue` | `Drafts` | `Images` | `Review` | `Published`

**Thinker:** `Prompts` | `Author Profiles` | `Strategies` | `Image Testing`

---

## When to Add Explanatory Text

### DO add explanations for:
- Help & Documentation pages
- First-time user onboarding flows
- Error messages and empty states
- Tooltips on hover

### DON'T add explanations to:
- Navigation labels
- Tab labels
- Page headers
- Card descriptions on dashboards

---

## User-Facing Terminology

### Content & Pricing

| Internal (Backend) | User-Facing (Frontend) |
|-------------------|------------------------|
| `credits` | "content pieces" |
| `credits_remaining` | "X remaining" |
| `plan_credits_per_month` | "monthly allowance" |
| Purchase Credits | Upgrade Plan |
| Credit Balance | Content Usage |

### Actions

| Internal/Old | User-Facing |
|--------------|-------------|
| Generate | Create |
| Execute | Run |
| Configure | Set up |
| Insufficient credits | Content limit reached |

---

## Change History

| Date | Change |
|------|--------|
| Dec 25, 2025 | Reverted verbose navigation labels to concise terms |
| Dec 25, 2025 | Fixed Dashboard progress item descriptions |
| Dec 25, 2025 | Fixed Writer module tabs (Queue, Drafts, etc.) |
| Dec 25, 2025 | Fixed Planner module tabs (Keywords, Clusters, Ideas) |
| Dec 25, 2025 | Restored original Automation pipeline stage names |