diff --git a/architect/01-mockups/.gitkeep b/architect/01-mockups/.gitkeep new file mode 100644 index 0000000..80dd374 --- /dev/null +++ b/architect/01-mockups/.gitkeep @@ -0,0 +1,3 @@ +# Mockups Directory + +This directory contains visual mockups for TaskFlow UI screens. \ No newline at end of file diff --git a/architect/01-mockups/README.md b/architect/01-mockups/README.md index e520c77..63b39ce 100644 --- a/architect/01-mockups/README.md +++ b/architect/01-mockups/README.md @@ -1,25 +1,87 @@ -# TaskFlow Mockups +# TaskFlow UI Mockups -This directory contains UI mockups for TaskFlow, a web-based task tracking system for small teams. +**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 -## Required Mockups +## Mockup Specifications -### 1. Task List / Dashboard -- **Desktop (1440px):** Main dashboard showing all tasks with clear ownership and status -- **Mobile (375px):** Responsive layout for task overview on mobile devices +### 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. Create or Edit Task Screen -- **Desktop (1440px):** Task creation/editing interface with form fields -- **Mobile (375px):** Mobile-optimized task editing experience +### 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. Blocked Task States -- **Mobile (375px):** Empty state and error handling for blocked tasks +### 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 -## Design Principles -- Clean, simple interfaces that make task ownership and status immediately clear -- Teams can quickly scan for blocked work and reassign tasks -- WCAG 2.1 AA accessibility compliance -- User can create/assign task in ≤3 steps -- All assigned tasks visible on single screen +### 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 -*Generated by Architect agent during mockup phase.* \ No newline at end of file +### 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 \ No newline at end of file diff --git a/architect/01-mockups/task-blocked-mobile.jpg b/architect/01-mockups/task-blocked-mobile.jpg new file mode 100644 index 0000000..d87e9d1 Binary files /dev/null and b/architect/01-mockups/task-blocked-mobile.jpg differ diff --git a/architect/01-mockups/task-create-desktop.jpg b/architect/01-mockups/task-create-desktop.jpg new file mode 100644 index 0000000..e9fc02a Binary files /dev/null and b/architect/01-mockups/task-create-desktop.jpg differ diff --git a/architect/01-mockups/task-create-mobile.jpg b/architect/01-mockups/task-create-mobile.jpg new file mode 100644 index 0000000..af33f76 Binary files /dev/null and b/architect/01-mockups/task-create-mobile.jpg differ diff --git a/architect/01-mockups/task-dashboard-desktop.jpg b/architect/01-mockups/task-dashboard-desktop.jpg new file mode 100644 index 0000000..37a5cbf Binary files /dev/null and b/architect/01-mockups/task-dashboard-desktop.jpg differ diff --git a/architect/01-mockups/task-dashboard-mobile.jpg b/architect/01-mockups/task-dashboard-mobile.jpg new file mode 100644 index 0000000..fc03a84 Binary files /dev/null and b/architect/01-mockups/task-dashboard-mobile.jpg differ