Clean up: Remove architect mockups
This commit is contained in:
parent
b9790370df
commit
4bc3849ded
@ -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
|
||||
Loading…
Reference in New Issue
Block a user