Documenting Web Migrations with AI: How Product Owners Can Use ChatGPT and Claude for Comprehensive Site Analysis

Unlocking Seamless Web Migrations with AI

Migrating a complex website, especially one as intricate as Sitecore — demands meticulous documentation of existing functionalities, data structures, and user interactions. As a Product Owner, ensuring every feature and interaction is thoroughly documented is crucial to delivering an exceptional user experience that aligns with brand standards and operational needs.

In this blog, I’ll walk you through a general process of using ChatGPT and a custom project within Claude to document an existing hospitality website’s features. This documentation approach includes hands-on investigation of site components, capturing screenshots and HTML, and using AI to structure a comprehensive report. This method allows both technical and non-technical team members to gain clarity on the requirements, setting the stage for a smooth migration.

Getting Hands-On: Investigating the Current Hospitality Site

The first step is immersing yourself in the existing site, let’s call it “Hospitality Hub.” Before using Claude or ChatGPT, explore each major feature, from interactive maps to booking components. Capture screenshots and review the page source to understand how elements are structured and interconnected.

Example Insight: When examining the room booking page, you might find a structured two-column layout with a collapsible sidebar featuring special offers and loyalty program details. This observation can then be documented and later described in the AI prompt to provide context on each component’s purpose and user-facing behaviour.

These screenshots and manual observations will be foundational to guiding the AI. By combining your own findings with AI-generated insights, you can produce an accurate and thorough report that transcends what code inspection alone would reveal.

Setting Up Context for the LLM

To document a site feature accurately, start by investigating its structure and function with your own eyes (and the browser’s inspector tool). This process allows you to gather both HTML and insights into how each feature works from the user's perspective. By pairing this with screenshots, you can feed the AI a more holistic view, enabling it to produce documentation that reflects not just the underlying code but also the site’s user experience.

Let’s walk through a scenario using the room booking page on a hypothetical hospitality site, where our goal is to document the layout and behavior of specific elements like room details, booking buttons, and a special offers sidebar.

Step 1: Inspecting and Capturing HTML Structure with Chrome Inspector

1. Open Chrome Inspector:
   • Right-click on the element you want to inspect (like the room title or booking button) and select Inspect. This opens Chrome’s Developer Tools, which displays the HTML structure of the selected element and its surrounding code.

2. Capture Key Elements:

   • Room Details Section: Locate the main content container where the room information, description, and booking options are displayed. In the HTML, you might see something like this:

       <div class="room-details">
         <h1 class="room-title">Deluxe Suite</h1>
         <p class="room-description">A luxurious suite with a stunning view of the city skyline.</p>
         <button class="booking-button">Book Now</button>
       </div>
     

   • Special Offers Sidebar: Look for the sidebar container where special offers or rewards are displayed. In the HTML, it might look like this:

       <aside class="sidebar">
         <div class="offers">
           <h2>Special Offers</h2>
           <ul>
             <li>20% off on weekday bookings</li>
             <li>Free breakfast with every stay</li>
           </ul>
         </div>
       </aside>
     

   • Expand the HTML nodes as needed to capture nested elements. Copy this HTML code to use as a reference for the AI prompt.

3. Document Observations on Layout and Interactivity:
   • Use Chrome Inspector to observe how CSS classes are used to style and position elements. For example, .room-details might have a display: flex property that controls the layout.
   • Take note of any interactive elements, like collapsible sections or hover effects on buttons. Right-click the element, select Inspect, and view the styles and JavaScript tied to the element.
4. Capture Screenshots:
   • Take a screenshot of each section you’re documenting to visually illustrate the layout and functionality. For instance, capture the room details section with the booking button visible, as well as the special offers sidebar with collapsible options expanded.

Step 2: Structuring a Contextual Prompt for the LLM

With screenshots and HTML examples in hand, create a prompt that conveys the user experience and technical structure of each feature. Adding descriptive context around each feature’s purpose allows the AI to understand both the code and the UX, which results in more accurate and useful documentation.

Example Prompt for Claude or ChatGPT:

"The room booking page features a two-column layout. The main content area on the left displays room details, including the room title, description, and a booking button. The sidebar on the right contains a collapsible section titled 'Special Offers' where users can view offers like '20% off on weekday bookings.' Generate documentation for this layout, including HTML code patterns for each component and technical insights into how each part functions within the page’s overall structure."

