SANRAL People's Guide: From Print to Interactive Web

State of the Nation Website Redesign

SANRAL’s People's Guide is a crucial summary of their massive annual report. But for years, it lived as a static PDF designed for print. If you wanted to read it on your phone, you were pinching and zooming through A4 pages. We needed to stop treating digital as an afterthought and turn this document into a native web experience.

Redesigning South Africa’s most critical annual address into a mobile-first, accessible digital experience for millions of citizens.

Redesigning South Africa’s most critical annual address into a mobile-first, accessible digital experience for millions of citizens.

Digital Publication

information Strategy

No-code development

Agency Work experience

Lead Digital Designer/Engineer

About

The South African National Roads Agency (SANRAL) manages the country's national road network. Beyond infrastructure, they are a key driver of economic growth. Their annual reporting is crucial for transparency, but the data is often dense and buried in heavy corporate documents.

Strategy & UX Killing the PDF

Strategy & UX Killing the PDF

The original format was built for a printer, not a user. My strategy was to move from "Pages" to "Scroll." We audited the 50+ page document and restructured the content into a linear digital narrative allowing the user to flow through the story naturally without ever having to download a file.

Visual Design Data as Art

In print, you are limited by space. On the web, we have infinite vertical canvas. We moved away from the text-heavy layout and utilized large-scale photography and animated data visualizations. Instead of reading a static paragraph about the R420 billion network value, the user sees the numbers animate onto the screen, creating a sense of scale that a PDF simply can't match.

No-Code Scrollytelling

No-Code Scrollytelling

I moved the project into a live environment to bridge the gap between static design and active development. Instead of a flat layout, I constructed a responsive framework where elements react to the user's behavior in real-time. By implementing parallax scrolling and scroll-triggered animations, I was able to control the pacing of the information, guiding the user through the financial and safety stats one beat at a time. This approach ensured that the user stayed engaged with the narrative rather than just skimming past a wall of text.

Built using Vev

Built using Vev

We chose Vev for its specialized "scrollytelling" capabilities. It allowed us to design high-fidelity interactions visually without needing a dedicated engineering team. This meant we could iterate faster and push the creative boundaries of the report, ensuring that the final digital product matched the ambitious vision of the design file pixel-for-pixel while maintaining excellent performance scores.

Have a project in mind?

Whether you’re starting from scratch or refining something that already exists, I’d love to hear about it.

Or just say hey!

Info@houseofrichardson.co.za

You'll find me here

Cape Town, South Africa

Have a project in mind?

Whether you’re starting from scratch or refining something that already exists, I’d love to hear about it.

Or just say hey!

Info@houseofrichardson.co.za

You'll find me here

Cape Town, South Africa

Have a project in mind?

Whether you’re starting from scratch or refining something that already exists, I’d love to hear about it.

Or just say hey!

Info@houseofrichardson.co.za

You'll find me here

Cape Town, South Africa