workspace/website/process.html

{% extends "base.html" %}

{% block title %}Process - Charles Feinn // AppSimple{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/assets/css/pages/process.css" />
{% endblock %}

{% block content %}
<!-- Process Section -->
<h1 class="page-title">My Process</h1>
<p class="page-intro">I believe in a structured, transparent approach to implementing AI solutions. <strong>When you partner with AppSimple, you work directly with me, Charles Feinn, ensuring dedicated expertise on your project.</strong> Here's how we'll work together to bring AI capabilities to your business:</p>

<!-- Process Steps with Lucide Icons -->
<div class="process-steps">
    <div class="process-step" data-step="1">
        <div class="process-step-content">
            <!-- New structure with icon and title in flex container -->
            <div class="process-step-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                        <polyline points="9 22 9 12 15 12 15 22"/>
                    </svg>
                </div>
                <h3>Discovery & Assessment</h3>
            </div>
            <div class="process-step-content-body">
                <p>We begin by understanding your business goals, challenges, and current processes. Through conversations and analysis, I identify opportunities where AI can create the most value.</p>
                <p>This phase includes:</p>
                <ul class="service-list">
                    <li>Initial consultation to discuss your needs</li>
                    <li>Review of existing workflows and pain points</li>
                    <li>Analysis of available data and systems</li>
                    <li>Identification of high-impact AI opportunities</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="process-step" data-step="2">
        <div class="process-step-content">
            <!-- New structure with icon and title in flex container -->
            <div class="process-step-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <path d="M2 3h20v14H2z"/>
                        <path d="M8 21h8"/>
                        <path d="M12 17v4"/>
                    </svg>
                </div>
                <h3>Solution Design</h3>
            </div>
            <div class="process-step-content-body">
                <p>Based on our findings, I design a tailored solution that addresses your specific needs. I focus on practical implementations that deliver clear ROI.</p>
                <p>This phase includes:</p>
                <ul class="service-list">
                    <li>Selection of appropriate AI technologies</li>
                    <li>Creation of solution architecture</li>
                    <li>Development of implementation roadmap</li>
                    <li>Project scope and timeline definition</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="process-step" data-step="3">
        <div class="process-step-content">
            <!-- New structure with icon and title in flex container -->
            <div class="process-step-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <polyline points="16 18 22 12 16 6"/>
                        <polyline points="8 6 2 12 8 18"/>
                    </svg>
                </div>
                <h3>Implementation</h3>
            </div>
            <div class="process-step-content-body">
                <p>This is where ideas become reality. I handle the technical heavy lifting, building and integrating the solution into your existing systems and workflows.</p>
                <p>This phase includes:</p>
                <ul class="service-list">
                    <li>Development of custom AI solutions</li>
                    <li>Integration with existing systems</li>
                    <li>Testing and quality assurance</li>
                    <li>Iterative refinement based on feedback</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="process-step" data-step="4">
        <div class="process-step-content">
            <!-- New structure with icon and title in flex container -->
            <div class="process-step-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>
                </div>
                <h3>Knowledge Transfer & Support</h3>
            </div>
            <div class="process-step-content-body">
                <p>Once implemented, I ensure you and your team understand how to use and maintain the solution. Ongoing support ensures your AI solution continues to deliver value.</p>
                <p>This phase includes:</p>
                <ul class="service-list">
                    <li>Training sessions for your team</li>
                    <li>Documentation of the solution</li>
                    <li>Handover of all relevant materials</li>
                    <li>Optional ongoing support and maintenance</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h2 class="section-heading">Project Timeline</h2>
<p class="section-intro">While every project is unique, here's a typical timeline for implementing an AI solution:</p>

<!-- Timeline with Updated Styling -->
<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>1</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="16"/>
                        <line x1="8" y1="12" x2="16" y2="12"/>
                    </svg>
                </div>
                <div class="timeline-title">Discovery & Initial Assessment</div>
            </div>
            <p>Consultation, requirements gathering, and opportunity identification.</p>
        </div>
    </div>
    
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>2</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <polygon points="14 2 18 6 7 17 3 17 3 13 14 2"/>
                        <line x1="3" y1="22" x2="21" y2="22"/>
                    </svg>
                </div>
                <div class="timeline-title">Solution Design</div>
            </div>
            <p>Technology selection, architecture development, and project planning.</p>
        </div>
    </div>
    
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>3</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <polyline points="16 18 22 12 16 6"/>
                        <polyline points="8 6 2 12 8 18"/>
                    </svg>
                </div>
                <div class="timeline-title">Development & Implementation</div>
            </div>
            <p>Building the solution, integration, and initial testing.</p>
        </div>
    </div>
    
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>4</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
                        <path d="m9 12 2 2 4-4"/>
                    </svg>
                </div>
                <div class="timeline-title">Testing & Refinement</div>
            </div>
            <p>QA testing, feedback collection, and solution optimization.</p>
        </div>
    </div>
    
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>5</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/>
                        <line x1="4" y1="22" x2="4" y2="15"/>
                    </svg>
                </div>
                <div class="timeline-title">Deployment & Training</div>
            </div>
            <p>Final deployment, team training, and knowledge transfer.</p>
        </div>
    </div>
    
    <div class="timeline-item">
        <div class="timeline-marker">
            <span>6</span>
        </div>
        <div class="timeline-content">
            <!-- Updated structure with icon and title in flex container -->
            <div class="timeline-header">
                <div class="expertise-icon-container">
                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <div class="timeline-title">Support & Iteration</div>
            </div>
            <p>Continuous improvement, updates, and maintenance as needed.</p>
        </div>
    </div>
</div>

<p>This timeline can be adjusted based on project complexity, your specific needs, and resource availability.</p>

<!-- CTA Section -->
<div class="process-cta">
    <h3>Ready to start your Applied AI journey?</h3>
    <p>Let's discuss your business goals and explore how AI can help you achieve them. The first step is a conversation to understand your needs.</p>
    <a href="/contact" class="process-cta-button">Schedule a Consultation</a>
</div>
{% endblock %}