From Document to Digital Guide
“How might we rethink navigation to make the guide intuitive in a digital medium?“
Structure Information for Smooth Reference
“How might we structure complex information so users can quickly find, scan, and understand what they need?”
Create a Visual System for Consistency
“How might we create a visual language that makes different types of information clear and consistent?”
Digital Navigation Requires More Than a TOC
When moving through a digital guide, users need to know not only where to go, but where they are and how to move back and forth between related information.
Clear Hierarchy Makes Information Easier to Navigate
When information is dense, a clear and consistent hierarchy helps users quickly scan, understand, and reference content.
Visual Consistency Creates Recognition
A consistent visual language helps users orient themselves and recognize different types of information at a glance.
Redesign the Guide as a Digital Reference Tool
We transformed the book-like guide into a flexible digital tool, combining a clear information hierarchy with a consistent visual system to support different reading patterns and make dense content easier to scan, navigate, and reference.
RESEARCH APPROACH
We first assessed the volume and complexity of the existing GSG, mapping its chapters and content to understand
the guide’s overall scale and how users would interact with
the information.
This helped us identify opportunities to restructure the content and establish a stronger foundation for the redesign.
We first studied each section to understand its function and relationship to the rest of the guide before considering how the content could be reorganized. We then worked with the client through workshops to examine the existing structure—discussing what felt unclear or no longer made sense, what needed to change, what could be combined, and what needed to remain distinct.
As we developed a deeper understanding of the content and the client’s needs, we began identifying opportunities to reorganize related information into clearer sections and establish a more intentional hierarchy.
Before we could ask the right questions, we first had to uncover what we don’t know
Exploring Design Directions
With the information hierarchy established, we explored three visual directions across typography, iconography, and photography while preserving the same 2-column layout so the reader would still be familiar with it.
Clean, strong, and reliable, bold hierarchy
Layered, structured, and authentic, institutional
Illustrative, color-coding, functional
Our first navigation concept placed the chapter system across the top of each page, drawing inspiration from familiar website navigation patterns.
However, testing revealed that the system reduced the available reading area and competed with the content.
We moved the navigation into a persistent right-hand sidebar, creating a dedicated navigation zone while preserving the main reading area. Chapter-specific colors and navigation pills help users understand where they are within the larger document and move between sections more easily.
Contemporary without losing authority. Our initial direction paired a highly stylized sans serif display typeface with a neutral body typeface. While the combination created strong contrast, it also began to make the guide feel more like a contemporary magazine than an official reference document.
We ultimately selected Onest as the primary typeface throughout the guide. The simpler typographic system improved readability and gave the document a more contemporary character while maintaining the clarity and authority expected of a government publication.