a navigation system that made a large interactive financial document easy to use, with 47 page templates and 3 navigation layers

layout & navigation system design

hsbc

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

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

page templates

navigation layers on every page

major sections, built while the copy was still being written

numbering levels: 1 · 1.1 · 1.1.1

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