Covers nav reorganization (17→9 items), unified Content pipeline page, campaign brief enhancement, dashboard redesign, consistency standards, and premium polish details. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
@@ -0,0 +1,271 @@
|
|||||||
|
# UX/UI Overhaul — Design Spec
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Comprehensive UX/UI improvement focused on three pillars: **consistency**, **navigation reorganization**, and **premium polish**. The biggest structural change is unifying Posts, Translations, and Artefacts into a single "Content" page with a pipeline model reflecting the real production workflow.
|
||||||
|
|
||||||
|
## 1. Navigation Reorganization
|
||||||
|
|
||||||
|
### Current State
|
||||||
|
- 4 collapsible module groups (Marketing, Projects, Finance, Issues)
|
||||||
|
- 17 clickable items, some requiring 2 clicks (expand group → click item)
|
||||||
|
- Issues is its own module group with a single item
|
||||||
|
|
||||||
|
### New Structure: Flat Nav with Dividers (9 items)
|
||||||
|
|
||||||
|
```
|
||||||
|
Dashboard
|
||||||
|
──────────────────
|
||||||
|
Campaigns
|
||||||
|
Content ← NEW (replaces Posts, Translations, Artefacts, Calendar)
|
||||||
|
──────────────────
|
||||||
|
Projects ← absorbs Tasks as a tab/view
|
||||||
|
Issues
|
||||||
|
──────────────────
|
||||||
|
Finance ← absorbs Budgets as a tab
|
||||||
|
──────────────────
|
||||||
|
Team
|
||||||
|
Settings ← absorbs Brands, Assets as tabs
|
||||||
|
```
|
||||||
|
|
||||||
|
### Rules
|
||||||
|
- No collapsible groups — every page is 1 click
|
||||||
|
- Subtle divider lines (1px, white at 6% opacity) separate conceptual groups
|
||||||
|
- Active state: existing `sidebar-active-glow` style
|
||||||
|
- Collapsed sidebar: icons only, same as current behavior
|
||||||
|
|
||||||
|
### What Moves Where
|
||||||
|
| Current Location | New Location |
|
||||||
|
|-----------------|-------------|
|
||||||
|
| Posts (page) | Content → Posts tab |
|
||||||
|
| Calendar (page) | Content → Posts tab → Calendar view toggle |
|
||||||
|
| Translations (page) | Content → Copy tab + Translations tab |
|
||||||
|
| Artefacts (page) | Content → Design tab |
|
||||||
|
| Assets (page) | Settings → Assets tab |
|
||||||
|
| Brands (page) | Settings → Brands tab |
|
||||||
|
| Tasks (page) | Projects → Tasks tab inside project detail |
|
||||||
|
| Budgets (page) | Finance → Budgets tab |
|
||||||
|
|
||||||
|
## 2. Content Page — Unified Pipeline
|
||||||
|
|
||||||
|
### Concept
|
||||||
|
The content production pipeline is: **Copy → Translate → Design → Post → Publish**. Currently these are 4 separate pages with no visible connection. The Content page unifies them under one roof with tabs.
|
||||||
|
|
||||||
|
### Tabs
|
||||||
|
|
||||||
|
| Tab | Purpose | Views Available |
|
||||||
|
|-----|---------|----------------|
|
||||||
|
| **Pipeline** | Bird's-eye view of all content items by stage | Kanban (stages as columns) |
|
||||||
|
| **Copy** | Write original copy (usually AR) | List |
|
||||||
|
| **Translations** | Translate/review/correct copy in other languages | List, grouped by language |
|
||||||
|
| **Design** | Create artefacts (images/videos) from approved copy | Grid, List |
|
||||||
|
| **Posts** | Assemble final posts for publishing | Kanban, List, Calendar |
|
||||||
|
|
||||||
|
### Pipeline Tab
|
||||||
|
- Kanban columns: `Copy` → `Translate` → `Design` → `Post` → `Published`
|
||||||
|
- Each card shows: title, stage badge, brand, assignee avatar, approval status icon (✅/⏳/❌)
|
||||||
|
- Drag between columns advances stage (triggers approval flow if applicable)
|
||||||
|
- Campaign grouping: cards from the same campaign share a visual group (shared top border or header)
|
||||||
|
- "New Content" button creates a content item starting at Copy stage
|
||||||
|
|
||||||
|
### Content Item — The Linking Model
|
||||||
|
A **Content Item** is the thread connecting all stages:
|
||||||
|
- Has a title (the post concept/idea)
|
||||||
|
- Optionally linked to a Campaign
|
||||||
|
- Has linked records: copy entries, translations, design artefacts, post
|
||||||
|
- Each linked record has its own approval status
|
||||||
|
|
||||||
|
### Detail Panel
|
||||||
|
- Pipeline breadcrumb at top: `Copy ✅ → Translate ✅ → Design ⏳ → Post ○`
|
||||||
|
- Clicking a stage in the breadcrumb scrolls to that section in the panel
|
||||||
|
- "Advance to next stage" action button when current stage is approved
|
||||||
|
- All linked items visible in one panel (copy text, translation list, design thumbnails, post config)
|
||||||
|
|
||||||
|
### Approval Flow Per Stage
|
||||||
|
| Stage | Approval Type |
|
||||||
|
|-------|--------------|
|
||||||
|
| Copy | Formal approve/reject |
|
||||||
|
| Translate | Review & correct (lighter — suggestions, not gates) |
|
||||||
|
| Design | Formal approve/reject |
|
||||||
|
| Post | Formal approve/reject (final gate before publish) |
|
||||||
|
|
||||||
|
### Standalone Posts
|
||||||
|
Not every content item needs a campaign or full pipeline. Users can:
|
||||||
|
- Create a post directly from the Posts tab (skips Copy/Translate/Design)
|
||||||
|
- Create copy without linking to a campaign
|
||||||
|
- The pipeline is the recommended flow, not enforced
|
||||||
|
|
||||||
|
## 3. Campaign Brief Enhancement
|
||||||
|
|
||||||
|
### Current State
|
||||||
|
Campaigns exist but are mostly containers for posts. The campaign detail has a calendar timeline view.
|
||||||
|
|
||||||
|
### Enhanced Campaign Brief
|
||||||
|
Campaign detail page becomes a proper strategic document:
|
||||||
|
|
||||||
|
- **Brief section**: goals (awareness/engagement/conversions), target audience, key messages
|
||||||
|
- **Metrics targets**: reach, impressions, engagement rate, conversion targets
|
||||||
|
- **Timeline**: keep existing calendar timeline (no changes)
|
||||||
|
- **Budget**: link to finance/budget allocation
|
||||||
|
- **Approval gate**: campaign must be approved before content work begins
|
||||||
|
- **Content items**: cards showing linked content items with pipeline progress indicators
|
||||||
|
|
||||||
|
### Campaign → Content Flow
|
||||||
|
- Approved campaign shows "Create Content" button
|
||||||
|
- Creates a content item pre-linked to the campaign
|
||||||
|
- Campaign detail shows all its content items with stage progress
|
||||||
|
|
||||||
|
## 4. Dashboard Redesign
|
||||||
|
|
||||||
|
### Current Problem
|
||||||
|
Dashboard feels messy and doesn't answer "what needs my attention?"
|
||||||
|
|
||||||
|
### New Layout
|
||||||
|
|
||||||
|
**Top row — 4 metric cards:**
|
||||||
|
| Card | Content |
|
||||||
|
|------|---------|
|
||||||
|
| Active Campaigns | Count + pending approval count |
|
||||||
|
| Content in Pipeline | Total + breakdown by stage |
|
||||||
|
| Awaiting Your Approval | Items needing your review |
|
||||||
|
| Published This Period | Week/month toggle |
|
||||||
|
|
||||||
|
**Middle — Two columns:**
|
||||||
|
- **Left: Pipeline funnel** — horizontal bar/funnel showing item count per stage. Click any stage → navigates to Content page filtered to that stage.
|
||||||
|
- **Right: My Tasks** — items assigned to current user needing action, sorted by urgency (overdue first, then by due date)
|
||||||
|
|
||||||
|
**Bottom row — Two sections:**
|
||||||
|
- **Left: Recent Activity** — feed of actions (approvals, new content, status changes, comments). Shows avatar + action + item + timestamp.
|
||||||
|
- **Right: Upcoming Deadlines** — content items and campaigns with approaching due dates. Color-coded by urgency (red = overdue, amber = this week, gray = later).
|
||||||
|
|
||||||
|
### Principle
|
||||||
|
Dashboard answers: **"What needs my attention right now?"** — not just display stats.
|
||||||
|
|
||||||
|
## 5. Consistency Standards
|
||||||
|
|
||||||
|
### Page Header Pattern
|
||||||
|
Every page uses the same header layout:
|
||||||
|
```
|
||||||
|
[Page Title] [Search] [Filters] [View Toggle] [+ Create]
|
||||||
|
```
|
||||||
|
- Same order, same position on every page
|
||||||
|
- Search: expandable icon → input field (consistent interaction)
|
||||||
|
- Filters: always visible inline (no toggle button to show/hide)
|
||||||
|
- View toggle: far right, before Create button
|
||||||
|
- Create button: always primary style, always rightmost
|
||||||
|
|
||||||
|
### Filter Bar
|
||||||
|
- Always inline, always visible, consistent height
|
||||||
|
- Same dropdown component across all pages
|
||||||
|
- "Clear all" link appears when any filter is active
|
||||||
|
- Active filters show as pills/badges
|
||||||
|
|
||||||
|
### Detail Panels (SlidePanel)
|
||||||
|
- Width: 480px on all pages
|
||||||
|
- Header: `[← Back] Title [⋯ Actions]`
|
||||||
|
- Pipeline breadcrumb at top (for content items)
|
||||||
|
- Tab order: Details → Activity → Approval (consistent)
|
||||||
|
- Save: always top-right in header
|
||||||
|
- Delete: always inside ⋯ menu (never standalone button)
|
||||||
|
|
||||||
|
### Cards (Kanban/Grid)
|
||||||
|
- Single `KanbanCard` component used everywhere (already exists — enforce it)
|
||||||
|
- Required elements: title, status badge, brand badge, assignee avatar, date
|
||||||
|
- Hover: lift + shadow via existing `card-hover` class
|
||||||
|
|
||||||
|
### Empty States
|
||||||
|
- Always use shared `EmptyState` component
|
||||||
|
- Always include primary action button ("Create your first X")
|
||||||
|
- Consistent icon size, spacing, copy tone
|
||||||
|
|
||||||
|
### Loading States
|
||||||
|
- Skeleton loaders that match actual content dimensions
|
||||||
|
- No bare full-page spinners — always skeletons
|
||||||
|
- Skeleton shapes match the view (card skeletons for grid, row skeletons for list)
|
||||||
|
|
||||||
|
## 6. Premium Polish
|
||||||
|
|
||||||
|
### Transitions & Animations
|
||||||
|
| Element | Animation |
|
||||||
|
|---------|-----------|
|
||||||
|
| Route changes | Fade + slide-up (150ms ease-out) |
|
||||||
|
| Detail panel open | Spring slide-in from right (slight overshoot) |
|
||||||
|
| Kanban drag | Card lifts with shadow + slight rotation (2deg), drop zone pulses |
|
||||||
|
| Status badge change | Color crossfade (not instant swap) |
|
||||||
|
| View toggle (list↔grid) | Crossfade between views |
|
||||||
|
| Toasts | Spring slide-in from top-right, stack with spacing |
|
||||||
|
| Tab active indicator | Slides to follow selection |
|
||||||
|
|
||||||
|
### Hover & Interaction States
|
||||||
|
| Element | Hover Effect |
|
||||||
|
|---------|-------------|
|
||||||
|
| Cards | Lift 2px + deeper shadow + subtle brand-color border glow (10% opacity) |
|
||||||
|
| Buttons | Scale 1.02 on hover, 0.98 on press |
|
||||||
|
| Nav items | Background fills from left (not instant) |
|
||||||
|
| Avatars | Ring glow in role color |
|
||||||
|
|
||||||
|
### Visual Depth & Glass Effects
|
||||||
|
- Detail panel header: frosted glass (`backdrop-blur-xl`), stays visible while body scrolls
|
||||||
|
- Modal backdrop: deeper blur (12px, up from current 4px)
|
||||||
|
- Pipeline cards: layered multi-shadow for realistic depth
|
||||||
|
- Sidebar: subtle inner glow at top edge
|
||||||
|
- Status badges: glass morphism (translucent bg + subtle border)
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
- Page titles: `text-3xl font-light tracking-tight` (up from text-2xl)
|
||||||
|
- Consistent use of `text-text-secondary` variable (no raw gray-* classes)
|
||||||
|
- Numbers/metrics: `tabular-nums`, slightly heavier weight
|
||||||
|
- Tighter heading letter-spacing across the board
|
||||||
|
|
||||||
|
### Empty States — Premium
|
||||||
|
- Illustrated line-art SVG icons (matching app aesthetic) instead of plain Lucide icons
|
||||||
|
- Subtle gradient background behind icon circle
|
||||||
|
- Friendly, helpful copy ("No content yet — start by writing some copy")
|
||||||
|
|
||||||
|
### Dashboard Widgets — Premium
|
||||||
|
- Pipeline funnel: animated fill on first load (bars grow from left)
|
||||||
|
- Metric cards: gradient left-border accent (stage color), number count-up animation
|
||||||
|
- Activity feed: staggered fade-in (50ms between items)
|
||||||
|
- Metric card hover: gentle pulse on accent border
|
||||||
|
|
||||||
|
## 7. Files Impacted
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
- `client/src/components/Sidebar.jsx` — rewrite nav structure
|
||||||
|
- `client/src/App.jsx` — update routes (remove standalone pages, add Content route)
|
||||||
|
|
||||||
|
### Content Page (new)
|
||||||
|
- `client/src/pages/Content.jsx` — new unified page with tabs
|
||||||
|
- `client/src/components/ContentPipelineBoard.jsx` — new pipeline kanban
|
||||||
|
- `client/src/components/ContentDetailPanel.jsx` — new detail panel with pipeline breadcrumb
|
||||||
|
- Existing pages (`PostProduction.jsx`, `Translations.jsx`, `Artefacts.jsx`) become tab sub-components or are refactored into Content
|
||||||
|
|
||||||
|
### Campaigns
|
||||||
|
- `client/src/pages/Campaigns.jsx` — add brief fields (goals, metrics, audience)
|
||||||
|
- `client/src/pages/CampaignDetail.jsx` — add brief section, content items list, approval gate
|
||||||
|
- `server/server.js` — add campaign brief fields to schema, approval endpoint
|
||||||
|
|
||||||
|
### Dashboard
|
||||||
|
- `client/src/pages/Dashboard.jsx` — full redesign with new widget layout
|
||||||
|
|
||||||
|
### Consistency
|
||||||
|
- `client/src/components/SlidePanel.jsx` — standardize width, header layout
|
||||||
|
- `client/src/components/EmptyState.jsx` — add illustrated SVG variants
|
||||||
|
- `client/src/components/SkeletonLoader.jsx` — match actual content dimensions
|
||||||
|
- All page files — standardize header pattern, filter bar, loading states
|
||||||
|
|
||||||
|
### Polish
|
||||||
|
- `client/src/index.css` — new animations, glass effects, spring transitions, typography updates
|
||||||
|
- `client/src/components/KanbanBoard.jsx` — enhanced drag animations
|
||||||
|
- `client/src/components/KanbanCard.jsx` — premium hover states
|
||||||
|
- `client/src/components/StatusBadge.jsx` — glass morphism variant
|
||||||
|
- `client/src/components/Modal.jsx` — deeper backdrop blur
|
||||||
|
- `client/src/components/Toast.jsx` — spring animations
|
||||||
|
|
||||||
|
### Server
|
||||||
|
- `server/server.js` — content item model, campaign brief fields, pipeline stage tracking
|
||||||
|
- New columns in NocoDB: content_item_id linkages, campaign brief fields (goals, metrics, audience, approval_status)
|
||||||
|
|
||||||
|
### i18n
|
||||||
|
- `client/src/i18n/en.json` — new keys for Content page, pipeline stages, dashboard widgets, campaign brief
|
||||||
|
- `client/src/i18n/ar.json` — same keys in Arabic
|
||||||
Reference in New Issue
Block a user