From 18785ed9011d6ee54bbbeae42cf00198562b77c5 Mon Sep 17 00:00:00 2001 From: fahed Date: Wed, 11 Mar 2026 17:20:20 +0300 Subject: [PATCH] docs: add UX/UI overhaul design spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../specs/2026-03-11-ux-ui-overhaul-design.md | 271 ++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md diff --git a/docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md b/docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md new file mode 100644 index 0000000..37ad969 --- /dev/null +++ b/docs/superpowers/specs/2026-03-11-ux-ui-overhaul-design.md @@ -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