marketing-app/docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md

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