| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>UX Flow Symphony | Process Timeline</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <custom-navbar></custom-navbar> |
|
|
| <main class="container mx-auto px-4 py-20 max-w-6xl"> |
| |
| <section class="text-center mb-20"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Process</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed"> |
| "From discovery to delivery, this workflow blends research, clarity, AI-assisted exploration, and focused decision-making into one cohesive system." |
| </p> |
| </section> |
|
|
| |
| <div class="flex justify-between mb-8 px-4"> |
| <span class="text-xs font-medium tracking-widest text-gray-400 uppercase">DISCOVERY</span> |
| <span class="text-xs font-medium tracking-widest text-gray-400 uppercase">DESIGN</span> |
| <span class="text-xs font-medium tracking-widest text-gray-400 uppercase">DELIVERY</span> |
| </div> |
|
|
| |
| <div class="relative"> |
| |
| <div class="absolute inset-0 grid grid-cols-12 gap-4 pointer-events-none"> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| <div class="border-r border-dashed border-gray-200 h-full"></div> |
| </div> |
|
|
| |
| <div class="relative space-y-8"> |
| |
| <div class="timeline-item" data-phase="discovery"> |
| <div class="timeline-bar bg-gradient-to-r from-mint-400 to-mint-300 w-3/12"> |
| <div class="timeline-icon"> |
| <i data-feather="search"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>Journey Mapping & UX Analysis</h3> |
| <p>Understanding user flows and pain points</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="discovery"> |
| <div class="timeline-bar bg-gradient-to-r from-blue-300 to-blue-200 w-7/12"> |
| <div class="timeline-icon"> |
| <i data-feather="edit-2"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>Problem Framing & Opportunity Definition</h3> |
| <p>Identifying key challenges and solutions</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="discovery"> |
| <div class="timeline-bar bg-gradient-to-r from-lime-300 to-lime-200 w-3/12"> |
| <div class="timeline-icon"> |
| <i data-feather="zap"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>AI Research Summaries & Pattern Insights</h3> |
| <p>Automated analysis of user research data</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="timeline-item" data-phase="design"> |
| <div class="timeline-bar bg-gradient-to-r from-green-300 to-green-200 w-8/12 ml-4"> |
| <div class="timeline-icon"> |
| <i data-feather="puzzle"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>Flows, System Mapping & IA</h3> |
| <p>Creating comprehensive user journeys</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="design"> |
| <div class="timeline-bar bg-gradient-to-r from-purple-300 to-purple-200 w-6/12 ml-6"> |
| <div class="timeline-icon"> |
| <i data-feather="cpu"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>AI-Generated Early Wireframes</h3> |
| <p>Automated layout suggestions</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="design"> |
| <div class="timeline-bar bg-gradient-to-r from-indigo-300 to-indigo-200 w-7/12 ml-8"> |
| <div class="timeline-icon"> |
| <i data-feather="mouse-pointer"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>Interaction Design & Variant Exploration</h3> |
| <p>Refining micro-interactions</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="design"> |
| <div class="timeline-bar bg-gradient-to-r from-cyan-300 to-cyan-200 w-5/12 ml-10"> |
| <div class="timeline-icon"> |
| <i data-feather="zap"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>AI-Based UI Variants & Refinement Suggestions</h3> |
| <p>Automated design improvements</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="timeline-item" data-phase="delivery"> |
| <div class="timeline-bar bg-gradient-to-r from-blue-200 to-blue-100 w-5/12 ml-16"> |
| <div class="timeline-icon"> |
| <i data-feather="file-text"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>High-Fidelity Screens & Design System Specs</h3> |
| <p>Pixel-perfect implementation</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="delivery"> |
| <div class="timeline-bar bg-gradient-to-r from-amber-200 to-amber-100 w-6/12 ml-20"> |
| <div class="timeline-icon"> |
| <i data-feather="rocket"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>Prototype Handoff & Continuous AI Iteration</h3> |
| <p>Developer collaboration</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="timeline-item" data-phase="delivery"> |
| <div class="timeline-bar bg-gradient-to-r from-teal-300 to-teal-200 w-3/12 ml-24"> |
| <div class="timeline-icon"> |
| <i data-feather="check-circle"></i> |
| </div> |
| <div class="timeline-text"> |
| <h3>AI Regression Checks & Flow Validation</h3> |
| <p>Automated quality assurance</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| <script src="script.js"></script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
