87 lines
3.6 KiB
Markdown
87 lines
3.6 KiB
Markdown
# 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 |