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.
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.
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.
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.




