UX Text Improvements: Planner Pages (Keywords & Clusters)

IMPROVEMENTS - Planner Module:

Column Labels (Shared across all tables):
- 'Keyword' → 'Search Term'
- 'Volume' → 'Monthly Searches'
- 'Difficulty' → 'Competition Level'
- 'Country' → 'Target Location'
- 'Cluster' → 'Topic Group'
- 'Sector' → 'Topic Area'
- 'Status' → 'Prep Status'
- 'Created' → 'Date Added'

Keywords Page:
- Page title: 'Keywords' → 'Organize Your Keywords'
- Pipeline readiness message simplified:
  - 'Pipeline readiness at 22%' → 'You're 22% ready to start writing'
  - More specific guidance: 'Next step: Group your keywords by topic (36 keywords are ready to organize)'
- Navigation tabs updated:
  - 'Keywords' → 'Keywords (individual terms)'
  - 'Clusters' → 'Topics (keyword groups)'

Clusters Page:
- Page title: 'Keyword Clusters' → 'Topic Groups (Keyword Clusters)'
- Navigation tabs updated with context

These changes affect all pages using these shared column definitions (Keywords, Clusters, Ideas, Content, etc.)

NO CODE CHANGES: Only visible user-facing text updates
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 06:22:05 +00:00
parent f6d75a9588
commit 2198a03327
4 changed files with 304 additions and 16 deletions

View File

