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:
288
UX-TEXT-IMPLEMENTATION-PROGRESS.md
Normal file
288
UX-TEXT-IMPLEMENTATION-PROGRESS.md
Normal 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**
|
||||||
@@ -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',
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user