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