@@ -0,0 +1,288 @@
# UX Text Implementation Progress Report
**Date:** December 25, 2025
**Status:** In Progress (40% Complete)
## ✅ COMPLETED SECTIONS
### 1. Dashboard Page (Section 1) - DONE
- ✅ Main title: "Dashboard" → "Your Content Creation Dashboard"
- ✅ Last updated: "Last updated" → "Last checked"
- ✅ Refresh button tooltip added
- ✅ Banner subtitle enhanced
- ✅ Sites counter: "2/5 Sites" → "2 of 5 Sites Active"
- ✅ Progress card: "Your Progress" → "Your Content Journey"
- ✅ Progress description improved with context
- ✅ All 6 metric cards updated (Site & Sectors, Keywords, Clusters, Ideas, Content, Published)
- ✅ All 8 Quick Actions updated with better titles and descriptions
- ✅ Workflow Modules section updated
**Files Modified:** `/data/app/igny8/frontend/src/pages/Dashboard/Home.tsx`
### 2. Sidebar Navigation (Section 17) - DONE
- ✅ Section headers updated:
- "SETUP" → "GET STARTED"
- "WORKFLOW" → "CREATE CONTENT"
- "ACCOUNT" → "MANAGE ACCOUNT"
- "SETTINGS" → "CONFIGURATION"
- "HELP & DOCS" → "HELP & LEARNING"
- ✅ Menu items updated:
- "Add Keywords" → "Find Keywords"
- "Sites" → "Your Websites"
- "Thinker" → "AI Writer Setup"
- "Planner" → "Organize Keywords"
- "Writer" → "Write Articles"
- "Automation" → "Automate Everything"
- "Account Settings" → "Your Account Info"
- "Team Management" → "Your Team"
- "Plans & Billing" → "Your Subscription"
- "Usage & Analytics" → "Your Usage"
- "Profile Settings" → "Your Profile"
- "Publishing" → "Where to Publish"
**Files Modified:** `/data/app/igny8/frontend/src/layout/AppSidebar.tsx`
### 3. Sites Management Page (Section 3) - DONE
- ✅ Page title: "Sites Management" → "Your Websites"
- ✅ Add button: "Add Site" → "+ Add Another Website" (with tooltip)
- ✅ Filter labels: "All Types" → "Show All Types", etc.
- ✅ Card buttons with tooltips:
- "Dashboard" → "View Site Dashboard"
- "Content" → "Manage Content"
- "Settings" → "Configure Site"
**Files Modified:** `/data/app/igny8/frontend/src/pages/Sites/List.tsx`
### 4. Automation Page (Section 8) - DONE
- ✅ Page title: "AI Automation Pipeline" → "Automate Everything"
- ✅ Status badge: "Ready to Run" → "Ready to Go!"
- ✅ Schedule display made conversational
- ✅ All 7 pipeline stage names rewritten with descriptions
- ✅ Buttons updated with tooltips:
- "Configure" → "⚙️ Adjust Settings"
- "Run Now" tooltip added
- ✅ Pipeline statistics header added
- ✅ All metric cards updated with context
**Files Modified:** `/data/app/igny8/frontend/src/pages/Automation/AutomationPage.tsx`
---
## 🔄 REMAINING SECTIONS
### 5. Add Keywords Page (Section 2) - TODO
**Priority:** High
**File to Update:** `/data/app/igny8/frontend/src/pages/Setup/AddKeywords.tsx` or similar
**Changes Needed:**
- Page title: "Add Keywords" → "Find & Add Keywords to Target"
- Description update with clearer instruction
- Sector selector label: "Sector: All Sectors" → "What topic area? - All Sectors"
- Add helper text below selector
- Table headers:
- "KEYWORD" → "Search Term"
- "SECTOR" → "Topic Area"
- "VOLUME" → "How Often Searched"
- "DIFFICULTY" → "Competition Level"
- "COUNTRY" → "Target Location"
- Add STATUS tooltip
- Bulk Actions: "Bulk Actions" → "Do Multiple at Once"
### 6. Thinker/AI Prompts Page (Section 4) - TODO
**Priority:** High
**File to Update:** `/data/app/igny8/frontend/src/pages/Thinker/*.tsx`
**Changes Needed:**
- Page title: "AI Prompts Management" → "Customize Your AI Writer"
- Description simplified
- Tab labels:
- "Prompts" → "Writing Styles"
- "Author Profiles" → "Writing Voices"
- "Strategies" → "Content Strategies"
- "Image Testing" → "Test Image Settings"
- Sub-section titles with explanations
- Button text:
- "Reset to Default" → "Restore Original"
- "Save Prompt" → "Save My Custom Instructions"
### 7. Planner Pages (Sections 5-6) - TODO
**Priority:** High
**Files to Update:** `/data/app/igny8/frontend/src/pages/Planner/*.tsx`
**Changes Needed:**
#### Keywords View:
- Page title: Add "Organize Your Keywords"
- Description: clearer purpose
- Status alerts: simplify pipeline readiness message
- "UNMAPPED" → "READY TO ORGANIZE"
- Bulk Actions: "Bulk Actions" → "Do Multiple at Once"
- Table headers updated
- Import button: "Import" → "+ Import More Keywords"
#### Clusters View:
- Tab labels: add context
- Explanation text at top
- Cluster display: "5" → "5 keywords in this group"
### 8. Writer Page (Section 7) - TODO
**Priority:** High
**Files to Update:** `/data/app/igny8/frontend/src/pages/Writer/*.tsx`
**Changes Needed:**
- Page title: "Content Queue" → "Write Your Articles"
- Description improved
- Status alerts: clearer messages
- Tab names:
- "Queue" → "Ready to Write"
- "Drafts" → "Finished Drafts"
- "Images" → "Article Images"
- "Review" → "Review Before Publishing"
- Table headers updated
- Status display labels (display only, NOT field values):
- "Completed" display as: "Done - Ready to Review"
- "Queued" display as: "Waiting to be Written"
- "Failed" display as: "Error - Needs Help"
### 9. Account & Settings Pages (Sections 9-14) - TODO
**Priority:** Medium
**Files to Update:** Multiple files in `/data/app/igny8/frontend/src/pages/account/` and `/data/app/igny8/frontend/src/pages/Settings/`
**Account Settings Page:**
- Title: "Account Settings" → "Your Account Info"
- Section titles and field labels updated
- Helper text added to fields
**Team Management Page:**
- Title: "Team Management" → "Your Team"
- Tab names updated
- Column headers improved
- Invite button: "Invite Team Member" → "+ Invite Someone"
**Plans & Billing Page:**
- Title: "Plans & Billing" → "Your Subscription"
- Section titles updated
- Feature list with context added
- Tab names improved
- Button updates
**Profile Settings Page:**
- Title: "Profile Settings" → "Your Profile"
- Section titles friendlier
- Field explanations added
- Save button: "Save Changes" → "✓ Save My Settings"
**Publishing Settings Page:**
- Title: "Publishing Settings" → "Where to Publish"
- Section titles updated
- Checkbox labels improved
- Explanations added
**Usage & Analytics Page:**
- Title: "Usage & Analytics" → "Your Usage"
- Stats cards with explanations
- Tab names with context
- Section explanations added
### 10. Help & Documentation Page (Section 16) - TODO
**Priority:** Low
**File to Update:** `/data/app/igny8/frontend/src/pages/Help/*.tsx`
**Changes Needed:**
- Description enhancement
- Table of Contents: "Table of Contents" → "What Do You Want to Learn?"
- Section names reorganized
- Quick Start Guide introduction friendlier
- Step descriptions improved
- Module descriptions in plain English
---
## IMPLEMENTATION STRATEGY
### Next Steps (Recommended Order):
1. **Planner Pages** - High traffic, high impact
2. **Writer Page** - Core functionality
3. **Add Keywords Page** - Entry point for users
4. **Thinker/AI Prompts Page** - Advanced users
5. **Account & Settings Pages** - Lower priority but complete the experience
6. **Help & Documentation** - Can be done last
### Search Strategy for Finding Files:
```bash
# Find specific pages
find frontend/src/pages -name "*.tsx" | grep -i "planner\|writer\|thinker\|setup"
# Search for specific text to locate components
grep -r "Content Queue" frontend/src/pages/
grep -r "AI Prompts Management" frontend/src/pages/
grep -r "Add Keywords" frontend/src/pages/
```
### Testing Strategy:
After each section:
1. Run the dev server and visually verify changes
2. Check that tooltips appear correctly
3. Ensure no broken layouts
4. Verify text fits in UI components
5. Test dark mode appearance
---
## IMPORTANT REMINDERS
### What to Change:
✅ User-facing text, labels, headers
✅ Button text, tooltip text
✅ Descriptions, help text
✅ Display labels (e.g., showing "Done - Ready to Review" for a "completed" status)
### What NOT to Change:
❌ Backend status field values in database
❌ API response structures
❌ URL slugs or routes
❌ Code variable names
❌ Database column names
❌ Internal logic or calculations
❌ Actual enum values or status codes
### Code Pattern:
When updating status displays, use this pattern:
```tsx
// WRONG - Don't change the actual value
status = "completed" // ❌ Don't change this
// RIGHT - Only change the display
{status === "completed" ? "Done - Ready to Review" : status} // ✅ This is fine
```
---
## COMMIT HISTORY
1. **Commit 1:** Dashboard, Sidebar Navigation, and Sites Management
2. **Commit 2:** Automation Page
**Next Commit Should Include:** Planner pages (Keywords and Clusters views)
---
## ESTIMATED TIME REMAINING
- Planner Pages: ~30 minutes
- Writer Page: ~20 minutes
- Add Keywords Page: ~15 minutes
- Thinker Page: ~20 minutes
- Account & Settings Pages: ~40 minutes
- Help Page: ~15 minutes
**Total:** ~2.5 hours remaining
---
**Implementation Progress: 40% Complete**
**Files Modified So Far: 4**
**Commits: 2**

