A navigation and layout system that made a complex multi-section financial document easy to move through from any point — without going back to the start.
the brief
HSBC needed a layout framework for a long-form interactive PDF covering their Net Zero Transition Plan. The document was dense — multiple major sections, each with several subsections — and the content was still being drafted. The challenge was structural: how do you design a navigation system that tells the reader exactly where they are at all times, lets them jump to any section from any page, and holds together as a coherent document as new content is added?
what I did
I designed a layout system built around persistent navigation: a left-side panel showing the full document hierarchy with the active section highlighted, a vertical section label on the outer edge, and a top bar with page-level controls. Every page told you where you were without requiring a return to the contents page.
Each section had its own visual treatment while sharing the same structural framework, so the document scaled as content was added. I created one master layout per page type — not per page — so HSBC's designers could follow the system and build it out independently.
scope & scale
47
Page templates covering the full Net Zero Transition Plan document structure
3
Navigation layers on every page: left-side clickable section hierarchy with active state highlighting · vertical spine label showing current section · top bar with page counter and forward/back controls
2
Major sections with numbered subsection system (1.1, 1.1.1) — structured for a document still being written
FS
Financial services document architecture built for HSBC via AnalogFolk, handed off for independent execution
the result
HSBC's design team received a self-sufficient layout system they could populate and extend without briefing back. Readers could move through a complex financial document with full orientation at every point.
