The Green Schools Guide originally designed as a physical book, the guide’s digital version largely carried over the same structure. While effective in print, the format made a large amount of technical information difficult to navigate and scan on screen.

As the guide transitioned to a fully digital format, we saw an opportunity to rethink not only its visual language, but also how users move through, reference, and understand the information.

APPROACHDesigning around how the guide is actually used
We began by studying the existing guide and mapping its content structure. We looked at the different types of information within each chapter, how sections related to one another, and how professionals might move back and forth through the document while referencing requirements.

This led us to focus on three questions:

What information needs to be immediately recognizable?
How can readers move between chapters and sections seamlessly?
How can visual signals support navigation without interrupting the reading experience?

Turning it in to a stronger search toolAs a reference tool, GSG’s value depends on how quickly users can find the information they need. We asked ourselves: what makes a search experience truly useful? One key answer was internal linking.

By connecting related content throughout the guide, internal links allow users to move directly between relevant sections, transforming GSG from a static digital document into a more intuitive, searchable tool. This makes complex information easier to navigate, reference, and access when users need it.

Clarify complex information through structureBefore developing the visual system, we first reconsidered how the existing content was organized. Some sections were combined or reorganized to create a clearer reading flow, while recurring information was structured more consistently to make the guide easier to scan.
Because the guide functions as a reference rather than a document meant to be read from beginning to end, we also introduced a persistent navigation system connecting the table of contents, chapters, and key sections.

VISUAL DIRECTIONFinding the balance between authority and accessibiliyWe developed three distinct visual directions, they spread across different hierarchy of typography, iconography and photography
Rather than treating the redesign as a purely aesthetic exercise, we
used a workshop with the client to identify the guide’s most important messages, functions, and user needs.

This helped us determine which visual language could best support the content while still feeling appropriate for an official government publication.

PHOTOGRAPHY LED

TPOGRAPHY LED

PHOTOGRAPHY LED

DEISGN DECISIONS

TYPOGRAPHY
Contemporary, without losing authorityOur 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.

NAVIGATION SYSTEM
Designing navigation for a document that behaves as a websiteOur 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.

COLOR SYSTEM
Using color as a navigational toolThe color system was designed to organize information rather than simply add visual variety. Dark green anchors the overall system, connecting the guide back to the Green Schools identity and providing a consistent base for graphic elements and highlights.
Each chapter was then assigned a soft, neutral color to create differentiation between sections without overwhelming the dense technical content.

Before finalizing the system, we redesigned several chapters as a test, allowing us to evaluate how the visual language performed across different types of information.

GRAPHIC ELEMENTS
Separating orientation from informationBecause the guide is primarily composed of requirements, technical information, supporting graphics, and explanatory text, we explored a two-column layout system to improve scanning.

LAYOUT DESIGN
Separating orientation from informationBecause the guide is primarily composed of requirements, technical information, supporting graphics, and explanatory text, we explored a two-column layout system to improve scanning.

The left column acts as an organizational layer, holding requirement titles, section labels, and content dividers. The right column contains the primary information. This creates a clear distinction between where the reader is and what the reader needs to know, allowing users to navigate dense information without relying on oversized visual elements.

OUTCOME
A digital reference designed for the way professionals workThe redesigned Green Schools Guide moves beyond simply translating
a physical book into a digital PDF.

By combining information architecture, editorial design, persistent navigation, and interactive PDF functionality, we created a system that helps professionals move through a large amount of technical information more efficiently. The result preserves the structure and credibility of an official government publication while introducing a more intuitive, contemporary digital experience.

BACK

BACK TO TOP