NSGIA Memory System

TITLE: NSG Website Workflow # NSG Website Workflow ## Purpose Reduce website creation from 20-48 hours to 5-10 hours by: - Preserving context across chat sessions - Front-loading strategy decisions - Using visual storytelling before accordion depth - Following a repeatable structure --- ## Philosophy ### People Don't Read They scan. They want instant understanding. Limbic before cortex. A wall of text gets skimmed. Accordions get ignored. But images with short captions register in under a second. ### Two-Part Structure **Part 1: Visual Story (above the fold)** - Images with short captions - The problem (2-4 images) - The solution (2-4 images) - The outcome (1-2 images) - 5 seconds to understand what this is and why it matters **Part 2: Accordion Depth (below the fold)** - For the engineer who wants specs - For the investor who wants numbers - For the policy person who wants compliance details - They drill as deep as they want The visual story does the limbic work. The accordions serve those who passed the first test and want more. ### Reference Example https://grants.nsgia.com/rg demonstrates this structure: - Visual story of problems (flooding, food gaps, youth opportunity) - Visual story of solutions (rain gardens, jobs, beauty) - Then accordion sections for Federal Requirements, Funding, Implementation, ROI, Risk --- ## Strategy vs Tactics vs Execution | Level | Question | Example | |-------|----------|---------| | **Strategy** | What do we need and in what order? | Contractor relationship first | | **Tactics** | What are the options and considerations? | ABC, DEF, GHI meet criteria | | **Execution** | Who does what when? | Call John Tuesday, budget $X | ### Strategy = The Map Strategy shows the unlock sequence. The keys you need, in what order, and why that order matters. Example - visiting sister in Seattle: 1. Get her agreement on timing (can't book before this) 2. Find best route (balance money and time) 3. Determine ground transport (depends on route) 4. Figure return Each step unlocks the next. Sequence matters. This is strategy. Strategy is NOT: flight costs $347, drive is 45 minutes, stay 4 days. That's execution data. ### Tactics = The Options Tactics takes each strategy element and flushes out the how. **Strategy says:** We need a contractor relationship in Ghana **Tactics says:** - Primary contractors: ABC Construction, DEF Builders, GHI Development - Selection criteria: local presence, government relationships, prior housing projects - Approach: direct outreach vs. introduction through partner Still not execution. Just the concrete options and considerations. ### Execution = Internal Execution might not be on the website at all. That's internal work plans, timelines, budgets. On the website, execution becomes "Next Steps" or "Contact" - minimal. --- ## Website Section Structure ### Standard Flow 1. **Visual Story** - Limbic hook, instant understanding 2. **Strategy** - The unlock sequence, why this order 3. **Tactics** - Options for each strategy element 4. **Supporting Sections** - Market, Property, Product, Budget, Team (project-specific) 5. **Next Steps / Contact** - Minimal execution, call to action ### Section Accordion Structure Each section follows the 4-level hierarchy: ``` Section: [Name] Main Heading: [Category] Subheading: [Topic] Content: [Details] Subheading: [Topic] Content: [Details] Main Heading: [Category] ... ``` The walking chats figure out what goes in each box. The build phase translates to HTML. --- ## Workflow Phases ### Phase 1: Strategy (walking chats) Discuss with AI: - What is this project? - Who is the audience? - What makes this different? - What are the unlock elements? In what order? - Research questions (market size, demographics, income quintiles) **End of chat:** AI writes summary of conclusions. Save to memory system. ### Phase 2: Section Planning (walking chat) - List what sections this site needs - Not the same as qplex - figure out what's relevant - Determine visual story images needed **End of chat:** Section list and image needs saved to memory system. ### Phase 3: Section Development (one chat per section) For each section: - Deep dive on content - Research as needed - Plan visual story elements (what images, what captions) - Plan accordion structure (what main headings, what nests under what) **End of chat:** Section summary saved to memory system. Detailed enough to write HTML later. ### Phase 4: Build (at computer) 1. Clone qplex structure: ```bash cd /var/www/html ./nsg_standards/nsg_clone_dev.sh sitename ``` 2. Fetch all section summaries from memory system 3. Update files: - `_sidebar.html` - navigation with actual section list - `{sitename}.html` - includes for actual sections - `{sitename}_variables.css` - colors - Each section file - content from summaries 4. Test locally on ws (localhost:5000) 5. Deploy: ```bash scp -r /var/www/html/sitename.nsgia.com mh@104.191.236.122:/var/www/html/ ``` 6. At PHR terminal: ```bash cd /var/www/html ./nsg_find_port.sh ./nsg_deploy.sh sitename [port] certbot --nginx -d sitename.nsgia.com ``` --- ## Chat Discipline ### The Context Problem Walking chats end mid-stream. New chat starts. 2 hours of strategy work disappears. ### The Fix When starting a new chat about a project: 1. Say: "Continue our discussion about [project]" 2. AI fetches previous chat 3. **Before continuing:** AI summarizes conclusions so far 4. Save that summary to memory system 5. Then continue The summary accumulates. Each chat adds to it. By the time strategy is done, you have a clean document of what was decided. ### What to Save Not the whole chat. Just conclusions: - What was decided - What the sections are - What the strategy elements are - What research was found - What images are needed 10-20 lines. Survives chat restarts. Every new chat fetches it. --- ## Project Intake Template Save this to memory system at end of Phase 1: ``` Project: [sitename].nsgia.com One-sentence: [What is this?] Audience: [Who is this for?] Differentiator: [What makes this different?] Strategy Elements (unlock sequence): 1. [Element] - why first 2. [Element] - why this order 3. [Element] - depends on above 4. [Element] - final unlock Sections Needed: - Visual Story - Strategy - Tactics - [Section] - [Section] - [Section] - Contact Image Needs: - [Description] - source: [where to get it] - [Description] - source: [exists / need to create / need to find] Colors: [palette or "to be selected"] Source Material: - [URL or document name] - [URL or document name] ``` --- ## Section Summary Template Save this to memory system at end of Phase 3 (one per section): ``` Section: [Name] Purpose: [One sentence - what does reader learn here?] Visual Story (if applicable): - Image 1: [description] - caption: [short text] - Image 2: [description] - caption: [short text] Accordion Structure: Main Heading: [Name] Subheading: [Topic] - [Key point] - [Key point] Subheading: [Topic] - [Key point] - [Key point] Main Heading: [Name] Subheading: [Topic] - [Key point] Subheading: [Topic] - [Key point] Research Found: - [Fact with source] - [Fact with source] Open Questions: - [What still needs to be determined] ``` --- ## Reference Documents | Document | Purpose | URL | |----------|---------|-----| | NSG_Standards | CSS, JS, accordion classes, component reference, setup guides | https://nsgia.com/p/c785ca610fd343f99c8d5d30baa1339e | | NSG_Coding_Standards | File limits, error handling, change logs, Python patterns | [memory system URL after upload] | | NSG_Communication_Standards | Peer-to-peer tone, evocative restraint | [memory system URL after upload] | | NSG_PostMortem_Errors | Living document of specific failures | [memory system URL after upload] | | Rain Garden Example | Visual story + accordion structure | https://grants.nsgia.com/rg | --- ## Post-Clone Customization Checklist After running `nsg_clone_dev.sh`: - [ ] Update `templates/partials/_sidebar.html` with actual sections - [ ] Update `templates/{sitename}.html` with actual includes - [ ] Update `static/css/{sitename}_variables.css` with colors - [ ] Create visual story section (images + captions) - [ ] Replace each section file content (structure stays, content changes) - [ ] Add hero image to `static/images/` - [ ] Add section images to `static/images/` - [ ] Test all accordion levels expand/collapse - [ ] Test all sidebar links navigate correctly - [ ] Verify mobile responsive --- ## Time Budget Target | Phase | Target Time | |-------|-------------| | Phase 1: Strategy | 1-2 hours (walking) | | Phase 2: Section Planning | 30 min (walking) | | Phase 3: Section Development | 2-4 hours total (walking, one chat per section) | | Phase 4: Build | 2-4 hours (at computer) | | **Total** | **5-10 hours** | The key: decisions happen in Phases 1-3. Phase 4 is just translation to HTML with full context. --- *Last Updated: 2025-01-02*