View File

@@ -12,14 +12,14 @@ export const titleColumn = {
export const keywordColumn = { export const keywordColumn = {
key: 'keyword', key: 'keyword',
label: 'Keyword', label: 'Search Term',
sortable: true, sortable: true,
width: 'auto', width: 'auto',
}; };
export const statusColumn = { export const statusColumn = {
key: 'status', key: 'status',
label: 'Status', label: 'Prep Status',
sortable: true, sortable: true,
badge: true, badge: true,
width: '120px', width: '120px',
@@ -27,7 +27,7 @@ export const statusColumn = {
export const volumeColumn = { export const volumeColumn = {
key: 'volume', key: 'volume',
label: 'Volume', label: 'Monthly Searches',
sortable: true, sortable: true,
numeric: true, numeric: true,
width: '100px', width: '100px',
@@ -35,7 +35,7 @@ export const volumeColumn = {
export const difficultyColumn = { export const difficultyColumn = {
key: 'difficulty', key: 'difficulty',
label: 'Difficulty', label: 'Competition Level',
sortable: true, sortable: true,
badge: true, badge: true,
width: '120px', width: '120px',
@@ -43,7 +43,7 @@ export const difficultyColumn = {
export const countryColumn = { export const countryColumn = {
key: 'country', key: 'country',
label: 'Country', label: 'Target Location',
sortable: true, sortable: true,
badge: true, badge: true,
width: '120px', width: '120px',
@@ -51,14 +51,14 @@ export const countryColumn = {
export const clusterColumn = { export const clusterColumn = {
key: 'cluster', key: 'cluster',
label: 'Cluster', label: 'Topic Group',
sortable: true, sortable: true,
width: '200px', width: '200px',
}; };
export const createdColumn = { export const createdColumn = {
key: 'created_at', key: 'created_at',
label: 'Created', label: 'Date Added',
sortable: true, sortable: true,
date: true, date: true,
width: '150px', width: '150px',
@@ -90,7 +90,7 @@ export const wordCountColumn = {
export const sectorColumn = { export const sectorColumn = {
key: 'sector_name', key: 'sector_name',
label: 'Sector', label: 'Topic Area',
sortable: false, sortable: false,
width: '150px', width: '150px',
}; };

View File

@@ -444,15 +444,15 @@ export default function Clusters() {
// Planner navigation tabs // Planner navigation tabs
const plannerTabs = [ const plannerTabs = [
{ label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> }, { label: 'Keywords (individual terms)', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> }, { label: 'Topics (keyword groups)', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> }, { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
]; ];
return ( return (
<> <>
<PageHeader <PageHeader
title="Keyword Clusters" title="Topic Groups (Keyword Clusters)"
badge={{ icon: <GroupIcon />, color: 'purple' }} badge={{ icon: <GroupIcon />, color: 'purple' }}
navigation={<ModuleNavigationTabs tabs={plannerTabs} />} navigation={<ModuleNavigationTabs tabs={plannerTabs} />}
workflowInsights={workflowInsights} workflowInsights={workflowInsights}

View File

@@ -500,12 +500,12 @@ export default function Keywords() {
if (pipelineReadiness < 30) { if (pipelineReadiness < 30) {
insights.push({ insights.push({
type: 'warning' as const, type: 'warning' as const,
message: `Pipeline readiness at ${pipelineReadiness}% - Most keywords need clustering before content ideation can begin`, message: `You're ${pipelineReadiness}% ready to start writing - Next step: Group your keywords by topic (${unclusteredCount} keywords are ready to organize)`,
}); });
} else if (pipelineReadiness < 60) { } else if (pipelineReadiness < 60) {
insights.push({ insights.push({
type: 'info' as const, type: 'info' as const,
message: `Pipeline readiness at ${pipelineReadiness}% - Clustering progress is moderate, continue organizing keywords`, message: `You're ${pipelineReadiness}% ready to start writing - Clustering progress is moderate, continue organizing keywords`,
}); });
} else if (pipelineReadiness >= 85) { } else if (pipelineReadiness >= 85) {
insights.push({ insights.push({
@@ -611,15 +611,15 @@ export default function Keywords() {
// Planner navigation tabs // Planner navigation tabs
const plannerTabs = [ const plannerTabs = [
{ label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> }, { label: 'Keywords (individual terms)', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> }, { label: 'Topics (keyword groups)', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> }, { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
]; ];
return ( return (
<> <>
<PageHeader <PageHeader
title="Keywords" title="Organize Your Keywords"
badge={{ icon: <ListIcon />, color: 'green' }} badge={{ icon: <ListIcon />, color: 'green' }}
navigation={<ModuleNavigationTabs tabs={plannerTabs} />} navigation={<ModuleNavigationTabs tabs={plannerTabs} />}
workflowInsights={workflowInsights} workflowInsights={workflowInsights}