taskflow/architect/01-mockups

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