Add TaskFlow UI mockups - substage 01 complete

architect/01-mockups/.gitkeep

@@ -0,0 +1,3 @@
+# Mockups Directory
+
+This directory contains visual mockups for TaskFlow UI screens.

architect/01-mockups/README.md

@@ -1,25 +1,87 @@
-# TaskFlow Mockups
+# TaskFlow UI Mockups
 
-This directory contains UI mockups for TaskFlow, a web-based task tracking system for small teams.
+**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  
 
-## Required Mockups
+## Mockup Specifications
 
-### 1. Task List / Dashboard
+### 1. Task List / Dashboard - Desktop (16:9)
-- **Desktop (1440px):** Main dashboard showing all tasks with clear ownership and status
+**File:** `task-dashboard-desktop.jpg`  
-- **Mobile (375px):** Responsive layout for task overview on mobile devices
+**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. Create or Edit Task Screen  
+### 2. Task List / Dashboard - Mobile (9:16)
-- **Desktop (1440px):** Task creation/editing interface with form fields
+**File:** `task-dashboard-mobile.jpg`  
-- **Mobile (375px):** Mobile-optimized task editing experience
+**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. Blocked Task States
+### 3. Create/Edit Task - Desktop (16:9)
-- **Mobile (375px):** Empty state and error handling for blocked tasks
+**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
 
-## Design Principles
+### 4. Create/Edit Task - Mobile (9:16)
-- Clean, simple interfaces that make task ownership and status immediately clear
+**File:** `task-create-mobile.jpg`  
-- Teams can quickly scan for blocked work and reassign tasks
+**Layout:** Full-screen mobile form with header navigation  
-- WCAG 2.1 AA accessibility compliance
+**Key Features:**
-- User can create/assign task in ≤3 steps
+- Header with back arrow and Save button
-- All assigned tasks visible on single screen
+- 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
 
-*Generated by Architect agent during mockup phase.*
+### 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