diff --git a/architect/01-mockups/README.md b/architect/01-mockups/README.md deleted file mode 100644 index 63b39ce..0000000 --- a/architect/01-mockups/README.md +++ /dev/null @@ -1,87 +0,0 @@ -# TaskFlow UI Mockups - -**Purpose:** Visual mockups for TaskFlow task management interface -**Audience:** Sam (project lead), Frontend development team -**Scope:** Core user screens for task creation, viewing, and status management -**Last Updated:** 2024-09-05 - -## Mockup Specifications - -### 1. Task List / Dashboard - Desktop (16:9) -**File:** `task-dashboard-desktop.jpg` -**Layout:** Clean business application with sidebar team list and main task table -**Key Features:** -- TaskFlow branding with user profile (Sarah Chen) -- Team members sidebar with online status indicators -- Filter tabs: My Tasks, All Tasks, Blocked -- Task table with columns: Task Name, Assignee, Status, Due Date -- Priority indicators (High/Medium/Low with color coding) -- Status badges (Open/In Progress/Blocked) -- Prominent "Create Task" button -- Professional color scheme with good contrast - -### 2. Task List / Dashboard - Mobile (9:16) -**File:** `task-dashboard-mobile.jpg` -**Layout:** Mobile-optimized card-based layout with tab navigation -**Key Features:** -- Compact header with hamburger menu -- Tab navigation: My Tasks (8), All (24), Blocked (3) with counts -- Task cards showing title, assignee avatar, status badge, due date -- Floating action button (+) for new task creation -- Touch-friendly interface elements -- Scrollable task list - -### 3. Create/Edit Task - Desktop (16:9) -**File:** `task-create-desktop.jpg` -**Layout:** Modal dialog over dashboard background -**Key Features:** -- Clear form layout with proper field labels -- Required field indicators (red asterisks) -- Task Title (text input with example) -- Description (textarea for detailed info) -- Assignee dropdown with user avatar and name -- Status radio buttons (Open/In Progress/Blocked) -- Due Date picker -- Priority dropdown (Low/Medium/High with color coding) -- Save Task and Cancel buttons -- Professional form validation styling - -### 4. Create/Edit Task - Mobile (9:16) -**File:** `task-create-mobile.jpg` -**Layout:** Full-screen mobile form with header navigation -**Key Features:** -- Header with back arrow and Save button -- Touch-friendly form inputs -- Status selection as pill buttons -- Assignee dropdown with avatar -- Date picker optimized for mobile -- Large, accessible touch targets -- Scrollable form layout - -### 5. Blocked Task Error State - Mobile (9:16) -**File:** `task-blocked-mobile.jpg` -**Layout:** Centered error state with clear messaging -**Key Features:** -- Blocked task icon with lock symbol -- Clear headline: "This task is blocked." -- Explanatory text about why task cannot be completed -- Action buttons: "Contact assignee" (primary), "Report issue" (secondary) -- Supportive, not alarming visual tone -- Accessible color contrast - -## Design Principles Applied - -1. **Immediate Status Visibility:** Color-coded status badges and priority indicators make task states clear at a glance -2. **Team Ownership Clarity:** User avatars and names prominently displayed throughout interface -3. **3-Step Task Creation:** Simple form flow maintains user goal of ≤3 steps to create/assign task -4. **Accessibility:** High contrast colors, clear labels, proper form structure -5. **Responsive Design:** Desktop focuses on data density, mobile optimizes for touch interaction -6. **Error State Guidance:** Blocked task state provides clear next actions for users - -## Key Assumptions - -- Teams of 2-15 members (confirmed by sidebar and assignee lists) -- Desktop-first workflow with mobile support for field updates -- Admin-managed user accounts (no self-service visible in interface) -- Status progression: Open → In Progress → Complete (with Blocked as exception state) -- Priority and due dates are essential task attributes for small team coordination \ No newline at end of file