A helpful guide for Product Owners to leverage AI tools for detailed documentation during website migration and redesign projects.
Start typing to search...
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.
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.
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.
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.
.room-details might have a display: flex property that
controls the layout.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:
Once you input the prompt, review the AI’s output carefully. Check that it includes:
div for room details, an
aside for the sidebar, and include any relevant classes like .room-details
or .booking-button.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-detailsclass sets up a flex layout for aligning content, while.room-titleand.booking-buttonstyles 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
offerssection contains a list of current promotions, which expands or collapses on user interaction.- Suggested Improvement: Use
aria-expandedattributes 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.
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.
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.
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.
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.
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.
Based on your observations, here’s a sample data structure for room details:
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.
For the offers and rewards sidebar, document the data fields that power it:
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.
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.
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:
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 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.
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.
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.
“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.
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:
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.
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.
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.