# 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