Create a clean, modern horizontal process timeline section for a UX case study. The layout should be simple, professional, and figma-ready. Use soft pastel colors, rounded pill bars, minimal icons, and three clear phases: Discovery, Design, Delivery.
46c141f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UX Process Timeline</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen py-12"> | |
| <section class="max-w-7xl mx-auto px-4"> | |
| <!-- Header --> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Process</h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| A structured workflow blending research, clarity, AI-assisted exploration, and focused decision-making. | |
| </p> | |
| </div> | |
| <!-- Phase Labels --> | |
| <div class="grid grid-cols-12 gap-4 mb-8"> | |
| <div class="col-span-4 text-center"> | |
| <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Discovery</span> | |
| </div> | |
| <div class="col-span-4 text-center"> | |
| <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Design</span> | |
| </div> | |
| <div class="col-span-4 text-center"> | |
| <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Delivery</span> | |
| </div> | |
| </div> | |
| <!-- Timeline --> | |
| <div class="relative"> | |
| <!-- Background Grid --> | |
| <div class="absolute inset-0 grid grid-cols-12 gap-4 z-0"> | |
| <template x-for="i in 12"> | |
| <div class="h-full border-r border-dashed border-gray-200"></div> | |
| </template> | |
| </div> | |
| <!-- Process Steps --> | |
| <div class="relative z-10 space-y-6"> | |
| <!-- 1. Journey Mapping --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-span-4"> | |
| <div class="process-pill bg-green-100"> | |
| <div class="process-icon"> | |
| <i data-feather="search"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">Journey Mapping & UX Analysis</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 2. Problem Framing --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-span-7"> | |
| <div class="process-pill bg-blue-100"> | |
| <div class="process-icon"> | |
| <i data-feather="edit"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">Problem Framing & Opportunity Definition</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3. AI Research --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-2 col-span-4"> | |
| <div class="process-pill bg-lime-100"> | |
| <div class="process-icon"> | |
| <i data-feather="zap"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">AI Research Summaries & Pattern Insights</h3> | |
| <p class="process-desc">AI analyzes competitor flows, highlights common friction & trends.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 4. System Mapping --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-3 col-span-8"> | |
| <div class="process-pill bg-emerald-100"> | |
| <div class="process-icon"> | |
| <i data-feather="box"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">Flows, System Mapping, Information Architecture</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 5. AI Wireframes --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-4 col-span-6"> | |
| <div class="process-pill bg-purple-100"> | |
| <div class="process-icon"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">AI-Generated Early Wireframes & Layout Concepts</h3> | |
| <p class="process-desc">AI produces 5–10 exploratory wireframe variations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 6. Interaction Design --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-5 col-span-7"> | |
| <div class="process-pill bg-violet-100"> | |
| <div class="process-icon"> | |
| <i data-feather="mouse-pointer"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">Interaction Design & Variant Exploration</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 7. AI UI Refinement --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-6 col-span-5"> | |
| <div class="process-pill bg-sky-100"> | |
| <div class="process-icon"> | |
| <i data-feather="zap"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">AI-Assisted UI Variants & Refinement Suggestions</h3> | |
| <p class="process-desc">AI proposes alternative UI versions, spacing tweaks, clarity fixes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 8. High-Fidelity --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-7 col-span-6"> | |
| <div class="process-pill bg-cyan-100"> | |
| <div class="process-icon"> | |
| <i data-feather="file-text"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">High-Fidelity Screens & Design System Specs</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 9. Prototype Handoff --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-9 col-span-5"> | |
| <div class="process-pill bg-amber-50"> | |
| <div class="process-icon"> | |
| <i data-feather="send"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">Prototype Handoff & Continuous AI Iteration</h3> | |
| <p class="process-desc">AI checks consistency, spacing, contrast, and UX flow integrity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 10. AI Validation --> | |
| <div class="grid grid-cols-12 gap-4"> | |
| <div class="col-start-10 col-span-3"> | |
| <div class="process-pill bg-teal-100"> | |
| <div class="process-icon"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| <div class="process-content"> | |
| <h3 class="process-title">AI Regression Validation & Flow Quality Checks</h3> | |
| <p class="process-desc">AI verifies screen-to-screen logic and flags mismatches.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |