Design Process Flow Template

This repository contains a structured Design Process Flow Template built to help UX teams plan and estimate project timelines. The diagram outlines a comprehensive list of design tasks, each with best (shortest) and worst case (longest) duration estimates (in days).

Key Features

• ✅ Modular task list — hide tasks that don't apply to your specific project
• ⏱️ Dual timeline estimates — shows total project duration based on both short and long estimates
• 🧭 Flexible and customizable — adapt the flow to fit your team's design operations framework
• 📊 Clear visual overview — provides visibility into project scope, dependencies, and pacing

Use this tool to quickly model design process timelines, align cross-functional teams, and improve estimation accuracy across UX initiatives.

How to Use

1. View the flow diagram — Tasks are organized into five phases: Discovery, Define, Concept, Design, and Deliver
2. Edit time estimates — Click on the day values in the top corners of each task to adjust estimates
3. Toggle task visibility — Use the eye icon to show/hide tasks that are relevant to your project
4. Expand task details — Click on any task to view and edit its description
5. Reorder tasks — Drag tasks using the grip icon to rearrange within each phase
6. Review totals — Check the Project Duration Estimates section for best case, worst case, and range calculations

Phase Overview

• Discovery — Competitive analysis, user interviews, stakeholder interviews, contextual inquiry, market research, analytics review
• Define — Synthesize research, create personas, map journeys, formulate problems, define scope, conduct task analysis
• Concept — User stories, sketching, affinity diagramming, story mapping, low-fi wireframing, paper prototyping
• Design — Wireframing, UI/visual design, interactive prototyping, UX writing
• Deliver — Design documentation, developer handoff/review, QA

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Time Calculations

• Days — Working days for each task
• Weeks — Based on 5-day work week
• Months — Based on 20 working days per month

---