Example project
See Scaffolds on a real website architecture
This is not a polished mock-up made for a demonstration. It is the working scaffold for the website you are reading now: six pages, forty seven blocks, four audience intents and four journeys, with the reasoning recorded against every section as it was actually written.
Example project
See Scaffolds on a real website architecture
What to explore
Desktop and mobile views
Open the project
Guided tour
Four things worth doing once you are in there
Opening someone else's project cold is disorienting. These four take about five minutes between them and cover most of what the product is.
1. Read the architecture
Six top level pages, each its own tree. Notice that colour is the audience a section serves, not the kind of component it is.
2. Open a page
Select a page and open its detail. Every block has a purpose written against it, and some carry a red flag where a decision is still open.
3. Follow a journey
Open user journeys and step through "Evaluate and request access". It moves across four real pages, from a referral to a submitted enquiry.
4. Read the reasoning
Pick any block and read its note. That is the part that usually lives in someone's head and disappears when they roll off the project.
Two devices, one model
Desktop and mobile are different projections, not different products
Desktop gives you the spatial canvas because a sitemap is a space. A phone gives you a hierarchy and focused detail views, because panning a canvas with a thumb is miserable. Both are the same document.
The same document as a spatial canvas. Pan and zoom, because a sitemap is a space rather than a list.
What to notice
What the example is actually demonstrating
Beyond the surface, these are the product ideas the scaffold is there to show.
- Stable structure
- Every page and block carries an identifier that survives renames and moves. It is the reason an AI edit can be merged into the project rather than replacing it.
- Colour means intent
- A block is coloured by the audience it serves, not by what kind of component it is. Chrome such as headers and footers stays neutral grey, so the colour always means the same thing.
- Journeys route through real pages
- Steps reference pages by identity rather than by name, so the journey survives the architecture being reorganised around it.
- Journeys leave the site
- A step can be an external system. Most real journeys break at exactly that boundary, so the model has to be able to represent it.
- Reasoning lives on the block
- Purpose, evidence, open questions and red flags are attached to the section they concern rather than collected in a separate document nobody opens.
- Review is a first class activity
- Comments and pinned notes are open to people who cannot edit, because the feedback that matters usually comes from someone who will never open the editor.
Open the project
It opens read only in a browser tab. No account, no signup, nothing to install. Comments and pinned notes are open to you if you want to leave one.