Updating the Navigation UX Prototype

1What this is

The prototype is a self-contained clickable website used for the navigation usability test. It's just a set of plain HTML files plus an assets folder (styles, scripts, fonts, images). There's nothing to install and no internet needed — a web browser opens it directly.

You have it as CAAT-navigation-prototype.zip. Unzip it anywhere, then double-click index.html to open it in your browser.

Because every page is a normal HTML file, you can change almost anything by editing the text of a file — and ChatGPT is very good at doing that for you.

2Before you start

• Work on a copy. Duplicate the whole folder before editing, so you can always go back to the original.
• Never delete, move, or rename the assets folder. It holds all the styling, fonts, and scripts — without it, every page looks broken.
• Keep file names exactly the same. Pages link to each other by file name (e.g. members.html). Renaming a file breaks the links to it.
• Save files with the .html extension — not .txt.
• Test every change by double-clicking index.html and clicking through the pages.
• The top menu, footer, and hero banner repeat on every page. Changing them on one page won't match the others — see section 6.

3Finding the right file

Each page is one HTML file in the main folder. The file name is the page title in lowercase with dashes instead of spaces.

4Making a change with ChatGPT

1. Find the file for the page you want to change (section 3).
2. Give the file to ChatGPT. Easiest way: click the paperclip / “+” in ChatGPT and upload the .html file. (Or open it in Notepad / VS Code, copy all the text, and paste it in.)
3. Say what to change. Be specific and quote the exact words. Ask for “the complete updated file back.” (Template in section 7.)
4. Save ChatGPT's result back into the file, keeping the .html extension.
5. Test: double-click index.html, go to that page, and check it looks right.
6. When you're happy, re-zip the folder (section 8) and share it.

5Common changes

Each recipe below = the file to open + what to tell ChatGPT.

6Changing the menu, footer, or hero on every page

These repeat on every page, so editing one file is not enough. Two situations:

A) Simple relabel

For example, renaming the menu item “Members” to “For Members”. Use a “Find in all files / Replace in all files” tool so the change hits every page at once.

• Free tool: open the folder in VS Code → press Ctrl + Shift + H (Replace in Files) → type the exact old text and the new text → Replace All → test.
• ChatGPT can help you work out the exact old/new text to search for — paste it one page's menu block and describe the change.

B) Bigger changes

Adding a brand-new menu item, reordering the sections, or adding/removing whole pages touches the desktop menu, the mobile menu, and needs new page files. It's fiddly and easy to make inconsistent by hand.

7Copy-paste prompt for ChatGPT

8Re-zipping the prototype for the UX team

After you've tested your changes:

1. Open the prototype folder.
2. Select everything inside it — index.html, the other pages, and the assets folder — not the folder itself.
3. Right-click → Send to → Compressed (zipped) folder.
4. Rename it, e.g. CAAT-navigation-prototype.zip.
5. Share it. Recipients unzip it and double-click index.html.

9If something looks broken

10Good to know: there are two copies

1. The offline bundle (this zip) — what the UX team runs on their own computers. Edit these files as described above. This is the one that matters for the test.

2. The design-system version at public/templates/ux-prototype/ (the internal site at localhost:3000) — the exact same pages, kept inside the CAAT Design System. If you're only handing out the zip, you can ignore this copy. If the test is run from the internal site instead, edit those files the same way.