Here’s how this prompt helps the AI:

• Describe Layout and Purpose: Specifying that it’s a “two-column layout” with “room details” and “special offers” tells the AI that this is a structured and purpose-driven layout, allowing it to make informed decisions when generating documentation.
• Highlight Key Elements: By mentioning specific items (e.g., booking button, collapsible offers), you guide the AI to focus on these components, ensuring nothing is overlooked.
• Explain Interactivity: Mentioning the collapsible section in the sidebar prompts the AI to document this as an interactive element, rather than treating it as static HTML.

Step 3: Run the Prompt and Review the Output

Once you input the prompt, review the AI’s output carefully. Check that it includes:

1. Detailed HTML and CSS Snippets: The AI should provide HTML structures that match your observations. For instance, it should produce a div for room details, an aside for the sidebar, and include any relevant classes like .room-details or .booking-button.
2. Technical Insights: Look for AI-generated insights about the layout and interactivity, such as how media queries are used to adjust the two-column layout for mobile screens or how JavaScript enables the collapsible feature in the sidebar.
3. Additional Documentation Suggestions: The AI might suggest performance optimizations (like lazy loading images) or accessibility improvements (like ARIA labels on the collapsible section). This is where AI can add extra value by recommending best practices.

Sample Claude Output Based on the user provided prompt:

• Room Details Section:

    <div class="room-details">
      <h1 class="room-title">Room Title Here</h1>
      <p class="room-description">Room description text goes here.</p>
      <button class="booking-button">Book Now</button>
    </div>
  

  • Description: This section is used to display the main room information. The .room-details class sets up a flex layout for aligning content, while .room-title and .booking-button styles control the appearance of the title and button, respectively.
  • Suggested Improvement: Add aria-label="Book this room" to the booking button for improved accessibility.

• Special Offers Sidebar:

    <aside class="sidebar">
      <div class="offers">
        <h2>Special Offers</h2>
        <ul>
          <li>20% off on weekday bookings</li>
          <li>Free breakfast with every stay</li>
        </ul>
      </div>
    </aside>
  

  • Description: The sidebar lists special offers in a collapsible format. The offers section contains a list of current promotions, which expands or collapses on user interaction.
  • Suggested Improvement: Use aria-expanded attributes in the collapsible section for screen reader compatibility.

By structuring your prompts this way, you guide the AI to produce documentation that mirrors your observations and adds technical depth.

From Observation to Documentation: Translating HTML into Key Components

Once you’ve gathered HTML snippets and screenshots for each feature, the next step is to transform these into clearly documented components. This part of the process combines visual references and code, helping bridge the gap for stakeholders who may not be familiar with the raw HTML.

Let’s continue using our example of a room booking page on a hospitality site. You’ll walk through each core feature, describing its role in the user experience and providing HTML snippets for reference.

Two-Column Layout

The booking page uses a two-column layout to balance the main room details with supporting information like special offers. Here’s the structure:

html
Copy code
<div class="page-content layout-two-column">
  <main class="page-content-main">
    <!-- Main content for room details and booking -->
  </main>
  <aside class="page-content-aside">
    <!-- Sidebar content for offers and loyalty rewards -->
  </aside>
</div>

This layout ensures a clear hierarchy, placing essential room information in the main content area on the left, with supporting promotions or loyalty offers on the right. Pairing this snippet with a screenshot of the page layout will make it easier for other team members to understand the intended user experience.

Social Sharing Buttons

Underneath the room title, the site includes social sharing buttons, allowing guests to share their potential booking or favourite room on social media platforms like Facebook and Twitter. Here’s the HTML:

html
Copy code
<ul class="rrssb-buttons">
  <li class="facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=..." class="popup">
      <!-- Facebook icon SVG -->
    </a>
  </li>
  <!-- Repeat for other platforms -->
</ul>

By documenting this snippet with a description and accompanying screenshot, you’re conveying both the code structure and its function in the user experience. This makes the documentation useful to both technical and non-technical stakeholders, as they can visualize the element’s role on the page.

Descriptive Pairing of HTML and Visual Placement

Each HTML snippet should be paired with a concise description of its visual placement and functionality. For example, “The two-column layout organizes the main room information on the left and offers on the right, creating a clear hierarchy and intuitive navigation.” These descriptions make the documentation more accessible, ensuring that anyone reading it understands how each element contributes to the overall UX.

Defining Data Structures and Key Fields

In addition to HTML structure, capturing the data model behind features like room details and loyalty offers is essential. This can help other teams understand which fields are essential and how they’re displayed.

Room Details Data Structure

Based on your observations, here’s a sample data structure for room details:

• Room Title
• Availability Dates
• Price and Special Rates
• Amenities List
• Room Description (HTML)

This breakdown helps developers and content managers understand the underlying data fields required to display room details. A sample description might include how “availability dates” dynamically update based on the room’s booking status, or how “special rates” can be applied to specific date ranges.

Offers and Rewards Structure

For the offers and rewards sidebar, document the data fields that power it:

• Offer Type (e.g., Discount, Loyalty Points)
• Discount Percentage
• Conditions (e.g., minimum nights)
• Availability Period

Explaining how these fields interact with the user interface—such as noting that each offer is clickable for more details—helps the AI generate documentation that reflects both the data structure and its use on the page.

Technical Insights and Performance Considerations

While exploring the HTML and data structures, document technical aspects that influence performance and user experience. These details can guide future development and optimize the migration process.

JavaScript Libraries

Identify any JavaScript dependencies observed on the site, such as jQuery or a custom social sharing library. Plan to replace or update unnecessary dependencies during migration. For instance:

• jQuery is used for DOM manipulation and event handling.
• Custom Social Sharing Library handles social media interactions.

If these libraries aren’t necessary or can be replaced with native JavaScript, this should be noted in your documentation as a potential optimization.

Responsive Design

Responsive design is essential for modern hospitality sites. Documenting CSS patterns observed in Chrome Inspector can provide insight into the site’s responsiveness. Here’s an example snippet for the two-column layout:

css
Copy code
@media screen and (min-width: 769px) {
  main.page-content-main {
    width: 67.6667%;
    float: left;
  }
  aside.page-content-aside {
    width: 30%;
    float: left;
  }
}

This CSS ensures that the layout adapts for smaller screens, with the columns stacking vertically on mobile devices. Documenting responsive design in this way helps ensure continuity across devices post-migration.

SEO Markup

For improved search engine visibility, many hospitality sites use structured data like schema.org markup. Here’s an example:

html
Copy code
<script type="application/ld+json">
[
  {
    "@context": "http://schema.org",
    "@type": "Hotel",
    "name": "The Grand Hotel",
    "address": "123 Example St, City, Country"
    // ... other properties
  }
]
</script>

This markup signals to search engines that this page represents a hotel, which can improve the site’s appearance in search results. Documentation should highlight these SEO strategies to ensure they’re carried over in the new site.

Integration Analysis and Documentation

For any third-party services, like reviews or loyalty programs, provide a detailed analysis of how they’re integrated into the existing site. This helps prepare for potential API migrations and data handling in the new setup.

Example Claude Prompt for Integration Mapping

“The site uses a third-party API to show guest reviews on each room page. Document the API structure and dependencies, such as API keys or data syncing schedules, to prepare for rebuilding this integration on a new CMS.”

This prompt will guide the AI to identify specific integration points, required API fields, and any dependencies that need to be addressed.

Leveraging Screenshots to Enhance Documentation

Screenshots play a crucial role in enhancing documentation, providing a visual anchor that ties the code to actual user interactions. Here’s how to use them effectively:

• Highlight Interactive Elements: Include screenshots of features like the collapsible sidebar for offers. This clarifies the functionality and expected user experience, which can sometimes be lost in text alone.
• Booking Button Placement: Capture the booking button in its intended position, helping future developers understand the spatial relationship between elements.

By combining screenshots with HTML and descriptive context, you create documentation that captures the essence of the site’s features. This approach makes the documentation user-centred, bridging the gap between technical structure and user experience.

How AI Enhances Product Ownership in Hospitality

Using a hybrid approach of manual site investigation and AI documentation empowers Product Owners to document hospitality sites with unprecedented thoroughness. By providing context around each feature’s role in the user experience, you ensure that AI tools like ChatGPT and Claude generate documentation that’s not just technically accurate but user-centric.

Final Takeaway

With the right setup and prompts, AI tools can transform the documentation process, turning raw HTML and technical specifications into an actionable, user-focused report. For Product Owners, this means a more efficient, thorough documentation process that bridges technical and UX elements. In the hospitality industry, this approach can streamline complex migrations, ensuring that nothing important is lost in translation.